Divider

Overview

The <aura:divider> component is a simple yet versatile tool for creating visual separation between sections of content. It can be oriented horizontally or vertically and supports optional text for labeling sections. Designed to adapt to its container, it’s particularly useful in layouts like flex containers, where it automatically adjusts its size and spacing.

Attributes

The divider supports the following attribute:

• orientation (String)
  Defines the direction of the divider.
  • Valid values: horizontal (default), vertical
  • If omitted, defaults to horizontal.

Usage Examples

Basic Usage

A simple horizontal divider with no additional configuration.

Note: All three variations above produce the same horizontal line, with horizontal being the default orientation.

Vertical Divider

A vertical divider used to separate two buttons within a flex container.

Context: The divider adjusts its height to fit the flex container, providing a clean separation between the buttons.

Divider with Text

A horizontal divider with embedded text for labeling or context.

Note: Both syntaxes are equivalent; the text can be passed as an attribute or as slot content, depending on your preference.

Adaptive Styling in Flex Containers

Demonstrates how the divider adapts its height and spacing within a flex container.

Explanation: In a flex container, the vertical dividers stretch to match the container’s height (e.g., h-20) and distribute evenly with justify-evenly, making them ideal for dynamic layouts.

Style Considerations

• Flex Integration: When placed inside a flex container, the divider automatically adjusts its dimensions (e.g., height for vertical, width for horizontal) to match the container’s size, ensuring seamless integration without manual styling.
• Spacing: The divider respects surrounding layout properties like gap in flex contexts, eliminating the need for additional margins or padding in most cases.
• Text Styling: When using the text attribute or slot content, the divider centers the text along the line, with the line breaking around it for a polished look.

Notes

• The default orientation is horizontal unless explicitly set to vertical.
• Use the text attribute or slot content to add labels, making the divider more informative (e.g., separating form sections or content blocks).

This updated documentation provides a clearer, more detailed guide to the <aura:divider> component, with practical examples and styling insights. Let me know if you’d like further refinements!