Stack 堆叠布局

用于垂直或水平排列元素的布局组件，基于 Flexbox。支持响应式布局并通过 BrConfigProvider 进行全局主题配置。

基础用法

垂直堆叠

默认情况下，BrStack 垂直排列元素（flex-col）。

Item 1

Item 2

Item 3

Example

水平堆叠与对齐

使用 direction="horizontal" 进行水平排列，并通过 align 和 justify 控制对齐。

1

2

3

Example

响应式与自定义样式

BrStack 支持响应式属性（对象语法）和样式定制（圆角、阴影、内边距）。

Item 1

Item 2

Item 3

Example

多态渲染

使用 as 属性更改 Stack 的底层 HTML 元素，例如 ul、li 或 section 以实现语义化标记。

• Item 1 (rendered as li)
• Item 2 (rendered as li)
• Item 3 (rendered as li)

Section Title

This entire stack is rendered as a <section> element.

Example

主题定制

Stack 的全局基础样式（如圆角）可以通过 BrConfigProvider 控制。

Default Theme (Radius: 0.5rem)

Custom Theme (Radius: 1.0rem)

Example

API

属性名	说明	类型	默认值
as	渲染的 HTML 标签	string	div
direction	布局方向	'vertical' | 'horizontal' | ResponsiveProp	'vertical'
gap	元素间距	string | number | ResponsiveProp	-
align	交叉轴对齐	'start' | 'end' | 'center' | 'baseline' | 'stretch' | ResponsiveProp	'stretch'
justify	主轴对齐	'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | ResponsiveProp	'start'
wrap	换行行为	'nowrap' | 'wrap' | 'wrap-reverse' | ResponsiveProp	'nowrap'
padding	内边距	string | number | ResponsiveProp	-
radius	圆角	string | number | ResponsiveProp	-
shadow	阴影	string | ResponsiveProp	-