import Css exposing (..)
import Html.Grid as Grid
import Html.Styled
view : Html.Styled.Html msg
view =
Grid.box
[ width (pct 100) ]
[ Grid.row
[]
[ Grid.col
[]
[ Html.text "Hello from upper left corner" ]
, Grid.col
[]
[ Html.text "Hello from upper right corner" ]
]
, Grid.row
[]
[ Grid.col
[]
[ Html.text "Hello from lower left corner" ]
, Grid.col
[]
[ Html.text "Hello from lower right corner" ]
]
]
row : List Css.Style -> List (Col msg) -> Html.Styled.Html msg
A row in a grid. Sequential rows will stack vertically. A row takes a List (Col msg)
, NOT List (Html msg)
. Col msg
inside the row
are arranged horizontally.
-- rows are styled with the css:
-- display: flex;
-- flex-direction: row;
{ styles : List Css.Style
, attrs : List (Html.Styled.Attribute msg)
, body : ColBody msg
}
A Column, a horizontally positioned unit inside a row
col : List Css.Style -> List (Html.Styled.Html msg) -> Col msg
A column in a row. Give col
some html and it positions that html horizontally inside a row
. You can also style it, overriding its default styles.
-- columns are styled with the css:
-- flex-basis: 100%;
-- flex: 1;
-- display: flex;
mapCol : (a -> b) -> Col a -> Col b
Just like Html.map
, except for Col
colWithAttrs : List (Html.Styled.Attribute msg) -> Col msg -> Col msg
Add some Html.Attribute msg
s to a Col msg
. Mainly useful for adding event handlers like click events.
colShrink : Css.Style
Col
s naturally fill up horizontal space. Adding colShrink
to a column will make it do the opposite, and shrink by default.
Grid.row
[]
[ Grid.col
[]
[ searchField model.searchFieldModel ]
, Grid.col
[ Grid.colShrink ]
[ searchButton "Search" SearchClicked ]
]
-- Will render something like..
-- [ --------- <Search field> --------- ] [ Search ]
-- | Column | Column |
-- | ---------------------- Row -------------------|
exactWidthCol : Css.LengthOrAuto compatible -> Css.Style
Column
s naturally fill up horizontal space. but if instead you want it to have a specific width, use this
Grid.row
[]
[ Grid.col
-- This col takes up exactly 50% of the rows width
[ Grid.exactWidthCol (pct 50) ]
[]
, Grid.col
-- This column takes whatever free horizontal space is available
[]
[]
, Grid.col
-- This col is exactly 100 pixels wide
[ Grid.exactWidthCol (px 100) ]
[]
]
box : List Css.Style -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
I find that when I write html, many html elements are just containers for other things. Containers either dont get any attributes at all, or just some styling attributes to position them or their content. This is just a helper for those simple containers. A box
is supposed to be simple, invisible, and not interactive. It only takes a List Style
instead of a List (Attribute msg)
.
Grid.box
[ Css.width (pct 100) ]
[ Grid.row [] [ Grid.col [] [] ]
, Grid.row [] [ Grid.col [] [] ]
]
keyedRow : List Css.Style -> List ( String, Col msg ) -> Html.Styled.Html msg
The same as a regular row
, but with keyed columns ( (See Html.Styled.Keyed for more info)[https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Keyed] )
keyedCol : List Css.Style -> List ( String, Html.Styled.Html msg ) -> Col msg
The same as a regular col
, but with keyed content ( (See Html.Styled.Keyed for more info)[https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Keyed] )