Nhảy tới nội dung

dropdown

Cập nhật lần cuối vào
  • dropdown là component trong tini-ui. Với giao diện gần giống với textfield, nhưng có hỗ trợ bottom sheet khi bấm vào cho phép hiển thị và chọn data
  • Để sử dụng dropdown, bạn cần phải cài tini-ui từ version 0.0.19 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
placeholderstringPlaceholder cho dropdown
disabledbooleanfalseDisable dropdown
shapestringroundedKiểu border radius của dropdown. Hỗ trợ rounded hoặc pill. Mặc định là rounded
loadingbooleanfalseHiển thị loading skeleton cho dropdown
classNamestringClass cho dropdown
itemsarray string hoặc array objectMảng dữ liệu để hiển thị trên bottom sheet
labelKeystringnameLabel key để hiển thị trên bottom sheet, không cần truyền nếu items là mảng string. Ví dụ bạn có mảng [{value: 'Content 1', key: 1}] thì set labelKey="Content 1" thì bottom sheet sẽ hiển thị text
idKeystringidId key để phân biệt các item trên bottom sheet, ví dụ bạn có mảng [{name: 'Content 1', customKey: 1}], thì bạn cần truyền idKey="customKey"
showSearchbooleanfalseHiển thị search input trên bottom sheet hay không
closeAfterSelectbooleantrueTự động đóng bottom sheet sau khi một item được chọn
searchPlaceholderstringTìm kiếmPlaceholder cho input search, chỉ có hiệu lực khi showSearch=true
labelTextstringfalseLabel text cho dropdown
useBottomSheetbooleanfalseCho phép dùng bottom sheet hay không
bottomSheetHeightnumberChiều cao của bottom sheet
bottomSheetTitlestringDropdownTitle của bottom sheet
bottomSheetButtonstringChọnText cho button dưới footer của bottom sheet
maskClosestringtrueCho phép đóng bottom sheet khi bấm vào mask hay không
valuestring/objectValue cho item được chọn trong bottom sheet
errorMsgstringLỗi hiển thị dưới dropdown
hasErrorstringHiển thị trạng thái có lỗi của dropdown
showCheckstringfalseHiển thị icon check cho item được chọn trong bottom sheet. Sẽ tự động ẩn nếu multiple=true
multiplestringfalseCho phép chọn nhiều item trên bottom sheet
onTapeventSự kiện được gọi khi một item trên bottom sheet được chọn
onSelecteventSự kiện được gọi khi chọn một item trên bottom sheet
onSearcheventSự kiện được gọi khi input search thay đổi

Sample Code

index.json
{
"usingComponents": {
"dropdown": "@tiki.vn/tini-ui/es/dropdown/index"
}
}
index.txml
  <dropdown
maskClose="{{false}}"
bottomSheetHeight="300"
items="{{items1}}"
value="{{selected1}}"
onSelect="onSelect1"
placeholder="Chọn 1">
</dropdown>

<dropdown
bottomSheetHeight="200"
bottomSheetTitle="Custom"
labelKey="label"
idKey="key"
items="{{items2}}"
value="{{selected2}}"
onSelect="onSelect2"
placeholder="Chọn 2">
</dropdown>

<dropdown
bottomSheetTitle="Custom"
labelKey="label"
idKey="key"
multiple
items="{{items2}}"
value="{{selected3}}"
onSelect="onSelect3"
placeholder="Chọn multiple">
</dropdown>
index.js
Page({
data: {
selected1: 'Item 2',
selected2: null,
selected3: [
{ key: 1, label: 'Item 1' },
{ key: 2, label: 'Item 2' },
{ key: 3, label: 'Item 3' }
],
items1: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
items2: [
{ key: 1, label: 'Item 1' },
{ key: 2, label: 'Item 2' },
{ key: 3, label: 'Item 3' },
{ key: 4, label: 'Item 4' },
{ key: 5, label: 'Item 5' },
{ key: 6, label: 'Item 6' },
{ key: 7, label: 'Item 7' },
{ key: 8, label: 'Item 8' },
{ key: 9, label: 'Item 9' }
]
},
onSelect(selected) {
this.setData({ selected });
},
onSelect1(selected1) {
this.setData({ selected1 });
},
onSelect2(selected2) {
this.setData({ selected2 });
},
onSelect3(selected3) {
this.setData({ selected3 });
}
});