PF6.DualListSelector

PF6 DualListSelector component

Two-panel component for moving items between an "available" list and a "chosen" list. The consumer manages the item lists and filtering; clicking an item in the available panel calls withOnAdd, clicking in chosen calls withOnRemove.

See: https://www.patternfly.org/components/dual-list-selector

Definition

type DualListSelector msg

Opaque DualListSelector type

type alias Item =

{ id : String

, label : String

}

A selectable item with a unique id and display label

Constructor

dualListSelector : DualListSelector msg

Construct an empty DualListSelector

Item modifiers

withAvailableItems : List Item -> DualListSelector msg -> DualListSelector msg

Set the list of available (left panel) items

withChosenItems : List Item -> DualListSelector msg -> DualListSelector msg

Set the list of chosen (right panel) items

Label modifiers

withAvailableTitle : String -> DualListSelector msg -> DualListSelector msg

Set the label for the available (left) panel

withChosenTitle : String -> DualListSelector msg -> DualListSelector msg

Set the label for the chosen (right) panel

Event modifiers

withOnAdd : (String -> msg) -> DualListSelector msg -> DualListSelector msg

Set the message sent with item id when an available item is clicked (adds it)

withOnRemove : (String -> msg) -> DualListSelector msg -> DualListSelector msg

Set the message sent with item id when a chosen item is clicked (removes it)

withOnAddAll : msg -> DualListSelector msg -> DualListSelector msg

Set the message sent when "Add all" is clicked

withOnRemoveAll : msg -> DualListSelector msg -> DualListSelector msg

Set the message sent when "Remove all" is clicked

Filter modifiers

withFilterText : String -> DualListSelector msg -> DualListSelector msg

Filter text applied to item labels in both panels

Rendering

toMarkup : Theme -> DualListSelector msg -> Element msg

Render the DualListSelector as an Element msg

lenards/elm-ui-patternfly/4.0.2