Overview of the Phoenix and LiveView Footer Component
The Mishka Chelekom footer component is a Phoenix LiveView component that enables developers to create fully customizable and responsive footers, perfect for enhancing the user experience. It offers flexible design options, allowing for adjustments in text alignment, padding, and layout, ensuring a clean and professional appearance.
This Phoenix LiveView component supports multiple design variants such as default, outline, transparent, and shadow, making it ideal for improving both the aesthetic and functionality of your application's footer. With its responsive design and ease of customization, this footer component enhances the presentation and usability of your website's lower sections.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
Default Variant
The default style of the Mishka Chelekom footer applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles. Default variant have also white and dark colors which are the same colors in the dark and light mode.
<.footer color="natural"></.footer> <.footer color="white"></.footer> <.footer color="primary"></.footer> <.footer color="secondary"></.footer> <.footer color="dark"></.footer> <.footer color="success"></.footer> <.footer color="warning"></.footer> <.footer color="danger"></.footer> <.footer color="info"></.footer> <.footer color="light"></.footer> <.footer color="misc"></.footer> <.footer color="dawn"></.footer>
Outline Variant
The outline style of the Mishka Chelekom footer features a border. Using a single setting, you can choose from various color variants to suit your design needs.
<.footer variant="outline" color="natural"></.footer> <.footer variant="outline" color="primary"></.footer> <.footer variant="outline" color="secondary"></.footer> <.footer variant="outline" color="dark"></.footer> <.footer variant="outline" color="success"></.footer> <.footer variant="outline" color="warning"></.footer> <.footer variant="outline" color="danger"></.footer> <.footer variant="outline" color="info"></.footer> <.footer variant="outline" color="light"></.footer> <.footer variant="outline" color="misc"></.footer> <.footer variant="outline" color="dawn"></.footer>
Shadow Variant
The shadow variant of the Mishka Chelekom footer is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.
<.footer variant="shadow" color="natural"></.footer> <.footer variant="shadow" color="primary"></.footer> <.footer variant="shadow" color="secondary"></.footer> <.footer variant="shadow" color="success"></.footer> <.footer variant="shadow" color="warning"></.footer> <.footer variant="shadow" color="danger"></.footer> <.footer variant="shadow" color="info"></.footer> <.footer variant="shadow" color="light"></.footer> <.footer variant="shadow" color="misc"></.footer> <.footer variant="shadow" color="dawn"></.footer>
bordered Variant
The Bordered variant of the Mishka Chelekom footer has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
<.footer variant="bordered" color="natural"></.footer> <.footer variant="bordered" color="white"></.footer> <.footer variant="bordered" color="dark"></.footer> <.footer variant="bordered" color="primary"></.footer> <.footer variant="bordered" color="secondary"></.footer> <.footer variant="bordered" color="dark"></.footer> <.footer variant="bordered" color="success"></.footer> <.footer variant="bordered" color="warning"></.footer> <.footer variant="bordered" color="danger"></.footer> <.footer variant="bordered" color="info"></.footer> <.footer variant="bordered" color="light"></.footer> <.footer variant="bordered" color="misc"></.footer> <.footer variant="bordered" color="dawn"></.footer>
Transparent Variant
The transparent variant of the Mishka Chelekom footer is similar to the default variant, but without border and background color.
<.footer variant="transparent" color="natural"></.footer> <.footer variant="transparent" color="primary"></.footer> <.footer variant="transparent" color="secondary"></.footer> <.footer variant="transparent" color="success"></.footer> <.footer variant="transparent" color="warning"></.footer> <.footer variant="transparent" color="danger"></.footer> <.footer variant="transparent" color="info"></.footer> <.footer variant="transparent" color="light"></.footer> <.footer variant="transparent" color="misc"></.footer> <.footer variant="transparent" color="dawn"></.footer>
Gradient Variant
The gradient variant of the Mishka Chelekom footer has gradients in various colors.
<.footer variant="transparent" color="natural"></.footer> <.footer variant="transparent" color="primary"></.footer> <.footer variant="transparent" color="secondary"></.footer> <.footer variant="transparent" color="success"></.footer> <.footer variant="transparent" color="warning"></.footer> <.footer variant="transparent" color="danger"></.footer> <.footer variant="transparent" color="info"></.footer> <.footer variant="transparent" color="light"></.footer> <.footer variant="transparent" color="misc"></.footer> <.footer variant="transparent" color="dawn"></.footer>
Rounded prop in Phoenix LiveView footer Component
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the border radius of the footer, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.
<.footer rounded="extra_small"></.footer> <.footer rounded="small"></.footer> <.footer rounded="medium"></.footer> <.footer rounded="large"></.footer> <.footer rounded="extra_large"></.footer>
Border prop
The border prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the border size of the footers, allowing you to adjust the thickness to suit your design.
<.footer border="extra_small"></.footer> <.footer border="small"></.footer> <.footer border="medium"></.footer> <.footer border="large"></.footer> <.footer border="extra_large"></.footer>
Space prop
The space prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the vertical spacing between elements within the footers.
<.footer space="extra_small"></.footer> <.footer space="small"></.footer> <.footer space="medium"></.footer> <.footer space="large"></.footer> <.footer space="extra_large"></.footer>
Padding prop
The padding prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the padding around the content inside the footers.
<.footer padding="extra_small"></.footer> <.footer padding="small"></.footer> <.footer padding="medium"></.footer> <.footer padding="large"></.footer> <.footer padding="extra_large"></.footer>
Max width prop
The
max_width
attribute controls the maximum width of the footer component, ensuring that the content stays within a defined boundary, which is especially useful for creating consistent layouts. By setting the
max_width
value, you can easily limit how wide the footer can extend, maintaining a structured appearance across different screen sizes. This attribute allows the footer to remain centered and visually balanced, enhancing the overall presentation of the component in any layout.
<.footer max_width="extra_small"></.footer> <.footer max_width="small"></.footer> <.footer max_width="medium"></.footer> <.footer max_width="large"></.footer> <.footer max_width="extra_large"></.footer>
Text position prop
The
text_position
attribute controls the alignment of text within a component, ensuring that content is properly positioned based on the design needs. With options like
left
,
right
, and
center
, you can align text to the left, right, or center of the component, respectively. This flexibility allows developers to manage how textual content is presented, enhancing readability and improving the visual structure of the component. If no specific value is provided, a default alignment is applied, typically aligning the text to the left.
<.footer text_position="left"></.footer> <.footer text_position="center"></.footer> <.footer text_position="right"></.footer>
Footer font weight prop
The
font_weight
prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is
font-normal
. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the footer. This provides flexibility in ensuring the title stands out appropriately within the overall footer layout.
<.footer font_weight="font-light"></.footer> <.footer font_weight="font-bold"></.footer> <.footer font_weight="font-medium"></.footer>
Footer section component
The
footer_section
component is a versatile part of the overall footer structure, designed to handle individual sections within the footer, such as text, links, or additional content. It supports a range of customization options, including
padding
,
text_position
, and
space
, allowing developers to adjust spacing, alignment, and layout to meet specific design needs. With the
font_weight
and
class
attributes, additional styling and custom CSS can be applied to ensure consistency and enhance the visual appearance. The footer_section also accepts an
inner_block
, making it flexible for rendering dynamic content, which can be tailored to different use cases, such as contact information, copyright notices, or navigation links.
<.footer class="your_classes" color="secondary" padding="large" space="medium"> <.footer_section class="your_clsses" padding="large"> <.list color="secondary" space="large"> <:item><.link navigate="/path">link</.link></:item> <:item><.link navigate="/path">link</.link></:item> <:item><.link navigate="/path">link</.link></:item> </.list> <p class="text-sm">A description inside footer section</p> </.footer_section> <.footer_section text_position="center" class="border-t" padding="small"> Copyright </.footer_section> </.footer>
Footer section space prop
The space prop control the vertical spacing between elements within the footer سثزفهخد.
extra_small
,
small
,
medium
,
large
, and
extra_large
.
<.footer> <.footer_section class="your_clsses" space="extra_small"></.footer_section> <.footer_section class="your_clsses" space="small"></.footer_section> <.footer_section class="your_clsses" space="medium"></.footer_section> <.footer_section class="your_clsses" space="large"></.footer_section> <.footer_section class="your_clsses" space="extra_large"></.footer_section> </.footer>
Footer section padding prop
The padding prop control the padding around the content inside the footer section
extra_small
,
small
,
medium
,
large
, and
extra_large
.
<.footer> <.footer_section class="your_clsses" padding="extra_small"></.footer_section> <.footer_section class="your_clsses" padding="small"></.footer_section> <.footer_section class="your_clsses" padding="medium"></.footer_section> <.footer_section class="your_clsses" padding="large"></.footer_section> <.footer_section class="your_clsses" padding="extra_large"></.footer_section> </.footer>
Footer section text position prop
The
text_position
attribute controls the alignment of text within component, ensuring that content is properly positioned based on the design needs. With options like
left
,
right
, and
center
, you can align text to the left, right, or center of the component, respectively.
<.footer> <.footer_section class="your_clsses" text_position="center"></.footer_section> <.footer_section class="your_clsses" text_position="right"></.footer_section> <.footer_section class="your_clsses" text_position="left"></.footer_section> </.footer>
Footer section font weight prop
The
font_weight
prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is
font-normal
.
<.footer> <.footer_section class="your_clsses" font_weight="font-bold"></.footer_section> <.footer_section class="your_clsses" font_weight="font-light"></.footer_section> <.footer_section class="your_clsses" font_weight="font-medium"></.footer_section> </.footer>