Box 盒子

使用场景

跨端原子组件，支持所有 Style Props，支持快捷消费 Design Tokens。

示例

基本示例

Hello World

inline

() => ( <Box display="inline-block" bg="emphasis.100" color="emphasis.0" p="l" borderRadius="m"> Hello World </Box> )

() => (
  <Box display="inline-block" bg="emphasis.100" color="emphasis.0" p="l" borderRadius="m">
    Hello World
  </Box>
)

边框盒子

除了使用 Design Tokens，也可以直接使用 CSS value。

border box

border box

inline

() => ( <Box> <Box border="solid" borderColor="line.border" borderWidth={2}> border box </Box> <Box mt="l" border="4px solid #FF0000"> border box </Box> </Box> )

() => (
  <Box>
    <Box border="solid" borderColor="line.border" borderWidth={2}>
      border box
    </Box>

    <Box mt="l" border="4px solid #FF0000">
      border box
    </Box>
  </Box>
)

改变渲染元素

通过 as 属性改变渲染的目标 HTML 元素。

inline

() => ( <Box as="button" borderRadius="m" bg="brand.normal" color="white"> hello </Box> )

() => (
  <Box as="button" borderRadius="m" bg="brand.normal" color="white">
    hello
  </Box>
)

API

字段	描述
as	any
style	CSSProperties
className	string
m	StringOrNumber
margin	StringOrNumber
mt	StringOrNumber
marginTop	StringOrNumber
mr	StringOrNumber
marginRight	StringOrNumber
mb	StringOrNumber
marginBottom	StringOrNumber
ml	StringOrNumber
marginLeft	StringOrNumber
mx	StringOrNumber
marginX	StringOrNumber
my	StringOrNumber
marginY	StringOrNumber
p	StringOrNumber
padding	StringOrNumber
pt	StringOrNumber
paddingTop	StringOrNumber
pr	StringOrNumber
paddingRight	StringOrNumber
pb	StringOrNumber
paddingBottom	StringOrNumber
pl	StringOrNumber
paddingLeft	StringOrNumber
px	StringOrNumber
paddingX	StringOrNumber
py	StringOrNumber
paddingY	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity
width	StringOrNumber
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	StringOrNumber
size	StringOrNumber
display	Display
verticalAlign	VerticalAlign<0 | (string & {})>
overflow	Overflow
overflowX	OverflowX
overflowY	OverflowY
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
alignItems	AlignItems
alignContent	AlignContent
justifyItems	JustifyItems
justifyContent	JustifyContent
flexWrap	FlexWrap
flexDirection	FlexDirection
flex	Flex<Length>
flexGrow	FlexGrow
flexShrink	FlexShrink
flexBasis	FlexBasis<Length>
justifySelf	JustifySelf
alignSelf	AlignSelf
order	Order
gridGap	GridGap<Length>
gridRowGap	GridRowGap<Length>
gridColumnGap	GridColumnGap<Length>
gridColumn	GridColumn
gridColumnStart	GridColumnStart
gridColumnEnd	GridColumnEnd
gridRow	GridRow
gridRowStart	GridRowStart
gridRowEnd	GridRowEnd
gridArea	GridArea
gridTemplateRows	GridTemplateRows<0 | (string & {})>
gridTemplateColumns	GridTemplateColumns<0 | (string & {})>
gridTemplateAreas	GridTemplateAreas
border	string
borderTop	string
borderRight	string
borderBottom	string
borderLeft	string
borderWidth	StringOrNumber
borderColor	Color
borderTopColor	Color
borderRightColor	Color
borderBottomColor	Color
borderLeftColor	Color
borderRadius	string
position	Position
zIndex	ZIndex
top	string
right	string
bottom	string
left	string
boxShadow	BoxShadow
textShadow	TextShadow