Overview of the Phoenix and LiveView Divider Component
The Mishka Chelekom divider component is a Phoenix LiveView component that allows developers to create highly customizable horizontal and vertical dividers for separating content visually. It offers flexible options in terms of style, size, and color, making it adaptable for any application layout.
This Phoenix LiveView component also supports advanced features such as text and icon integration directly on the line, enabling more engaging and interactive designs. With options for dashed, dotted, or solid lines, as well as customizable margins and spacing, this divider component enhances content organization and layout clarity.
Divider and hr divider
We offer a versatile divider component called
divider
, which allows for customizable horizontal and vertical dividers with various styling options like
solid
,
dashed
, or
dotted
. In addition to the divider, we also support the standard HTML
hr
tag through our
hr
component. Both components are designed to visually separate content while providing additional customization such as text, icons, and control over color, size, and alignment, making it easy to enhance the layout of any Phoenix LiveView application.
<.divider /> <.hr />
Type prop
The type attribute in the
Phoenix LiveView divider component
provides control over the visual style of the divider line, offering three distinct options:
solid
,
dashed
, and
dotted
. By default, the divider is set to
solid
, which creates a strong and continuous line, ideal for clearly separating sections of content. The
dashed
option features a series of evenly spaced dashes, offering a more relaxed and subtle appearance. Lastly, the
dotted
style creates a line composed of small dots, adding a decorative and lighter touch to content division. These options allow developers to customize the look and feel of the divider, enhancing both flexibility and aesthetics in the application's layout.
<.divider type="dashed" /> <.divider type="dotted" /> <.divider type="solid" /> <.hr type="dashed" /> <.hr type="dotted" /> <.hr type="solid" />
Color prop
The
color
attribute in the divider component defines the theme and appearance of the divider by offering a wide range of color options. You can choose from predefined color values such as
natural
,
primary
,
secondary
,
success
,
warning
,
danger
,
info
,
misc
,
dawn
, and
silver
. The default color is set to
silver
, but you can easily customize the color theme to match the design and style of your application. This flexibility ensures the divider blends seamlessly into the layout, whether you're using it to break up sections or emphasize key content areas.
<.divider color="primary" /> <.divider color="white" /> <.divider color="dark" /> <.divider color="secondary" /> <.divider color="success" /> <.divider color="danger" /> <.divider color="info" /> <.divider color="misc" /> <.divider color="dawn" /> <.divider color="silver" /> <.divider color="natural" />
Size prop
The size attribute in the divider component offers a range of predefined sizes, including
extra_small
,
small
,
medium
,
large
, and
extra_large
. These options allow you to control the thickness and overall size of the divider, ensuring it fits perfectly within your design, whether you need a subtle or a more pronounced visual separation.
<.divider size="extra_small" /> <.divider size="small" /> <.divider size="medium" /> <.divider size="large" /> <.divider size="extra_large" />
Width prop
The width attribute in the divider component controls the width of the element, allowing for various layout options. By default, the width is set to
full
, meaning the divider spans the entire available width. Other options include
half
, which limits the width to 50% of the container. Additionally, custom width values can be specified by passing a string, giving developers flexibility to adapt the divider's size to specific design needs. If no value is provided, it defaults to
full
.
<.divider width="half" /> <.divider width="full" />
Margin prop
The margin attribute in the divider component determines the space around the divider element, helping to control how closely it is positioned relative to other content. By default, the margin is set to
none
, which means no additional space is added. However, developers can choose from predefined margin sizes like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These options make it easy to adjust the spacing based on the design's needs, ensuring the divider fits naturally within the layout while maintaining proper visual separation between elements.
<!--Both horizontal and vertical <.divider/> and <.hr/> has support margin--> <.divider margin="extra_small" /> <.divider margin="small" /> <.divider margin="medium" /> <.divider margin="large" /> <.divider margin="extra_large" /> <.divider margin="none" />
Variation prop
The variation attribute defines the layout orientation of the divider component, offering two values:
horizontal
and
vertical
. By default, the divider is set to a horizontal orientation, making it suitable for separating content across the width of the page. However, setting the value to
vertical
allows the divider to create vertical separations, which can be useful for side-by-side content. It's important to note that this attribute is exclusive to the
divider
component and is not available for the
hr
component, which only supports horizontal dividers.
<.divider variation="horizontal" /> <.divider margin="vertical" />
Height prop
The height attribute is particularly relevant for vertical dividers, where it defines the vertical space that the divider occupies. For example, with the default value of
auto
, the height adjusts based on the content around it. You can also set it to
half
to make it take up half the screen height, or provide a custom value to fine-tune the height based on specific design requirements. This gives developers the flexibility to use vertical dividers effectively in various layouts.
<.divider variation="vertical" height="h-full" /> <.divider variation="vertical" color="natural" height="half" /> <.divider variation="vertical" height="h-1/3" />
Text slot
The
:text
slot for both the divider and hr components provides several attributes for customization:
- class: The class attribute allows you to apply custom CSS classes to the text, giving full control over its styling. You can use this attribute to adjust the appearance of the text, such as spacing, font styles, or other design elements.
- color: The color attribute defines the color theme of the text, ensuring it matches or contrasts with the divider or hr component. You can choose from predefined color options like primary, success, danger, and more.
- size: This attribute controls the overall size of the text, including padding, font size, and other relevant elements. You can adjust the text size to fit the design and layout of your component.
- position: The position attribute allows you to control the placement of the text within the component. The text can be aligned to the left, right, or center, depending on the context and design requirements.
<.divider type="dashed" size="small" color="silver"> <:text position="right">Or</:text> </.divider> <.divider size="small" color="success"> <:text position="left">Or</:text> </.divider> <.divider type="dotted" size="small" color="warning"> <:text position="middle">Or</:text> </.divider>
Icon slot
The
:icon
slot for both the divider and hr components offers several attributes that provide extensive customization options:
- position: This attribute controls the placement of the icon within the component, allowing it to be positioned left, right, or center. It helps in aligning the icon based on the desired layout and context of the design.
- class: The class attribute allows you to apply custom CSS classes to the icon, enabling full control over its styling. This could include adjustments to spacing, padding, or other design elements that fit the overall theme of the component.
- icon_class: This attribute is specifically for adding classes that directly style the icon itself. It offers more granular control over the icon’s appearance, such as defining the size, weight, or other visual properties unique to the icon.
- color: The color attribute defines the theme of the icon, allowing it to match or contrast with the divider or hr component. Predefined color options such as primary, success, danger, and more ensure that the icon fits within the overall design aesthetic of the application.
<.divider type="dashed" size="small" color="silver"> <:text position="right">Or</:text> </.divider> <.divider size="small" color="success"> <:text position="left">Or</:text> </.divider> <.divider type="dotted" size="small" color="warning"> <:text position="middle">Or</:text> </.divider>