PF6.Flex

PF6 Flex layout

Flexible layout with configurable direction, alignment, justification, wrapping, and gap.

See: https://www.patternfly.org/layouts/flex

Definition

type Flex msg

Opaque Flex type

type FlexItem msg

Opaque FlexItem type

Constructors

flex : List (FlexItem msg) -> Flex msg

Construct a Flex layout with a list of FlexItems

flexItem : Element msg -> FlexItem msg

Construct a FlexItem wrapping content

Direction

withColumn : Flex msg -> Flex msg

Set direction to column (vertical)

withRow : Flex msg -> Flex msg

Set direction to row (horizontal, default)

withRowReverse : Flex msg -> Flex msg

Set direction to row-reverse

withColumnReverse : Flex msg -> Flex msg

Set direction to column-reverse

Wrapping

withWrap : Flex msg -> Flex msg

Enable wrapping

withNoWrap : Flex msg -> Flex msg

Disable wrapping

Justification

withJustifyStart : Flex msg -> Flex msg

Justify items to start

withJustifyCenter : Flex msg -> Flex msg

Justify items to center

withJustifyEnd : Flex msg -> Flex msg

Justify items to end

withJustifySpaceBetween : Flex msg -> Flex msg

Justify items with space between

Alignment

withAlignStart : Flex msg -> Flex msg

Align items to start

withAlignCenter : Flex msg -> Flex msg

Align items to center

withAlignEnd : Flex msg -> Flex msg

Align items to end

withAlignStretch : Flex msg -> Flex msg

Stretch items to fill cross axis

Gap

withGap : Int -> Flex msg -> Flex msg

Set custom gap in pixels

withGapSm : Flex msg -> Flex msg

Set small gap

withGapMd : Flex msg -> Flex msg

Set medium gap

withGapLg : Flex msg -> Flex msg

Set large gap

withGapXl : Flex msg -> Flex msg

Set extra-large gap

Item modifiers

withGrow : FlexItem msg -> FlexItem msg

Make item grow to fill available space

withShrink : FlexItem msg -> FlexItem msg

Make item shrink

withFlex1 : FlexItem msg -> FlexItem msg

Set item to flex: 1 (grow and shrink equally)

Rendering

toMarkup : Flex msg -> Element msg

Render the Flex layout as an Element msg

lenards/elm-ui-patternfly/3.0.0