search-bar
search-bar
là component trong tini-ui hỗ trợ xây dựng component tìm kiếm.
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/search-bar/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/search-bar/index
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ính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
className | string | Custom class | |
style | string | Inline style | |
loading | boolean | false | Hiển thị loading skeleton |
shape | string | rounded | Kiểu border radius của input. Hỗ trợ rounded hoặc pill . Mặc định là rounded |
maxlength | number | 140 | Giới hạn số ký tự được nhập |
value | string | Giá trị khởi tạo | |
labelText | string | Nội dung của label | |
labelCls | string | Custom class cho thẻ label | |
placeholder | string | Nội dung hiển thị trước khi người dùng nhập giá trị của search-bar | |
placeholderClass | string | Class name cho placeholder | |
placeholderStyle | css style | Inline style cho placeholder | |
disabled | boolean | false | Disable search-bar |
focus | boolean | false | Tự động focus vào search-bar |
hasError | boolean | false | Khi giá trị là true, search-bar sẽ có viền màu đỏ (mã #ff424f), và xuất hiện icon thông báo lỗi |
errorMsg | string | Hiển thị thông báo lỗi bên dưới search-bar , cần khai báo thêm hasError=true | |
controlled | boolean | false | Khi giá trị là true , nội dung value của search-bar sẽ được điều khiển hoàn toàn thông qua hàm setData trong file js |
onInput | event | Sự kiện sẽ được gọi khi nội dung của search-bar bị thay đổi, event.detail = { value: value } | |
onFocus | event | Sự kiện sẽ được gọi khi search-bar được focus , event.detail = { value: value } | |
onBlur | event | Sự kiện sẽ được gọi khi search-bar không được focus nữa , event.detail = { value: value } | |
onTapCloseIcon | event | Sự kiện sẽ được gọi khi tap vào icon close , event.detail = { value: value } | |
onTapSearchIcon | event | Sự kiện sẽ được gọi khi tap vào icon search hoặc khi nhấn nút submit (return/Nhập) , event.detail = { value: value } |
Sample Code
index.json
{
"defaultTitle": "Search bar",
"usingComponents": {
"search-bar": "@tiki.vn/tini-ui/es/search-bar/index"
}
}
index.txml
<search-bar
placeholder="With label"
onInput="onInput"
onFocus="onFocus"
onBlur="onBlur"
labelText="Label"
/>
<search-bar placeholder="Without label" />
<search-bar
placeholder="Click to type here"
labelText="Rounded"
shape="rounded"
/>
<search-bar
placeholder="Click to type here"
labelText="Pill"
shape="pill"
/>
<search-bar
value="{{value}}"
labelText="Label"
onInput="handleChangeInput"
onTapCloseIcon="handleClearInput"
/>
<search-bar
disabled
labelText="Disabled"
placeholder="Disabled"
/>
<search-bar
loading
placeholder="Loading"
/>
index.js
Page({
data: {
value: 'value'
},
onInput(event) {
console.log('onInput', event);
},
onConfirm(event) {
console.log('onConfirm', event);
},
onFocus(event) {
console.log('onFocus', event);
},
onBlur(event) {
console.log('onBlur', event);
},
handleChangeInput(event) {
this.setData({ value: event.detail.value });
},
handleClearInput() {
this.setData({ value: '' });
}
});