Skip to content

水平堆叠

@astryxdesign/core v0.7.1 · HStack

属性 ​

HStack 支持 Stack 的全部属性,只有 direction 不开放,它固定是 horizontal。

属性类型默认值说明
alignStackCrossAlignment—纵向对齐的简写,属性和 Stack 上读起来一样。效果同 vAlign。
asstring | Component'div'根元素或者根组件。
gapSpacingStep—相邻子项之间的间距,取间距刻度。
heightnumber | string—这一行的高度。写数字按像素,写字符串原样使用。
hAlignStackMainAlignment—子项在横向主轴上的位置:start、center、end、between、around、evenly。
isScrollablebooleanfalse内容超出时允许滚动。
justifyStackMainAlignment—主轴对齐的另一个名字,对应 CSS 的 justify-content。
maxWidthnumber | string—这一行的最大宽度。
minHeightnumber | string—这一行的最小高度。
paddingSpacingStep—四周内边距,取间距刻度。
paddingBlockSpacingStep—纵向内边距,会盖掉这一条轴上的 padding。
paddingBlockEndSpacingStep—只改下边内边距,会盖掉 paddingBlock 和 padding 在这一条边上的值。
paddingBlockStartSpacingStep—只改上边内边距,会盖掉 paddingBlock 和 padding 在这一条边上的值。
paddingInlineSpacingStep—横向内边距,会盖掉这一条轴上的 padding。
paddingInlineEndSpacingStep—只改行内结束边(从左往右时是右边)的内边距,会盖掉 paddingInline 和 padding 在这一条边上的值。
paddingInlineStartSpacingStep—只改行内起始边(从左往右时是左边)的内边距,会盖掉 paddingInline 和 padding 在这一条边上的值。
vAlignStackCrossAlignment—子项在纵向交叉轴上的对齐:start、center、end、stretch。
widthnumber | string—这一行的宽度。写数字按像素,写字符串原样使用。
wrapStackWrap'nowrap'要不要换行:nowrap、wrap 或 wrap-reverse。

这几个辅助类型和 Stack 共用:

ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
type StackMainAlignment = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
type StackCrossAlignment = 'start' | 'center' | 'end' | 'stretch'
type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
type StackSizeValue = number | string
type StackElement = Component | string

插槽 ​

  • default:这一行里的子项。

原生属性 ​

根元素会接收 HTML 属性、aria-* 属性、data-* 属性、class 和 style。class 会和组件自己的类合并,style 会和它自己写的尺寸、间距合并。