Button Group / 按钮组

用于在多个选项之间选择一个元素。可以取代 Select 组件。

特性

支持取消选择。

基础用法

按钮组是非常适合用来代替 Select 组件，可以用于在多个选项之间选择一个元素。建议如果在选项少于 3 个时使用。它不会占据更多空间，但是能够更便于用户选择。因为用户只需要一次点击就可以完成选择。

这个组件旨在简单地实现最常用的按钮组功能。这代表它的接口非常易用。只需要提供一个数组作为选项，使用 v-model 来绑定选中的值即可。虽然开发者们可以简单地改变颜色、文字和图标，但是并不能完全自定义按钮组按钮的样式。如果你需要更自由的自定义，可以使用 Button 组件封装属于自己的按钮组。

按钮组支持传入 unselectable 属性，使得按钮组可以取消选择。

<script setup>
import { ref } from 'vue'
import { BtnGroup } from '@roku-ui/vue'

const val = ref('left')
const selections = ['left', 'center', 'right']
</script>

<template>
  <BtnGroup
    v-model="val"
    :selections="selections"
  />
</template>

按钮组可以只有一个选项。需要注意的是，此时无需传入 unselectable 属性，默认就是可以取消选择的。在这种情况下，它更像是一个单选按钮，在一定程度上可以替代 Switch 组件。

<script setup>
import { ref } from 'vue'
import { BtnGroup } from '@roku-ui/vue'

const val = ref()
const selections = ['check']
</script>

<template>
  <BtnGroup
    v-model="val"
    :selections="selections"
  />
</template>