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
The SelectionTiles option msg
type is used for describing the component for later rendering.
The SelectionTile option
describes an individual selection tile.
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"
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
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.