α堆栈
用于垂直显示元素,其中的项位于前一项的正下方。
α
该组件是一项正在进行的工作,并已准备好进行探索性使用,预计在小版本更新中会有破坏性更改。请谨慎使用。进一步了解我们的组件生命周期.
默认情况下,堆栈是左对齐的,堆叠项之间的间隔为16px。
进口反应从“反应”;进口{AlphaStack,文本}从“@shopify /北极星”;函数AlphaStackExample(){返回(<AlphaStack><占位符宽度=“320 px”标签=“栈的孩子”/><占位符宽度=“320 px”/><占位符宽度=“320 px”/></AlphaStack>);}常量占位符=({标签=”,高度=“汽车”,宽度=“汽车”,childWidth=“汽车”,})=>{返回(<div风格={{背景:“# 7 b47f1”,填充:“14 px var(——p-space-2)”,高度:高度??未定义的,宽度:宽度??未定义的,}}><div风格={{显示:“inline-block”,背景:'rgba(255, 255, 255, 0.3)',颜色:“# FFFFFF”,宽度:childWidth??未定义的,}}><文本作为=“氢气”变体=“bodyMd”fontWeight=“媒介”>{标签}</文本></div></div>);};
道具
想让这个功能变得更好吗?请分享你的反馈.
接口
AlphaStackProps
- 孩子们? 反应.ReactNode
- 作为? “div”|“ul”|“ol”|“自定义字段”
-
元素类型。
默认为“div”.
- 对齐? “OB欧宝娱乐APP开始”|“结束”|“中心”
-
儿童的水平对齐。
默认为“OB欧宝娱乐APP开始”.
- fullWidth? 布尔
-
将子节点切换为全宽度。
默认为假.
- 差距? T| {[断点在BreakpointsAlias]?:T;}<SpacingSpaceScale>
-
孩子之间的间隔。
- id? 字符串
-
HTML id属性。
- reverseOrder? 布尔
-
反转子项的呈现顺序。
默认为假.
相关的组件
- 要水平显示元素,使用内联组件