Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

WARNING

如果你发现 v-model 绑定的值失效，请检查是否开启了兼容模式（compat）。在兼容模式下，需要将 v-model 改写为 v-model:model-value。

TIP

目前 w-select 的默认宽度更改为 100% 当使用内联形式时，宽度将显示异常。为了保持显示正常, 您需要手动配置 w-select 的宽度

基础用法

适用广泛的基础单选 v-model 的值为当前被选中的 w-option 的 value 属性值

基础用法

请选择

禁用状态：为 `w-select` 设置 `disabled`属性，则整个选择器不可用

请选择

禁用选项：在 w-option 中，设定 disabled 值为 true，即可禁用该选项

请选择

可清空：为 w-select 设置 clearable 属性，则可将选择器清空

请选择

🎉 轻量化：为 w-select 设置 plain 属性

请选择

vue

<template>
  <w-title>基础用法</w-title>
  <div class="flex flex-wrap gap-4 items-center">
    <w-select v-model="value" size="large" style="width: 240px">
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select v-model="value" placeholder="请选择" style="width: 240px">
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      placeholder="请选择"
      size="small"
      :suffix-icon="CaretBottom"
      style="width: 240px"
    >
      <template #prefix>
        <w-icon>
          <search />
        </w-icon>
      </template>
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      placeholder="请选择"
      size="mini"
      :suffix-icon="Search"
      :suffix-icon-rotate="false"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
  </div>
  <w-divider />
  <w-title
    >禁用状态：为 `w-select` 设置 `disabled`属性，则整个选择器不可用</w-title
  >
  <w-select v-model="value" disabled placeholder="请选择" style="width: 240px">
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-select
    v-model="value4"
    disabled
    placeholder="请选择"
    style="width: 240px"
    class="ml-4"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-divider />
  <w-title
    >禁用选项：在 w-option 中，设定 disabled 值为 true，即可禁用该选项</w-title
  >
  <w-select v-model="value1" placeholder="请选择" style="width: 240px">
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </w-select>
  <w-divider />
  <w-title>可清空：为 w-select 设置 clearable 属性，则可将选择器清空 </w-title>
  <w-select
    v-model="value2"
    clearable
    placeholder="请选择"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-divider />
  <w-title>🎉 轻量化：为 w-select 设置 plain 属性 </w-title>
  <w-select
    v-model="value2"
    clearable
    plain
    placeholder="请选择"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-select
    v-model="value2"
    class="ml-8"
    clearable
    plain
    disabled
    placeholder="请选择"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CaretBottom, Search } from '@win-design-next/icons-vue'

const value = ref('')
const value1 = ref('')
const value2 = ref('')
const value4 = ref('option1')

const options = [
  {
    value: 'option1',
    label: '选项1',
  },
  {
    value: 'option2',
    label: '选项2',
  },
  {
    value: 'option3',
    label: '选项3',
  },
  {
    value: 'option4',
    label: '选项4',
  },
  {
    value: 'option5',
    label: '选项5',
    disabled: true,
  },
]
</script>

Options 属性 1.1.1

w-option 基础用法. 你可以通过 options 属性自定义 w-option 的别名。

Select

不同状态 1.1.1

通过 status 属性可以设置选择器的不同状态。

请选择

校验通过文本提示

请选择

校验存在严重问题文本提示

请选择

校验存在严重问题文本提示

请选择

校验不通过文本提示

基础多选

多选选择器使用 tag 组件来展示已选中的选项。

为 w-select 设置 multiple 属性即可启用多选，此时 v-model 的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 组件的形式展现，你也可以设置 collapse-tags 属性将它们合并为一段文字。您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

基础用法

请选择

Large

请选择

Small

请选择

mini

请选择

使用 collapse-tags

请选择

使用 collapse-tags-tooltip

请选择

使用 max-collapse-tags

请选择

禁用

请选择

vue

