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 renderConfigThe SelectionTile option describes an individual selection tile.
A selection tile and an element of a selection tiles group.
Tile.tile Model.OrangeJuice <| Icon.orangeJuice "Orange Juice"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"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"
]
someTileGroupDefine one element as selected.
Tile.withSelected (Just Model.DoubleCheddar)End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
The
SelectionTiles option msgtype is used for describing the component for later rendering.