PaackEng / paack-ui / UI.Tile

Use this when you want Radios with icons.

Tile.group Msg.SetTile
    "Pick a delivery vehicle"
    |> Tile.withSelected model.selected
    |> Tile.withButtons
        [ Tile.tile TileModel.Car <| Icon.car "Car"
        , Tile.tile TileModel.Van <| Icon.van "Van"
        , Tile.tile TileModel.Truck <| Icon.truck "Truck"
        , Tile.tile TileModel.Motorbike <| Icon.bike "Motorbike"
        , Tile.tile TileModel.Bicycle <| Icon.bicycle "Bicycle"
        , Tile.tile TileModel.ECar <| Icon.eCar "E-Car"
        , Tile.tile TileModel.EVan <| Icon.eVan "E-Van"
        , Tile.tile TileModel.EBike <| Icon.eBike "E-Bike"
        ]
    |> Tile.renderElement renderConfig

Types


type SelectionTiles option msg

The SelectionTiles option msg type is used for describing the component for later rendering.


type SelectionTile option

The SelectionTile option describes an individual selection tile.

Constructors

tile : option -> UI.Icon.Icon -> SelectionTile option

A selection tile and an element of a selection tiles group.

Tile.tile Model.OrangeJuice <| Icon.orangeJuice "Orange Juice"

group : (option -> msg) -> String -> SelectionTiles option msg

Starts an empty selection tile group. The first argument is the message triggered when there is a selection. The second one is the label used for accessibility (ARIA).

someTileGroup =
    Tile.group Msg.CardPicking "Pick a card"

Group management

withTiles : List (SelectionTile option) -> SelectionTiles option msg -> SelectionTiles option msg

Replaces a group's list of selection tiles.

Tile.withTiles
    [ Tile.tile Model.OrangeJuice <| Icon.orangeJuice "Orange Juice"
    , Tile.tile Model.Lemonade <| Icon.lemonade "Lemonade"
    , Tile.tile Model.SodaSoftDrink <| Icon.sodaSoftDrink "Soda"
    ]
    someTileGroup

withSelected : Maybe option -> SelectionTiles option msg -> SelectionTiles option msg

Define one element as selected.

Tile.withSelected (Just Model.DoubleCheddar)

withMultipleSelected : List option -> SelectionTiles option msg -> SelectionTiles option msg

Define multiple elements as selected.

Tile.withMultipleSelected [ Model.DoubleCheddar, Model.XSalad ]

withExplicitStateMsg : SelectionTiles option (Basics.Bool -> msg) -> SelectionTiles option msg

Receive in the message the correct new state of the tile.

Tile.group
    (\which newBooleanState -> SetSomeTile which newBooleanState)
    "SomeGroup"
    |> Tile.withExplicitStateMsg

Rendering

renderElement : UI.RenderConfig.RenderConfig -> SelectionTiles option msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.