# HTSpace 空间容器
用于在子元素之间设置统一间距的布局组件,支持横向、纵向、换行等灵活排布,常用于按钮、表单项、卡片等内容的内边距或分隔。
# 基本用法
设置不同大小的间距与方向
# HTSpace Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
align | 垂直方向的对齐方式(仅 horizontal 有效) | string | start / end / center / baseline | center |
direction | 子元素的排列方向 | string | horizontal / vertical | horizontal |
size | 间距大小,可以是预设值或数字(单位 px) | string | number | small / middle / large / 自定义数字 | middle |
wrap | 是否自动换行(仅 horizontal 有效) | boolean | — | false |
# HTSpace Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击容器时触发 | event: MouseEvent |
# 样式说明
HTSpace 组件内部使用 flex 布局,控制方向和间距,并通过 gap 属性设置子元素间距。支持原生 HTML 元素及 Vue 插槽嵌套。
# 示例:自定义数值大小 & wrap 自动换行
# 注意事项
wrap仅在direction="horizontal"时生效;gap属性在 IE 中不兼容,建议针对低版本浏览器提供兼容性方案;align对vertical模式无效果。