mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-24 03:00:06 +00:00
37 lines
895 B
Elm
37 lines
895 B
Elm
|
module Demo.Grid where
|
||
|
|
|
||
|
|
import Material.Grid exposing (..)
|
||
|
|
import Html exposing (..)
|
||
|
|
|
||
|
|
|
||
|
|
view : List Html
|
||
|
|
view =
|
||
|
|
[ [1..12]
|
||
|
|
|> List.map (\i -> cell [size All 1] [text "1"])
|
||
|
|
|> grid
|
||
|
|
, [1 .. 3]
|
||
|
|
|> List.map (\i -> cell [size All 4] [text <| "4"])
|
||
|
|
|> grid
|
||
|
|
, [ cell [size All 6] [text "6"]
|
||
|
|
, cell [size All 4] [text "4"]
|
||
|
|
, cell [size All 2] [text "2"]
|
||
|
|
] |> grid
|
||
|
|
, [ cell [size All 6, size Tablet 8] [text "6 (8 tablet)"]
|
||
|
|
, cell [size All 4, size Tablet 6] [text "4 (6 tablet)"]
|
||
|
|
, cell [size All 2, size Phone 4] [text "2 (4 phone)"]
|
||
|
|
] |> grid
|
||
|
|
, Html.node "style" [] [text """
|
||
|
|
.mdl-cell {
|
||
|
|
text-sizing: border-box;
|
||
|
|
background-color: #BDBDBD;
|
||
|
|
height: 200px;
|
||
|
|
padding-left: 8px;
|
||
|
|
padding-top: 4px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.mdl-grid:first-of-type .mdl-cell {
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
"""]
|
||
|
|
]
|