按钮布局 (Button Layouts)

在实际业务场景中，我们经常需要将多个操作按钮组合在一起。

Tabler 提供了三种不同语义的按钮容器，用来控制按钮之间的间距、对齐方式以及连体组合效果。

按钮列表 (Button List)

TButtonList 是最常用的多按钮容器，它会在按钮之间保持均匀的间距。

如果你添加了额外的主题色，可以很容易地将用户的注意力集中在主要操作上。

<TButtonList>
  <TButton color="success">Save changes</TButton>
  <TButton>Save and continue</TButton>
  <TButton color="danger">Cancel</TButton>
</TButtonList>

当容器宽度不足时（例如在移动端设备上），TButtonList 内部的按钮会自动换行到下一行，并始终保持一致的间距，无需手动编写媒体查询。

查看代码

<TButtonList>
    <TButton>One</TButton>
  <TButton>Two</TButton>
  <TButton>Three</TButton>
  <TButton>Four</TButton>
  <TButton>Five</TButton>
  <TButton>Six</TButton>
  <TButton>Seven</TButton>
  <TButton>Eight</TButton>
  <TButton>Nine</TButton>
  <TButton>Ten</TButton>
  <TButton>Eleven</TButton>
  <TButton>Twelve</TButton>
  <TButton>Thirteen</TButton>
  <TButton>Fourteen</TButton>
  <TButton>Fifteen</TButton>
  <TButton>Sixteen</TButton>
  <TButton>Seventeen</TButton>
  <TButton>Eighteen</TButton>
  <TButton>Nineteen</TButton>
</TButtonList>

使用 justify 属性来调整按钮的对齐方式，将它们放置在最合适的位置。

<TButtonList justify="center">
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

<TButtonList justify="end">
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

如果需要在同一行内将某个按钮（如“删除”）推至最左侧，而将主要操作按钮放置在最右侧，可以结合 Bootstrap 原生的 me-auto 工具类来实现。

<TButtonList justify="end">
  <TButton color="danger" outline class="me-auto">Delete</TButton>
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

按钮组 (Button Group)

TButtonGroup 用于将相关联的按钮紧密缝合在一起，形成一个视觉整体。

非常适合用来制作工具栏、分段控制器（Segmented Control）或多视图切换器。

<TButtonGroup>
  <TButton>Left</TButton>
  <TButton>Middle</TButton>
  <TButton>Right</TButton>
</TButtonGroup>

你也可以使用 vertical 属性，将按钮调整为竖状排列。

<TButtonGroup vertical>
  <TButton>Top</TButton>
  <TButton>Middle</TButton>
  <TButton>Bottom</TButton>
</TButtonGroup>

操作按钮组 (Button Actions)

TButtonActions 是专门为带有 action 属性的紧凑型图标按钮设计的容器。

它通常位于卡片（Card）的右上角标题栏，或者数据表格的操作列中。

<TButtonActions>
  <TButton action>
    <IconRefresh class="icon icon-1"></IconRefresh>
  </TButton>
  <TButton action>
    <IconChevronUp class="icon icon-1"></IconChevronUp>
  </TButton>
  <TButton action>
    <IconDotsVertical class="icon icon-1"></IconDotsVertical>
  </TButton>
  <TButton action>
    <IconX class="icon icon-1"></IconX>
  </TButton>
</TButtonActions>

API

TButtonList 属性 (Props)

属性名	说明	类型	默认值
justify	内部按钮的水平对齐方式。对应 Flexbox 的 justify-content。	'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'	'start'

TButtonGroup 属性 (Props)

属性名	说明	类型	默认值
vertical	是否将按钮组由水平方向改为垂直纵向排列。	boolean	false

容器插槽 (Slots)

以上三种容器组件（TButtonList, TButtonGroup, TButtonActions）均支持且仅支持 default 插槽，用于放置 TButton 或其他 HTML 元素。