Divider

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.

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 />

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" />

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 base, natural, primary, secondary, success, warning, danger, info, misc, dawn, and silver. The default color is set to base, 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="base" />
<.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" />

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" />

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" />

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" />

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 variation="vertical" />

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" />

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.

These attributes offer flexibility to developers, allowing them to customize the text’s appearance within the divider or hr component to enhance the user interface. The placement of the text is set with the position attribute of the divider or hr component, which accepts left, middle, or right.

<.divider type="dashed" size="small" color="silver" position="right">
  <:text>Or</:text>
</.divider>

<.divider size="small" color="success" position="left">
  <:text>Or</:text>
</.divider>

<.divider type="dotted" size="small" color="warning" position="middle">
  <:text>Or</:text>
</.divider>

The :icon slot for both the divider and hr components offers several attributes that provide extensive customization options:

• name: The name of the icon to display, such as a Hero icon. This attribute is required.
• 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.

Together, these attributes allow developers to deeply customize the appearance of icons within their dividers or horizontal rules, enhancing the component’s functionality and visual appeal. The placement of the icon is set with the position attribute of the divider or hr component, which accepts left, middle, or right.

<.divider type="dashed" size="small" color="danger" position="right">
  <:icon name="hero-circle-stack" />
</.divider>

<.divider size="small" color="misc" position="left">
  <:icon name="hero-star" />
</.divider>

<.divider type="dotted" size="small" color="dawn" position="middle">
  <:icon name="hero-beaker" />
</.divider>