Searchbar
Cú pháp
zmp-searchbar
Searchbar Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| init | boolean | true | Khởi tạo Searchbar |
| value | string | number | Cho phép xác định giá trị của Searchbar. Có thể hữu dụng trong trường hợp customSearch được bật | |
| form | boolean | true | Sẽ được render bởi form thay vì div |
| placeholder | string | "Search" | Input placeholder text |
| clear-button | boolean | true | Bât button xóa search input |
| expandable | boolean | false | Bật chế độ expandable searchbar |
| inline | boolean | false | Bật sử dụng search input inline |
| spellcheck | boolean | Gía trị thuộc tính spellcheck của input element | |
| search-container | string | object | CSS selector hoặc HTML element của List chứa nội dung sẽ search | |
| search-in | string | .item-title | CSS selector của list item nên trong list view element sẽ tìm kiếm. Thường tìm kiếm thông qua title ('.item-title'). Có thể sử dụng các CSS selector: '.item-title, .item-text',... |
| search-item | string | li | CSS selector của item sẽ tìm kiếm. Nếu tìm kiếm bên trong list view thì search item sẽ là li |
| search-group | string | .list-group | CSS selector của group element. Được sử dụng khi hideGroup được bật để ẩn groups |
| search-group-title | string | .list-group-title, .item-divider | CSS selector của group titles và dividers. Được sử dụng khi hideDividers được bật để ẩn group titles vả dividers. If we do a search in List View, then it usually a list group title or list item divider. |
| found-el | string | object | .searchbar-found | CSS selector hoặc HTMLElement của nơi sẽ render các item tìm kiếm được. Nếu không xác định searchbar sẽ tìm '.searchbar-found' xuất hiện trên trang |
| not-found-el | string | object | .searchbar-not-found | CSS selector hoặc HTMLElement của element khi danh sách tìm kiếm rỗng. Nế không xác định, searchbar sẽ tìm kiếm .searchbar-not-found element trên trang |
| backdrop | boolean | Bật lớp overlay phía dưới searchbar khi searchbar input đang được focus | |
| backdrop-el | string | object | CSS selector hoặc HTMLElement của searchbar backdrop element. Nếu không xác định và giá trị của backdrop parameter là true sẽ tìm .searchbar-backdrop element nếu không thấy sẽ tự động tạo mới | |
| ignore | string | .searchbar-ignore | CSS selector dùng cho các items sẽ bỏ qua bởi searchbar và luôn hiển thị trong phần kết quả tìm kiếm |
| custom-search | boolean | false | Khi đuọc bật searchbar sẽ không tìm kiếm trong list blocks được xác định bơi searchContainer và có thể tùy chỉnh chức năng search, như gọi APIs với kết quả và hiển kết quả |
| remove-diacritics | boolean | false | Bật để bỏ/thay thế dấu khi tìm kiếm |
| hide-dividers | boolean | true | Nếu bật, then search will consider item dividers and group titles and hide them if there are no found items right after them |
| hide-groups | boolean | true | Nếu ược bật, khi tìm kiếm sẽ xem xét các groups và ẩn chúng nếu không có mục nào được tìm thấy bên trong các nhóm này |
| no-shadow | boolean | false | Vô hieuj hóa shadow trên MD theme |
| no-hairline | boolean | false | Bỏ đường viền phía dưới searchbar (hairline) trên iOS theme |
Searchbar Instance Methods
Searchbar instance cung cấp các methods để tương tác với searchbar.
| Method | Description |
|---|---|
| .search(query) | Buộc searchbar tìm kiếm query đã được truyền |
| .enable() | bật/kích hoạt searchbar |
| .disable() | Vô hiệu hóa/hủy kích hoạt searchbar |
| .toggle() | Toggle searchbar |
| .clear() | Xóa query tìm kiếm và cập nhật kết quả |
Để lấy searchbar instance, ta dùng zmp.searchbar.get(el) với el là các các CSS Selector hoặc HTMLElement của searchbar.
Ví dụ
Code demo fallback when rendering server side!
Searchbar Events
| Event | Arguments | Description |
|---|---|---|
| @searchbar:search | (searchbar, query, previousQuery) | Event sẽ được triggered khi tìm kiém (search field thay dổi). Đối số nhận vào instance của searchbar, query tìm kiếm và query trước đó |
| @searchbar:clear | (searchbar, previousQuery) | Event sẽ được triggered khi người dùng click lên button xóa. Đối số nhận vào instance của searchbar và query trước đó |
| @searchbar:enable | (searchbar) | Event sẽ được triggered khi trạng thái của Searchbar trở thành active |
| @searchbar:disable | (searchbar) | Event sẽ được triggered khi trạng thái của Searchbar trở thành inactive/disabled |
| @change | (event) | Event sẽ được triggered khi khi nội dung searchbar input thay đổi |
| @input | (event) | Event sẽ được triggered khi "input" event xuât hiện trên on searchbar input element |
| @focus | (event) | Event sẽ được triggered khi searchbar input được focus |
| @blur | (event) | Event sẽ được triggered khi người dùng không còn focus vào input |
| @click-clear | (event) | Event sẽ được triggered khi người dùng click lê nút xóa nội dung search |
Searchbar Slots
| Slot | Description |
|---|---|
| default | Element sẽ được chèn dưới dạng element con cuôi cùng của <div className="searchbar-inner"/> |
| before-inner | Element sẽ được chèn ngay trước <div className="searchbar-inner"/> element |
| after-inner | Element sẽ được chèn ngay sau <div className="searchbar-inner"/> element |
| inner-start | Element sẽ được chèn dưới dạng element con đầu tiên của <div className="searchbar-inner"/> element |
| inner-end | Element sẽ được chèn dưới dạng element con cuối cùng của <div className="searchbar-inner"/> element |
| input-wrap-start | Element sẽ được chèn dưới dạng element con đầu tiên của <div className="searchbar-input-wrap"/> element |
| input-wrap-end | Sẽ được chèn dưới dạng element con cuối cùng của <div className="searchbar-input-wrap"/> element |
Ví dụ:
Code demo fallback when rendering server side!
Ví dụ
Code demo fallback when rendering server side!