Group 组合

使用场景

用来快捷的组合一组元素。

示例

基本用法

普通组合

inline

() => ( <Group> <Button>left</Button> <Button>center</Button> <Button>right</Button> </Group> )

() => (
  <Group>
    <Button>left</Button>
    <Button>center</Button>
    <Button>right</Button>
  </Group>
)

吸附组合

用于将多个组件组合在一起，注意，子元素的圆角和边框必须在子元素的根节点上。

inline

() => ( <Group attached> <Button>left</Button> <Button>center</Button> <Button>right</Button> </Group> )

() => (
  <Group attached>
    <Button>left</Button>
    <Button>center</Button>
    <Button>right</Button>
  </Group>
)

任意组合

任意组合组件

inline

() => ( <Group attached> <Input /> <Button>search</Button> </Group> )

() => (
  <Group attached>
    <Input />
    <Button>search</Button>
  </Group>
)

API

字段	描述
attached	boolean 是否吸附在一起
spacingX	StringOrNumber 水平间距
spacingY	StringOrNumber 垂直间距
size	StringOrNumber
p	StringOrNumber
style	CSSProperties
className	string
color	Color
width	StringOrNumber
flexDirection	FlexDirection
top	string
bottom	string
right	string
left	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
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
bg	Color
backgroundColor	Color
opacity	Opacity
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	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
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
boxShadow	BoxShadow
textShadow	TextShadow