<template>
  <div class="mb-4">
    <w-title>基础用法</w-title>
    <div class="mr-4">
      <w-select
        v-model="value1"
        clearable
        multiple
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </w-select>
    </div>
  </div>
  <div class="flex">
    <div class="mr-4">
      <p>Large</p>
      <w-select
        v-model="value1"
        tag-type="danger"
        multiple
        size="large"
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div class="mr-4">
      <p>Small</p>
      <w-select
        v-model="value1"
        multiple
        size="small"
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div class="mr-4">
      <p>mini</p>
      <w-select
        v-model="value1"
        multiple
        size="mini"
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
  <w-divider />
  <div class="flex">
    <div class="mr-4">
      <p>使用 collapse-tags</p>
      <w-select
        v-model="value2"
        multiple
        collapse-tags
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div class="mr-4">
      <p>使用 collapse-tags-tooltip</p>
      <w-select
        v-model="value3"
        size="small"
        multiple
        collapse-tags
        collapse-tags-tooltip
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div class="mr-4">
      <p>使用 max-collapse-tags</p>
      <w-select
        v-model="value4"
        multiple
        size="mini"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
  <w-divider />
  <div class="mb-4">
    <w-title>禁用</w-title>
    <div class="mr-4 flex gap-4">
      <w-select
        v-model="value1"
        clearable
        multiple
        disabled
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-select
        v-model="value5"
        clearable
        multiple
        disabled
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])
const value5 = ref(['option1', 'option2'])

const options = [
  {
    value: 'option1',
    label: '选项1',
    disabled: true,
  },
  {
    value: 'option2',
    label: '选项2',
  },
  {
    value: 'option3',
    label: '选项3',
    disabled: true,
  },
  {
    value: 'option4',
    label: '选项4',
  },
  {
    value: 'option5',
    label: '选项5',
  },
  {
    value: 'option6',
    label: '选项6',
    disabled: true,
  },
  {
    value: 'option7',
    label: '选项7',
  },
  {
    value: 'option8',
    label: '选项8',
  },
  {
    value: 'option9',
    label: '选项9',
  },
  {
    value: 'option10',
    label: '选项10',
  },
]
</script>

筛选选项

可以利用筛选功能快速查找选项。

为w-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有 label 属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

单选

请选择

多选

请选择

远程搜索

输入关键字以从远程服务器中查找数据。

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。 remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果 w-option 是通过 v-for 指令渲染出来的，此时需要为 w-option 添加 key 属性，且其值需具有唯一性，比如这个例子中的 item.value。

输入关键词

创建新的选项

创建并选中未包含在初始选项中的条目。

通过使用 allow-create 属性，用户可以通过输入框创建新项目。为了使 allow-create 正常工作， filterable 的值必须为 true。本例还使用了 default-first-option 属性，在该属性为 true 的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

输入关键词创建

使用值键 value-key 属性

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

通过使用 value-key 属性，可以正确处理带有重复 label 的数据。这样虽然label 是重复的，但任可通过 id 来确认唯一性。

请选择

selected option's description: no select

自定义模板

你可以自定义如何来渲染每一个选项。

将自定义的 HTML 模板插入 w-option 的 slot 中即可。

请选择

自定义下拉菜单的头部

您可以自定义下拉菜单的头部。

使用 slot 自定义内容

请选择

自定义下拉菜单的底部

您可以自定义下拉菜单的底部。

使用 slot 自定义内容

请选择

将选项进行分组

你可以为选项进行分组来区分不同的选项

使用 w-option-group 对备选项进行分组，它的 label 属性为分组名

请选择

自定义标签

您可以自定义标签。

将自定义的标签插入 w-select 的 slot 中即可。 collapse-tags, collapse-tags-tooltip, max-collapse-tags 在此模式下不生效.

自定义加载

修改加载区域内容

loading icon1

输入关键词

loading icon2

输入关键词

