PF6.Toast

PF6 Toast component

Toasts display brief, auto-dismissing alerts. Use Element.inFront on a parent container to position a stack of toasts. Dismissal timing is handled by the consumer via subscriptions (e.g. Process.sleep + a DismissToast id message).

See: https://www.patternfly.org/components/toast

Definition

type Toast msg

Opaque Toast type

type Variant

Toast severity variants

Constructor

toast : String -> Toast msg

Construct a Toast with the given body text

Variant modifiers

withSuccess : Toast msg -> Toast msg

Success variant (green)

withDanger : Toast msg -> Toast msg

Danger variant (red)

withWarning : Toast msg -> Toast msg

Warning variant (yellow)

withInfo : Toast msg -> Toast msg

Info variant (purple)

Content modifiers

withTitle : String -> Toast msg -> Toast msg

Set the toast title

Action modifiers

withCloseMsg : msg -> Toast msg -> Toast msg

Add a close button that sends msg on click

Rendering

toMarkup : Theme -> Toast msg -> Element msg

Render the Toast as an Element msg.

Position using Element.inFront on a parent layout. Stack multiple toasts in a column with spacing:

Element.layout
    [ Element.inFront
        (Element.column
            [ Element.alignRight
            , Element.alignTop
            , Element.padding 16
            , Element.spacing 8
            ]
            (List.map (Toast.toMarkup theme) model.toasts)
        )
    ]
    mainContent

lenards/elm-ui-patternfly/4.0.0