supermacro / elm-antd / Ant.Divider

Divider component

Divider

A divider represents a visual line that separates content either horizontally or vertically.

Demo


type Divider

A customizeable divider that is used to separate pieces of content.

Customizing the Divider

divider : Divider

Create a Divider component.

Divider.divider
    |> Divider.toHtml


type Line
    = Dashed
    | Solid

The visual look of the divider

withLine : Line -> Divider -> Divider

Defines the line type of the divider.

withType : Type -> Divider -> Divider

Change the type of the divider. By default the type is Horizontal

verticalDivider =
    Divider.divider
        |> withType Vertical
        |> toHtml


type Orientation
    = Left
    | Right
    | Center

Orientation defines the positioning of the divider label.

withOrientation : Orientation -> Divider -> Divider

Defines the positioning of the label. If your divider doesn't have a label, then this option is redundant.


type Type
    = Horizontal
    | Vertical

Whether the divider is separating content vertically or horizontally.


type TextStyle
    = Plain
    | Heading

Defines the size and emphasis of the divider label.

withTextStyle : TextStyle -> Divider -> Divider

Defines whether the divider titles will get rendered as Headings or as smaller text.

withLabel : String -> Divider -> Divider

The label of the divider.

toHtml : Divider -> Html msg

Convert a Divider into Html