PaackEng/paack-ui/3.0.0

NOTE: the latest version is 7.23.0

UI.Layout.SplitSelectable

The UI.Layout.SplitSelectable provide helpers to render a view for displaying a list of items where selecting any particular item opens a detailed view of it. You will have to generate a Nav.Content through mobile or desktop helper depending upon the target device, which later a page can provide through Nav.Container to show on screens.

Example of usage:

splitSelectableContent : RenderConfig -> Config -> Nav.Content
splitSelectableContent renderConfig layoutConfig =
    desktop renderConfig layoutConfig

later on, splitSelectableContent can be used to populate the content field inside the Container record to render it.

Types

type alias Config object msg =
{ getKey : object -> String
, items : List object
, listView : ListView object msg
, selected : Maybe String
, selectedView : Element msg
}

The Config object msg is used to construct a record which later can be fed to mobile or desktop helper to construct a SplitSelectable view.

type alias MobileConfig msg =
{ action : Maybe (WithIcon msg)
, title : ( String, Maybe String )
, unselectMsg : msg
}

The MobileConfig msg is used to construct a record having mobile specific parts of the data items needed to build a SplitSelectable view.

Building

mobile : RenderConfig -> MobileConfig msg -> Config object msg -> Content msg

mobile helper constructs SplitSelectable layout for rendering on mobile

desktop : RenderConfig -> Config object msg -> Content msg

desktop helper constructs SplitSelectable layout for rendering on desktop