Package org.patternfly.component.divider


package org.patternfly.component.divider
Provides the PatternFly divider component for visually separating content with a horizontal or vertical line.

A divider is a horizontal or vertical line that is placed between content to create visual separation. Dividers can be rendered as <hr>, <li>, or <div> elements depending on the context. The divider supports insets and orientation switching at various breakpoints.

Usage

A simple horizontal divider using an <hr> element:
import static org.patternfly.component.divider.Divider.divider;
import static org.patternfly.component.divider.DividerType.hr;

divider(hr);
A vertical divider in a flex layout:
import static org.patternfly.component.divider.Divider.divider;
import static org.patternfly.component.divider.DividerType.hr;
import static org.patternfly.layout.flex.Flex.flex;
import static org.patternfly.layout.flex.FlexItem.flexItem;
import static org.patternfly.style.Breakpoint.default_;
import static org.patternfly.style.Breakpoints.breakpoints;
import static org.patternfly.style.Orientation.vertical;

flex()
        .addItem(flexItem().text("First item"))
        .add(divider(hr).orientation(breakpoints(default_, vertical)))
        .addItem(flexItem().text("Second item"));
See Also:
  • Class
    Description
    A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.