PolarisBox
Box is the most primitive layout component. It’s a way to access Polaris design tokens.
Alpha
This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about ourcomponent lifecycles.
Background color of box and text color inside a box can be adjusted using theColor tokens.
importReactfrom'react';import{Box,Text}from'@shopify/polaris';functionBoxWithColorExample(){return(<Boxbackground="bg-app-selected"><Placeholderlabel="Content inside a box"/></Box>);}constPlaceholder=({label='',height='auto',width='auto'})=>{return(<divstyle={{background:'var(--p-color-border-interactive-subdued)',height:height,width:width,borderRadius:'inherit',}}><divstyle={{color:'var(--p-color-text)',}}><Textas="p"variant="bodyMd">{label}</Text></div></div>);};Props
Want to help make this feature better? Pleaseshare your feedback.
- children? React.ReactNode
- as? “div”|'span'|'section'|'legend'|'ul'|'li'
-
HTML Element type.
默认为“div”.
- background? ColorBackgroundAlias
-
Background color.
- borderColor? ColorBorderAlias|"transparent"
-
Border color.
- borderStyle? 'solid'|'dashed'
-
Border style.
- borderRadius? BorderRadiusScale
-
Border radius.
- borderRadiusEndStart? BorderRadiusScale
-
Vertical end horizontal start border radius.
- borderRadiusEndEnd? BorderRadiusScale
-
Vertical end horizontal end border radius.
- borderRadiusStartStart? BorderRadiusScale
-
Vertical start horizontal start border radius.
- borderRadiusStartEnd? BorderRadiusScale
-
Vertical start horizontal end border radius.
- borderWidth? BorderWidthScale
-
Border width.
- borderBlockStartWidth? BorderWidthScale
-
Vertical start border width.
- borderBlockEndWidth? BorderWidthScale
-
Vertical end border width.
- borderInlineStartWidth? BorderWidthScale
-
水平开始边框宽度。OB欧宝娱乐APP
- borderInlineEndWidth? BorderWidthScale
-
Horizontal end border width.
- color? ColorTextAlias
-
Color of children.
- id? string
-
HTML id attribute.
- minHeight? string
-
Minimum height of container.
- minWidth? string
-
Minimum width of container.
- maxWidth? string
-
Maximum width of container.
- overflowX? “隐藏”|'scroll'
-
Clip horizontal content of children.
- overflowY? “隐藏”|'scroll'
-
Clip vertical content of children.
- padding? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- paddingBlockStart? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- paddingBlockEnd? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Vertical end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- paddingInlineStart? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- paddingInlineEnd? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Horizontal end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- role? any
-
Aria role.
- shadow? ShadowAlias
-
Shadow on box.
- tabIndex? any
-
Set tab order.
- width? string
-
Width of container.
- position? 'relative'|'absolute'|'fixed'|'sticky'
-
Position of box.
- insetBlockStart? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Top position of box.
- insetBlockEnd? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Bottom position of box.
- insetInlineStart? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Left position of box.
- insetInlineEnd? T| { [BreakpointinBreakpointsAlias]?:T; }<SpaceScale>
-
Right position of box.
- opacity? string
-
Opacity of box.
- outlineColor? ColorBorderAlias
-
Outline color.
- outlineStyle? 'solid'|'dashed'
-
Outline style.
- outlineWidth? BorderWidthScale
-
Outline width.
- printHidden? boolean
-
Visually hide the contents during print.
- visuallyHidden? boolean
-
Visually hide the contents (still announced by screenreader).
- zIndex? string
-
z-index of box.
Related components
- For more specific use cases,use the Card component
Related resources
- Box props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more aboutCSS logicial properties.