Quickly and responsively toggle the display value of components and more with these display utilities.
You may combine hiding and display functions to control when an element is displayed accross breakposints.
** To hide only for xs:**
div [ Display.none, Display.blockSm ] [ text "Can't see me in XS" ]
** To show only for sm:**
div [ Display.none, Display.blockSm, Display.noneMd ] [ text "Only see me in MD" ]
none : Html.Attribute msg
Hide element.
noneSm : Html.Attribute msg
Hidden from SM breakpoint and up.
noneMd : Html.Attribute msg
Hidden from MD breakpoint and up.
noneLg : Html.Attribute msg
Hidden from LG breakpoint and up.
noneXl : Html.Attribute msg
Hidden from XL breakpoint and up.
block : Html.Attribute msg
Display as block element.
blockSm : Html.Attribute msg
Display as block element from SM breakpoint and up.
blockMd : Html.Attribute msg
Display as block element from MD breakpoint and up.
blockLg : Html.Attribute msg
Display as block element from LG breakpoint and up.
blockXl : Html.Attribute msg
Display as block element from XL breakpoint and up.
inline : Html.Attribute msg
Display as inline element.
inlineSm : Html.Attribute msg
Display as inline element from SM breakpoint and up.
inlineMd : Html.Attribute msg
Display as inline element from MD breakpoint and up.
inlineLg : Html.Attribute msg
Display as inline element from LG breakpoint and up.
inlineXl : Html.Attribute msg
Display as inline element from XL breakpoint and up.
inlineBlock : Html.Attribute msg
Display as inline block element.
inlineBlockSm : Html.Attribute msg
Display as inline block element from SM breakpoint and up.
inlineBlockMd : Html.Attribute msg
Display as inline block element from MD breakpoint and up.
inlineBlockLg : Html.Attribute msg
Display as inline block element from LG breakpoint and up.
inlineBlockXl : Html.Attribute msg
Display as inline block element from XL breakpoint and up.
table : Html.Attribute msg
Display as table element.
tableSm : Html.Attribute msg
Display as table element from SM breakpoint and up.
tableMd : Html.Attribute msg
Display as table element from MD breakpoint and up.
tableLg : Html.Attribute msg
Display as table element from LG breakpoint and up.
tableXl : Html.Attribute msg
Display as table element from XL breakpoint and up.
tableCell : Html.Attribute msg
Display as table cell element.
tableCellSm : Html.Attribute msg
Display as table cell element from SM breakpoint and up.
tableCellMd : Html.Attribute msg
Display as table cell element from MD breakpoint and up.
tableCellLg : Html.Attribute msg
Display as table cell element from LG breakpoint and up.
tableCellXl : Html.Attribute msg
Display as table cell element from XL breakpoint and up.
tableRow : Html.Attribute msg
Display as table row element.
tableRowSm : Html.Attribute msg
Display as table row element from SM breakpoint and up.
tableRowMd : Html.Attribute msg
Display as table row element from MD breakpoint and up.
tableRowLg : Html.Attribute msg
Display as table row element from LG breakpoint and up.
tableRowXl : Html.Attribute msg
Display as table row element from XL breakpoint and up.