Divider

New version v0.0.1 🚀

Phoenix LiveView divider component supporting customizable horizontal and vertical dividers, with options for icons and text directly on the line.

Installation:

mix mishka.ui.gen.component divider

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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 white, primary, secondary, dark, success, warning, danger, info, light, 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="secondary" />
<.divider color="success" />
<.divider color="danger" />
<.divider color="info" />
<.divider color="light" />
<.divider color="dark" />
<.divider color="misc" />
<.divider color="dawn" />
<.divider color="silver" />
<.divider color="white" />

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="white" 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.

These attributes offer flexibility to developers, allowing them to customize the text’s appearance and placement within the divider or hr component to enhance the user interface.

<.divider type="dashed" size="small" color="light">
  <: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.

Together, these attributes allow developers to deeply customize the appearance and positioning of icons within their dividers or horizontal rules, enhancing the component’s functionality and visual appeal.

<.divider type="dashed" size="small" color="light">
  <: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>

Divider component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
type	string	No	Determines the type of the divider: dashed, dotted, or solid. Default: solid.
color	string	No	Determines the color theme of the divider. Supported values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn, silver. Default: silver.
size	string	No	Determines the overall size of the divider. Default: extra_small.
width	string	No	Determines the element width. Default: full.
height	string	No	Determines the element height. Default: auto.
margin	string	No	Determines the element margin. Default: none.
variation	string	No	Defines the layout orientation of the component: horizontal or vertical. Default: horizontal.
class	string	No	Custom CSS class for additional styling.
text	slot	No	The text slot supports adding text inside the divider. It accepts the following properties: - class: Custom CSS class for additional styling of the text slot. - color: Determines the color theme of the text slot. - size: Determines the size of the text slot. - position: Determines the position of the text slot.
icon	slot	No	The icon slot supports adding icons inside the divider. It accepts the following properties: - name: Specifies the name of the icon (required). - class: Custom CSS class for additional styling of the icon. - icon_class: Determines the custom class for the icon. - color: Determines the color theme of the icon slot. - size: Determines the size of the icon slot. - position: Determines the position of the icon slot.

hr Divider component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
type	string	No	Specifies the type of the element. Supported values: dashed, dotted, solid. Default: solid.
color	string	No	Determines the color theme of the element. Supported values include: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn, silver. Default: silver.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Default: extra_small.
width	string	No	Determines the element width. Default: full.
margin	string	No	Determines the element margin. Default: none.
text	slot	No	The text slot allows adding text inside the divider. It accepts the following properties: - class: Custom CSS class for additional styling. - color: Determines the color theme of the text slot. - size: Determines the size of the text. - position: Determines the position of the text slot within the divider.
icon	slot	No	The icon slot allows adding icons inside the divider. It accepts the following properties: - name: Specifies the name of the icon (required). - class: Custom CSS class for additional styling. - icon_class: Determines the custom class for the icon. - color: Determines the color theme of the icon. - size: Determines the size of the icon.
class	string	No	Custom CSS class for additional styling.

Divider CLI Arguments

Name	Type	Options	Recommended?
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn - silver	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--type`	string	divider - hr	Yes
`--only`	string	divider - hr	Yes
`--module`	string	Something	NO