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
Opaque Navigation
element that can produce msg
messages
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
selectItem : String -> Navigation msg -> Navigation msg
Selects an item by itemName
For duplicates, the handling of selection would be predictable given the underlying representation.
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
withHorizontalVariant : Navigation msg -> Navigation msg
Configures the orientation for rendering to be horizontal
withTerinaryVariant : Navigation msg -> Navigation msg
Configures the orientation for rendering
toMarkup : Navigation msg -> Element msg
Given the custom type representation, renders as an Element msg
.