vue

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <p>loading icon1</p>
      <w-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="输入关键词"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        <template #loading>
          <svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" />
          </svg>
        </template>
      </w-select>
    </div>
    <div class="m-4">
      <p>loading icon2</p>
      <w-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="输入关键词"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        <template #loading>
          <w-icon class="is-loading">
            <svg class="circular" viewBox="0 0 20 20">
              <g
                class="path2 loading-path"
                stroke-width="0"
                style="animation: none; stroke: none"
              >
                <circle r="3.375" class="dot1" rx="0" ry="0" />
                <circle r="3.375" class="dot2" rx="0" ry="0" />
                <circle r="3.375" class="dot4" rx="0" ry="0" />
                <circle r="3.375" class="dot3" rx="0" ry="0" />
              </g>
            </svg>
          </w-icon>
        </template>
      </w-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 3000)
  } else {
    options.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
</script>

<style>
.w3-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--w3-color-primary);
  stroke-linecap: round;
}
.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}
.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}
.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}
.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>

自定义标签

您可以自定义标签

: Option1

空值配置

若想配置如空字符串为有效值而不是空值，可以配置 empty-values 为 [null, undefined].

如果您想要将清空值更改为 null, 请设置 value-on-clear 为 null

Select API

Attributes

参数	说明	类型	默认值	Version
model-value / v-model	选中项绑定值	`string` / `number` / `boolean` / `object` / `array`	—
multiple	是否多选	`boolean`	false
disabled	是否禁用	`boolean`	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	`string`	value
size	输入框尺寸	`enum`	—
clearable	是否可以清空选项	`boolean`	false
collapse-tags	多选时是否将选中值按文字的形式展示	`boolean`	false
collapse-tags-tooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，`collapse-tags`属性必须设定为 true	`boolean`	true
multiple-limit	`multiple` 属性设置为 `true` 时，代表多选场景下用户最多可以选择的项目数，为 0 则不限制	`number`	0
name	Select 输入框的原生 name 属性	`string`	—
effect	tooltip 主题，内置了 `dark` / `light` 两种	`enum` / `string`	lighter
autocomplete	Select 输入框的原生 autocomplete 属性	`string`	off
placeholder	占位符，默认为“Select”	`string`	—
filterable	Select 组件是否可筛选	`boolean`	false
allow-create	是否允许用户创建新条目，只有当 `filterable` 设置为 true 时才会生效。	`boolean`	false
filter-method	自定义筛选方法	`Function`	—
remote	其中的选项是否从服务器远程加载	`boolean`	false
remote-method	自定义远程搜索方法	`Function`	—
loading	是否正在从远程获取数据	`boolean`	false
loading-text	从服务器加载数据时显示的文本，默认为“Loading”	`string`	—
no-match-text	搜索条件无匹配时显示的文字，也可以使用 `empty` 插槽设置，默认是 “No matching data'”	`string`	—
no-data-text	无选项时显示的文字，也可以使用 `empty` 插槽设置自定义内容，默认是 “暂无数据”	`string`	—
popper-class	选择器下拉菜单的自定义类名	`string`	''
popper-style 1.1.1	为 Select 下拉菜单和标签提示设置自定义样式	`string` / `object`	—
reserve-keyword	当 `multiple` 和 `filterable`被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词	`boolean`	true
default-first-option	是否在输入框按下回车时，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用	`boolean`	false
teleported	是否使用 teleport。设置成 `true`则会被追加到 `append-to` 的位置	`boolean`	true
append-to	下拉框挂载到哪个 DOM 元素	`string`	—
persistent	当下拉选择器未被激活并且`persistent`设置为`false`，选择器会被删除。	`boolean`	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	`boolean`	false
clear-icon	自定义清除图标	`string` / `object`	CircleCloseFilled
fit-input-width	下拉框的宽度是否与输入框相同	`boolean`	false
suffix-icon	自定义后缀图标组件	`string` / `object`
suffix-icon-rotate	自定义后缀图标组件是否旋转	`boolean`	true
tag-type	标签类型	`enum`	info
tag-effect	标签效果	`enum`	light
validate-event	是否触发表单验证	`boolean`	true
offset	下拉面板偏移量	`number`	12
show-arrow	下拉菜单的内容是否有箭头	`boolean`	false
placement	下拉框出现的位置	`enum`	bottom-start
fallback-placements	dropdown 可用的 positions 请查看popper.js 文档	`array`	['bottom-start', 'top-start', 'right', 'left']
max-collapse-tags	需要显示的 Tag 的最大数量只有当 `collapse-tags` 设置为 true 时才会生效。	`number`	1
popper-options	popper.js 参数	`object`refer to popper.js doc	{}
aria-label a11y	等价于原生 input `aria-label` 属性	`string`	—
empty-values	组件的空值配置参考 config-provider	`array`	—
value-on-clear	清空选项的值参考 config-provider	`string` / `number` / `boolean` / `Function`	—
tabindex	input 的 tabindex	`string` / `number`	—
plain	朴素的 Select	`boolean`	false	V0.0.8
options 1.1.1	选项的数据源 `value` and `label` and `disabled` 可以通过 `props`自定义	`array`	—
props 1.1.1	配置 options	`object`	—
debounce 1.1.1	远程搜索时的防抖延迟（以毫秒为单位）	`number`	300

