Functions for creating flexible box layouts.
Specifies the wrapping of the items in a container.
Specifies the alignment of the lines of items in a container along the cross axis.
Specifies the alignment of the items in a container along the cross axis.
Specifies the alignment of the items in a container along the main axis.
Specifies the wrapping of the items in a container.
Specifies the size of an item before remaining space is distributed.
Specifies the alignment of an item in a container along the cross axis.
Shorthand for the combination of grow
, shrink
, and basis
.
Specifies the proportion of total space an item in a container should initially occupy.
Specifies the proportion of available space an item in a container should grow into.
Specifies the proportion of missing space an item in a container should shrink into.
Specifies the relative order an item in a container should appear in.
Returns a div
node which is styled as a flexible box with a column layout.
Returns a div
node which is styled as a flexible box with a reverse column layout.
Returns a div
node which is styled as a flexible box with a row layout.
Returns a div
node which is styled as a flexible box with a reverse row layout.
module Layout.Flex exposing
( Wrap(..)
, Basis(..)
, alignContent
, alignItems
, justifyContent
, wrap
, alignSelf
, flex
, basis
, grow
, shrink
, order
, column
, columnReverse
, row
, rowReverse
)
{-| Functions for creating flexible box layouts.
# Options
## Containers
@docs Wrap
@docs alignContent
@docs alignItems
@docs justifyContent
@docs wrap
## Items
@docs Basis
@docs alignSelf
@docs flex
@docs basis
@docs grow
@docs shrink
@docs order
# Nodes
@docs column
@docs columnReverse
@docs row
@docs rowReverse
-}
import Html exposing (..)
import Html.Attributes exposing (..)
import Layout.Common exposing (..)
-- OPTIONS ---------------------------------------
{-| Specifies the wrapping of the items in a container. -}
type Wrap
= Forward
| Reverse
{-| Specifies the size of an item before remaining space is distributed. -}
type Basis
= Auto
| Size String
{-| Specifies the alignment of the lines of items in a container along the cross axis. -}
alignContent : Align -> Rule
alignContent option = case option of
Start -> Just ("align-content", "flex-start")
Center -> Just ("align-content", "center")
End -> Just ("align-content", "flex-end")
Around -> Just ("align-content", "space-evenly")
Between -> Just ("align-content", "space-between")
Stretch -> Nothing
{-| Specifies the alignment of the items in a container along the cross axis. -}
alignItems : Align -> Rule
alignItems option = case option of
Start -> Just ("align-items", "flex-start")
Center -> Just ("align-items", "center")
End -> Just ("align-items", "flex-end")
Around -> Nothing
Between -> Nothing
Stretch -> Just ("align-items", "stretch")
{-| Specifies the alignment of the items in a container along the main axis. -}
justifyContent : Align -> Rule
justifyContent option = case option of
Start -> Just ("justify-content", "flex-start")
Center -> Just ("justify-content", "center")
End -> Just ("justify-content", "flex-end")
Around -> Just ("justify-content", "space-evenly")
Between -> Just ("justify-content", "space-between")
Stretch -> Nothing
{-| Specifies the wrapping of the items in a container. -}
wrap : Maybe Wrap -> Rule
wrap option = case option of
Just Forward -> Just ("flex-wrap", "wrap")
Just Reverse -> Just ("flex-wrap", "wrap-reverse")
Nothing -> Just ("flex-wrap", "nowrap")
{-| Specifies the alignment of an item in a container along the cross axis. -}
alignSelf : Align -> Rule
alignSelf option = case option of
Start -> Just ("align-self", "flex-start")
Center -> Just ("align-self", "center")
End -> Just ("align-self", "flex-end")
Around -> Nothing
Between -> Nothing
Stretch -> Just ("align-self", "stretch")
{-| Shorthand for the combination of `grow`, `shrink`, and `basis`. -}
flex : Int -> Float -> String -> Rule
flex grow shrink basis = Just ("flex", (toString grow) ++ " " ++ (toString shrink) ++ " " ++ basis)
{-| Specifies the proportion of available space an item in a container should grow into. -}
grow : Int -> Rule
grow option = Just ("flex-grow", toString option)
{-| Specifies the proportion of missing space an item in a container should shrink into. -}
shrink : Float -> Rule
shrink option = Just ("flex-shrink", toString option)
{-| Specifies the proportion of total space an item in a container should initially occupy. -}
basis : String -> Rule
basis option = Just ("flex-basis", option)
{-| Specifies the relative order an item in a container should appear in. -}
order : Int -> Rule
order option = Just ("order", toString option)
-- NODES -----------------------------------------
element : String -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
element direction options attributes children =
let styles = ("display", "flex") :: (("flex-direction", direction) :: (List.filterMap identity options))
in div ((style styles) :: attributes) children
{-| Returns a `div` node which is styled as a flexible box with a column layout. -}
column : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
column = element "column"
{-| Returns a `div` node which is styled as a flexible box with a reverse column layout. -}
columnReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
columnReverse = element "column-reverse"
{-| Returns a `div` node which is styled as a flexible box with a row layout. -}
row : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
row = element "row"
{-| Returns a `div` node which is styled as a flexible box with a reverse row layout. -}
rowReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
rowReverse = element "row-reverse"