Skip to main content

search-bar

Last updated on
  • 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

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ả
classNamestringCustom class
stylestringInline style
loadingbooleanfalseHiển thị loading skeleton
shapestringroundedKiểu border radius của input. Hỗ trợ rounded hoặc pill. Mặc định là rounded
maxlengthnumber140Giới hạn số ký tự được nhập
valuestringGiá trị khởi tạo
labelTextstringNội dung của label
labelClsstringCustom class cho thẻ label
placeholderstringNội dung hiển thị trước khi người dùng nhập giá trị của search-bar
placeholderClassstringClass name cho placeholder
placeholderStylecss styleInline style cho placeholder
disabledbooleanfalseDisable search-bar
focusbooleanfalseTự động focus vào search-bar
hasErrorbooleanfalseKhi 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
errorMsgstringHiển thị thông báo lỗi bên dưới search-bar , cần khai báo thêm hasError=true
controlledbooleanfalseKhi 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
onInputeventSự kiện sẽ được gọi khi nội dung của search-bar bị thay đổi, event.detail = { value: value }
onFocuseventSự kiện sẽ được gọi khi search-bar được focus , event.detail = { value: value }
onBlureventSự kiện sẽ được gọi khi search-bar không được focus nữa , event.detail = { value: value }
onTapCloseIconeventSự kiện sẽ được gọi khi tap vào icon close , event.detail = { value: value }
onTapSearchIconeventSự 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: '' });
}
});