This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Css.Display

Set how an element is displayed, and whether it is hidden or visible.

#Definition

type Display = Inline | Block | Flex | InlineBlock | InlineFlex | InlineTable | ListItem | RunIn | Table | TableCaption | TableColumnGroup | TableHeaderGroup | TableFooterGroup | TableRowGroup | TableCell | TableColumn | TableRow | None

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.

    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.

    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
    
    

    This site powered by Yesod. Source code and bug reports at Github.

    element.

    TableColumnGroup - Let the element behave like a

    element.

    TableColumn - Let the element behave like a