lenards / elm-ui-patternfly / PF4.Navigation

A stateless component for application navigation

Intended to have its state "driven" by the Elm application using it.

Uses the Element.Region.navigation to indicate semantic intent.

https://www.patternfly.org/v4/components/navigation

Definition


type Navigation msg

Opaque Navigation element that can produce msg messages

Constructor functions

nav : List ( String, msg ) -> Navigation msg

Constructs a Navigation msg given a list of items

You could render a Navigation msg with the following

[ "Badge"
, "Chip"
, "ChipGroup"
, "Icons"
, "Info"
, "Label"
, "Navigation"
, "Title"
, "Tooltip"
]
    |> List.map
        (\item ->
            ( item, NavSelected item )
        )
    |> Navigation.nav

However, you will need want to have the navItems available for application code. It would make more sense to likely render using values that are stored your Model:

model.navItems
    |> List.map
        (\item ->
            ( item, NavSelected item )
        )
    |> Navigation.nav
    |> Navigation.withSelectedItem
        model.selectedNav

Currently, Navigation msg is implemented in a stateless manner, assuming the Elm application will want to drive the transitions from data that is in the model.

navItem : { name : String, onPress : Maybe msg } -> NavItem msg

Constructs a NavItem msg given a name and msg to produce onPress

For a NavItem msg that is disabled or not clickable, you can provide Nothing for onPress.

Note: name is assumed to be unique among all items

Perform State Change

selectItem : String -> Navigation msg -> Navigation msg

Selects an item by itemName

For duplicates, the handling of selection would be predictable given the underlying representation.

Selection functions

withSelectedItem : String -> Navigation msg -> Navigation msg

Configures the selected item to be itemName

withSelectedFirstItem : Navigation msg -> Navigation msg

Configures that navigation to have the first NavItem msg as selected

Configuration functions

withHorizontalVariant : Navigation msg -> Navigation msg

Configures the orientation for rendering to be horizontal

withTerinaryVariant : Navigation msg -> Navigation msg

Configures the orientation for rendering

Rendering stateless element

toMarkup : Navigation msg -> Element msg

Given the custom type representation, renders as an Element msg.