props

Attribute	Description	Type	Default
value	指定选项的值为选项对象的某个属性值	`string`	value
label	指定节点标签为节点对象的某个属性值	`string`	label
options	指定选项的子选项为选项对象的某个属性值	`string`	options
disabled	指定选项的禁用为选项对象的某个属性值	`string`	disabled

Events

事件名	说明	Type
change	选中值发生变化时触发	`Function`
visible-change	下拉框出现/隐藏时触发	`Function`
remove-tag	多选模式下移除 tag 时触发	`Function`
clear	可清空的单选模式下用户点击清空按钮时触发	`Function`
blur	当 input 失去焦点时触发	`Function`
focus	当 input 获得焦点时触发	`Function`
popup-scroll	下拉滚动时触发	`Function`

Slots

插槽名	说明	子标签
default	option 组件列表	Option Group / Option
header	下拉列表顶部的内容	—
footer	下拉列表底部的内容	—
prefix	Select 组件头部内容	—
empty	无选项时的列表	—
tag	select 组件自定义标签内容	—
loading	select 组件自定义 loading 内容	—
label	select 组件自定义标签内容	—

Exposes

插槽名	说明	类型
focus	使选择器的输入框获取焦点	`Function`
blur	使选择器的输入框失去焦点，并隐藏下拉框	`Function`
selectedLabel	获取当前选中的标签	`object`

Option Group API

Attributes

属性名	说明	Type	Default
label	分组的名称	`string`	—
disabled	是否将该分组下所有选项置为禁用	`boolean`	false

Slots

属性名	说明	Subtags
default	自定义默认内容	Option

Option API

Attributes

名称	详情	类型	默认
value	选项的值	`string` / `number` / `boolean` / `object`	—
label	选项的标签，若不设置则默认与`value`相同	`string` / `number`	—
disabled	是否禁用该选项	`boolean`	false

Slots

名称	说明
default	默认插槽内容

Rate 评分

Virtualized Select 虚拟化选择器

Select 选择器 ​

基础用法 ​

Options 属性 1.1.1 ​

不同状态 1.1.1 ​

基础多选 ​

筛选选项 ​

远程搜索 ​

创建新的选项 ​

使用值键 value-key 属性 ​

自定义模板 ​

自定义下拉菜单的头部 ​

自定义下拉菜单的底部 ​

将选项进行分组 ​

自定义标签 ​

自定义加载 ​

自定义标签 ​

空值配置 ​

Select API ​

Attributes ​

props ​

Events ​

Slots ​

Exposes ​

Option Group API ​

Attributes ​

Slots ​

Option API ​

Attributes ​

Slots ​

Select 选择器

基础用法

Options 属性 1.1.1

不同状态 1.1.1

基础多选

筛选选项

远程搜索

创建新的选项

使用值键 value-key 属性

自定义模板

自定义下拉菜单的头部

自定义下拉菜单的底部

将选项进行分组

自定义标签

自定义加载

自定义标签

空值配置

Select API

Attributes

props

Events

Slots

Exposes

Option Group API

Attributes

Slots

Option API

Attributes

Slots