This library allows you to lay out pieces of UI on a single page, and to have these pieces actually work - responding to clicks, typing and so on.
card : String -> model -> (model -> Html msg) -> Card msg model
Define a UI card. As its arguments, the function takes a card title, the initial model
and a function that takes a model and produces an Html
value
card "Menu button" initialMenuModel <|
\model ->
menuButton model
cardError : String -> Html msg
Dispay an error instead of card content. This is a helper function, and you are free
to display any other Html
value when it isn't possible to render the expected content
of the card (eg due to the model changing in a way that doesn't make sense).
cardError "The UI element could not be displayed"
deck : String -> List (Card msg model) -> Deck msg model
Combine multiple cards into a deck. One deck will be displayed at a time, and all defined decks will be listed in a menu for you to choose which one to show. As its arguments, this function takes a deck name followed by a list of cards which comprise the deck.
deck "Menu deck" [ menuButtonsCard, menuPanelCard, submenuCard ]
show : AppUpdate msg model -> List (Deck msg model) -> Platform.Program () (Model msg model) (Msg msg)
Generate a Browser.application
based on the supplied update
function and a list of decks.
main =
show App.update
[ deck "Deck 1" [ card "Card 1-1" ... ]
, deck "Deck 2" [ card "Card 2-1" ...]
]