Represent the display types an element can have.
Inline -
Displays an element as an inline element (like ).
Block -
Displays an element as a block element (like
).
Flex -
Displays an element as an block-level flex container.
InlineBlock -
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box
InlineFlex -
Displays an element as an inline-level flex container.
InlineTable -
The element is displayed as an inline-level table.
ListItem -
Let the element behave like a
element.
RunIn -
Displays an element as either block or inline, depending on context.
Table -
Let the element behave like a
element.
TableCaption -
Let the element behave like a
element.
TableColumnGroup -
Let the element behave like a
element.
TableHeaderGroup -
Let the element behave like a element.
TableFooterGroup -
Let the element behave like a
element.
TableRowGroup -
Let the element behave like a
element.
TableCell -
Let the element behave like a
element.
TableColumn -
Let the element behave like a element.
TableRow -
Let the element behave like a | element.
None -
The element will not be displayed at all (has no effect on layout).
#String
string : Display -> String
Convert a display type to string form so it works with css.
import Css.Display as Display
Display.string Display.Inline -- "inline"
#Function
display : Display -> Styles -> Styles
Sets the display type of an element
import Css.Display as Display exposing (display)
-- [ ("display", "flex") ]
display Display.Flex []
module Css.Display where
{-| Set how an element is displayed, and whether it is hidden or visible.
#Definition
@docs Display
#String
@docs string
#Function
@docs display
-}
-- Third Party Imports
import Vendor
-- My Imports
import Css exposing (Styles, style)
{-| Represent the display types an element can have.
Inline -
Displays an element as an inline element (like <span>).
Block -
Displays an element as a block element (like <p>).
Flex -
Displays an element as an block-level flex container.
InlineBlock -
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box
InlineFlex -
Displays an element as an inline-level flex container.
InlineTable -
The element is displayed as an inline-level table.
ListItem -
Let the element behave like a <li> element.
RunIn -
Displays an element as either block or inline, depending on context.
Table -
Let the element behave like a <table> element.
TableCaption -
Let the element behave like a <caption> element.
TableColumnGroup -
Let the element behave like a <colgroup> element.
TableHeaderGroup -
Let the element behave like a <thead> element.
TableFooterGroup -
Let the element behave like a <tfoot> element.
TableRowGroup -
Let the element behave like a <tbody> element.
TableCell -
Let the element behave like a <td> element.
TableColumn -
Let the element behave like a <col> element.
TableRow -
Let the element behave like a <tr> element.
None -
The element will not be displayed at all (has no effect on layout).
-}
type Display
= Inline
| Block
| Flex
| InlineBlock
| InlineFlex
| InlineTable
| ListItem
| RunIn
| Table
| TableCaption
| TableColumnGroup
| TableHeaderGroup
| TableFooterGroup
| TableRowGroup
| TableCell
| TableColumn
| TableRow
| None
{-| Convert a display type to string form so it works with css.
import Css.Display as Display
Display.string Display.Inline -- "inline"
-}
string : Display -> String
string display =
case display of
Inline ->
"inline"
Block ->
"block"
Flex ->
"flex"
InlineBlock ->
"inline-block"
InlineFlex ->
"inline-flex"
InlineTable ->
"inline-table"
ListItem ->
"list-item"
RunIn ->
"run-in"
Table ->
"table"
TableCaption ->
"table-caption"
TableColumnGroup ->
"table-column-group"
TableHeaderGroup ->
"table-header-group"
TableFooterGroup ->
"table-footer-group"
TableRowGroup ->
"table-row-group"
TableCell ->
"table-cell"
TableColumn ->
"table-column"
TableRow ->
"table-row"
None ->
"none"
{-| Sets the display type of an element
import Css.Display as Display exposing (display)
-- [ ("display", "flex") ]
display Display.Flex []
-}
display : Display -> Styles -> Styles
display d styles =
let prefix = Vendor.prefix
in
case d of
Flex ->
if prefix == Vendor.Webkit
then style "display" "-webkit-flex" styles
else if prefix == Vendor.MS
then style "display" "-ms-flexbox" styles
else style "display" "flex" styles
InlineFlex ->
if prefix == Vendor.Webkit
then style "display" "-webkit-inline-flex" styles
else if prefix == Vendor.MS
then style "display" "-ms-infline-flexbox" styles
else style "display" "flex" styles
_ ->
style "display" (string d) styles