UiCards

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.

Defining cards and decks

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 ]

Displaying the cards

show :

AppUpdate msg model

-> List (Deck msg model)

-> 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" ...]
        ]

Modules

UiCards

alexkorban/uicards/1.0.2

UiCards

Defining cards and decks

Displaying the cards

Modules