Select & Tags

Select tuỳ biến có tìm kiếm, nút xoá, nhóm, chọn nhiều và tạo tag mới (thay bootstrap-select, select2 và tagsinput). Điều khiển đầy đủ bằng bàn phím.

Select

Select

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Single + search + clear" v-slot="{ id }"><ThlSelect :id="id" v-model="single" :options="countries" searchable clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Multiple" v-slot="{ id }"><ThlSelect :id="id" v-model="multi" :options="countries" multiple clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Creatable tags" v-slot="{ id }"><ThlSelect :id="id" v-model="tags" :options="tags.map((t) => ({ label: t, value: t }))" multiple creatable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="TagsInput" v-slot="{ id }"><ThlTagsInput :id="id" v-model="tags" /></ThlField></div>
</div>

React

<Select options={countries} value={single} onChange={setSingle} searchable clearable />
<Select options={countries} value={multi} onChange={setMulti} multiple clearable />
<Select options={tagOptions} value={tags} onChange={setTags} multiple creatable />
<TagsInput value={tags} onChange={setTags} />

Angular

<thl-select [(value)]="single" [options]="countries" [searchable]="true" [clearable]="true" />
<thl-select formControlName="countries" [options]="countries" multiple />
<thl-select [(ngModel)]="tags" [options]="tagOptions()" multiple creatable />

API

Select

<ThlSelect> · import { ThlSelect } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
modelValue	any	—
options*	array	—
multiple	boolean	—
searchable	boolean	—
clearable	boolean	—
creatable	boolean	—
placeholder	string	—
disabled	boolean	—
id	string	—
max	number	—

Sự kiện: update:modelValuechange

TagsInput

<ThlTagsInput> · import { ThlTagsInput } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
modelValue	array	—
placeholder	string	—
id	string	—

Sự kiện: update:modelValue