uiv

# ButtonGroup 按钮组

注意

当在按钮组的元素中使用 tooltips 或 popovers 时，请确保它们是附加到 body 节点上的。

# 样例

将一系列 <btn> 包裹至 <btn-group> 中：

<template>
  <div class="uiv">
    <btn-group>
      <btn>Left</btn>
      <btn>Middle</btn>
      <btn>Right</btn>
    </btn-group>
  </div>
</template>

# 按钮工具栏

将一系列 <btn-group> 包裹至 <btn-toolbar> 中以实现更复杂的场景：

<template>
  <div class="uiv">
    <btn-toolbar>
      <btn-group>
        <btn>1</btn>
        <btn>2</btn>
        <btn>3</btn>
        <btn>4</btn>
      </btn-group>
      <btn-group>
        <btn>5</btn>
        <btn>6</btn>
        <btn>7</btn>
      </btn-group>
      <btn-group>
        <btn>8</btn>
      </btn-group>
    </btn-toolbar>
  </div>
</template>

# 尺寸

不需要给按钮组中的每个按钮都增加尺寸样式，只需要给 <btn-group> 添加 size 属性即可：

<template>
  <div class="uiv">
    <p>
      <btn-group size="lg">
        <btn>Left</btn>
        <btn>Middle</btn>
        <btn>Right</btn>
      </btn-group>
    </p>
    <p>
      <btn-group>
        <btn>Left</btn>
        <btn>Middle</btn>
        <btn>Right</btn>
      </btn-group>
    </p>
    <p>
      <btn-group size="sm">
        <btn>Left</btn>
        <btn>Middle</btn>
        <btn>Right</btn>
      </btn-group>
    </p>
    <p>
      <btn-group size="xs">
        <btn>Left</btn>
        <btn>Middle</btn>
        <btn>Right</btn>
      </btn-group>
    </p>
  </div>
</template>

# 嵌套下拉菜单

当在按钮组中嵌套了下拉菜单时，btn-group 会被自动添加到 <dropdown> 组件：

<template>
  <div class="uiv">
    <btn-group>
      <btn>Left</btn>
      <btn>Middle</btn>
      <dropdown>
        <btn class="dropdown-toggle">Dropdown <span class="caret"></span></btn>
        <template slot="dropdown">
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </dropdown>
      <btn>Right</btn>
    </btn-group>
  </div>
</template>

# 垂直排列

通过给按钮组增加 vertical 属性来将他们变为垂直排列：

注意

分裂为两个按钮的下拉菜单不支持在此处使用

<template>
  <div class="uiv">
    <btn-group vertical>
      <btn>Top</btn>
      <btn>Center</btn>
      <dropdown>
        <btn class="dropdown-toggle">Dropdown <span class="caret"></span></btn>
        <template slot="dropdown">
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </dropdown>
      <btn>Bottom</btn>
    </btn-group>
  </div>
</template>

# 横向填充

通过添加 justified 属性来允许按钮撑满按钮组的宽度，同样支持下拉菜单。

注意

由于 Bootstrap 的限制， <btn> 在渲染为 button 时需要添加 justified 属性。

Left Middle Right

<template>
  <div class="uiv">
    <btn-group justified>
      <btn href="javascript:;">Left</btn>
      <btn href="javascript:;">Middle</btn>
      <btn href="javascript:;">Right</btn>
    </btn-group>
    <br />
    <btn-group justified>
      <btn justified>Left</btn>
      <btn justified>Middle</btn>
      <dropdown>
        <btn class="dropdown-toggle">Dropdown <span class="caret"></span></btn>
        <template slot="dropdown">
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </dropdown>
    </btn-group>
  </div>
</template>

# API 文档

# BtnGroup (opens new window)

# 参数

名字 类型 默认值 必填 描述
size String 自定义尺寸，可选的值：lg, sm, xs.
vertical Boolean false 垂直样式
justified Boolean false 横向填充样式

# 插槽

名字 描述
default 按钮组体

# BtnToolbar (opens new window)

该组件没有参数。

← Collapse 折叠面板 →