The Box component is a low-level layout primitive for building UI structure.
Themed Box component.
Summary
Functions
Renders a box component.
Functions
Renders a box component.
Examples
<.box>Content inside a box</.box>
<.box as="section" p="4" m="2" width="full" height="32">Section box</.box>Props
as- The element to render. Defaults to "div". Accepts: div, span, aside, main, nav, article, section, header, footer.display- CSS display property. Accepts: none, inline, inline-block, block, contents. Responsive supported.class- Additional CSS classes to add to the element.style- Additional inline styles.rest- Additional HTML attributes.p,pt,pr,pb,pl,px,py- Padding utilities (theme scale). Responsive supported.m,mt,mr,mb,ml,mx,my- Margin utilities (theme scale). Responsive supported.width,min_width,max_width- Width utilities. Responsive supported.height,min_height,max_height- Height utilities. Responsive supported.position- CSS position property. Accepts: static, relative, absolute, fixed, sticky. Responsive supported.inset,top,right,bottom,left- Edge/inset utilities (theme scale). Responsive supported.overflow,overflow_x,overflow_y- CSS overflow properties. Accepts: visible, hidden, clip, scroll, auto. Responsive supported.flex_basis,flex_shrink,flex_grow- Flexbox layout utilities. Responsive supported.grid_area,grid_column,grid_column_start,grid_column_end,grid_row,grid_row_start,grid_row_end- Grid layout utilities. Responsive supported.
Attributes
p(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.px(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.py(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pt(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pr(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pb(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pl(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.width(:any) - Width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_width(:any) - Max width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_width(:any) - Min width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.height(:any) - Height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_height(:any) - Max height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_height(:any) - Min height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.position(:string) - CSS position property. Responsive supported. Must be one of"static","relative","absolute","fixed", or"sticky".inset(:string) - CSS inset property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".top(:string) - CSS top property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".right(:string) - CSS right property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".bottom(:string) - CSS bottom property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".left(:string) - CSS left property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".overflow(:string) - CSS overflow property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_x(:string) - CSS overflow-x property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_y(:string) - CSS overflow-y property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".flex_basis(:string) - CSS flex-basis property. Responsive supported.flex_shrink(:string) - CSS flex-shrink property. Responsive supported. Must be one of"0", or"1".flex_grow(:string) - CSS flex-grow property. Responsive supported. Must be one of"0", or"1".grid_area(:string) - CSS grid-area property. Responsive supported.grid_column(:string) - CSS grid-column property. Responsive supported.grid_column_start(:string) - CSS grid-column-start property. Responsive supported.grid_column_end(:string) - CSS grid-column-end property. Responsive supported.grid_row(:string) - CSS grid-row property. Responsive supported.grid_row_start(:string) - CSS grid-row-start property. Responsive supported.grid_row_end(:string) - CSS grid-row-end property. Responsive supported.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.as(:string) - The element to render. Defaults to"div". Must be one of"div","span","aside","main","nav","article","section","header", or"footer".class(:string) - Additional CSS classes to add to the element. Defaults to"".display(:string) - Defaults to"block". Must be one of"none","inline","inline-block","block", or"contents".style(:string) - Defaults to"".- Global attributes are accepted.
Slots
inner_block