List
List giúp hiển thị dạng danh sách các ListItem, hay các Input với vai trò như một form
List Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| mediaList | boolean | false | Kích hoạt dạng Media List |
| linksList | boolean | false | Kích hoạt dạng Links List |
| simpleList | boolean | false | Kích hoạt dạng Simple List |
| sortable | boolean | false | Kích hoạt dạng Sortable List |
| sortableOpposite | boolean | false | Renders sortable handler ở vị trí đối diện với vị trí mặc định |
| sortableTapHold | boolean | false | Cho phép sắp xếp item trong Sortable List bằng cách nhấn giữ và kéo thả. Cần đặt touch.tapHold: true khi khởi tạo app |
| sortableEnabled | boolean | false | Cho phép sắp xếp trên Sortable List |
| sortableMoveElements | boolean | Ghi đè lại sortable.moveElements global app parameter. Khi moveElements được kích hoạt sẽ sắp xếp lại HTML elemnt theo danh sách đã sắp xếp. Có thể vô hiệu hóa moveElements khi sử dụng các thư viện khác để thao tác DOM | |
| form | boolean | false | Render list với <form> tag thay vì <div>. Sử dụng khi muốn tạo form. |
| inlineLabels | boolean | false | Render label dưới dạng inline-style cho Form Inputs |
| noChevron | boolean | false | Xóa bỏ "chevron" icon trên các item của Links List |
| chevronCenter | boolean | false | Căn giữa (theo chiều dọc) "chevron" icon trên các item thuộc media list |
| noHairlines | boolean | false | Xóa đường viền bao quanh List |
| noHairlinesMd | boolean | false | Xóa đường viền quanh List đối với MD theme |
| noHairlinesIos | boolean | false | Xóa đường viền quanh List đối với IOS theme |
| noHairlinesAurora | boolean | false | Xóa đường viền quanh List đối với Aurora theme |
| noHairlinesBetween | boolean | false | Xóa các đường viền giữa các items |
| noHairlinesBetweenMd | boolean | false | Xóa các đường viền giữa các items đối với MD theme |
| noHairlinesBetweenIos | boolean | false | Xóa các đường viền giữa các items đối với iOS theme |
| noHairlinesBetweenAurora | boolean | false | Xóa các đường viền giữa các items đối với Aurora theme |
| tab | boolean | false | Thêm class "tab" khi sử dụng như một tab |
| tabActive | boolean | false | Thêm class "tab-active" khi sử dung như một tab và làm tab này được kích hoạt |
| virtualList | boolean | false | Kích hoạt chế độ Virtual List |
| virtualListParams | object | Object chứa các Virtual List Parameters | |
| loading | boolean | false | Bật chế độ loading list |
| skeletonEffect | string | Tên hiệu ứng loading: 'fade', 'pulse' hoặc 'wave' |
List Events
<List/> events
| Event | Prop | Description |
|---|---|---|
| tabShow | onTabShow | Event sẽ triggered khi trạng thái của List Tab thay đổi thành visible/active |
| tabHide | onTabHide | Event sẽ triggered khi trạng thái của List Tab thay đổi thành invisible/inactive |
| submit | onSubmit | Event sẽ triggered khi người dùng submit form (Khi sử dụng form props) |
<List/> Sortable events
| Event | Prop | Description |
|---|---|---|
| sortableEnable | onSortableEnable | Event sẽ triggered khi chế độ sắp xếp là enabled |
| sortableDisable | onSortableDisable | Event sẽ triggered khi chế độ sắp xếp là disabled |
| sortableSort | onSortableSort | Event sẽ triggered sau khi người dùng thực hiện xong việc sắp xếp element đến vị trí mới. event.detail là object chứa các properties: from và to với index number của list item |
<List/> Virtual List events
| Event | Prop | Description |
|---|---|---|
| virtualItemBeforeInsert | onVirtualItemBeforeInsert | Event sẽ triggered trước khi item đựợc thêm vào virtual document fragment |
| virtualItemsBeforeInsert | onVirtualItemsBeforeInsert | Event sẽ triggered sau khi DOM list hiện tại đựợc xóa và trước khi document mới được thêm |
| virtualItemsAfterInsert | onVirtualItemsAfterInsert | Event sẽ triggered sau khi document fragment mới với các items được thêm |
| virtualBeforeClear | onVirtualBeforeClear | Event sẽ triggered trước khi DOM list hiện tại bị xóa và được thay thế bởi document fragment mới |
List Slots
List React component (<List/>) có một số slots giúp thực hiện tùy chỉnh elements:
- before-list - element sẽ được chèn vào vị trí đầu tiên của list view và ngay trước
<ul\>main list element - after-list - element sẽ được chèn vào vị trí cuối của list view và ngay sau
<ul\>main list element - list - elements sẽ được chèn vào phía trong của
<ul\>main list element
Virtual List Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| el | HTMLElement | string | List Block element Hoặc sử dụng CSS selector string của list block element | |
| ul | HTMLElement | string | List element <ul> được bao bởi List block. | |
| createUl | boolean | true | Tự đông tạo <ul> element phía bên trong Virtual List block. Trường hợp false, virtual list có thể được sử dụng trên bất kỳ block element nào mà không có cấu trúc ul> li |
| items | array | Mảng chứa list items | |
| rowsBefore | number | Số lượng hàng (items) được hiển thị trước vị trí cuộn màn hình hiện tại. Theo mặc định, có giá trị bằng gấp đôi số hàng có thể hiển thị trên màn hình | |
| rowsAfter | number | Số lượng hàng (items)) sẽ được hiển thị sau vị trí cuộn màn hình hiện tại. Theo mặc định, có giá trị bằng số lượng hàng (items) có thể hiển thị trên màn hình | |
| cols | number | 1 | Số lượng items trên mỗi hàng. Không tương thích khi sử dụng Virtual List với dynamic height |
| height | number or function(item) | Với kiểu number - chiều cao mỗi list item tính theo px. Với kiểu function function cần trả về chiều cao. | |
| renderItem | function(item) | Function tùy ý cho phép render item HTLML. Có thể thay thế cho template parameter | |
| renderExternal | function(vl, renderParameters) | Cho phép render DOM items sử dụng các phương pháp tùy chỉnh. renderParameters chứa object với các properties: fromIndex, toIndex, listHeight, topPosition, items | |
| emptyTemplate | string | List item template cho trường hợp list data rỗng | |
| dynamicHeightBufferSize | number | 1 | Cho phép kiểm soát buffer size trên Virtual Lists với chiều cao không cố định (Khi height parameter là function) |
| cache | boolean | true | Vô hiệu hóa hoặc cho phép DOM cache cho các list items đã render. Trong trường hợp này, mỗi item sẽ chỉ được hiển thị một lần và tất cả các thao tác tiếp theo sẽ được thực hiện với phần tử DOM. |
| updatableScroll | boolean | Is the current device updates and handles scroll events during scroll. By default (if not specified) it is "false" for all iOS devices with iOS version less than 8. | |
| setListHeight | boolean | true | Sẽ đặt chiều cao trên list block nếu true |
| showFilteredItemsOnly | boolean | false | Chỉ hiển thị các items đã được lọc |
| scrollableParentEl | HTMLElement | string | Virtual list's scrollable parent. Nếu không được chỉ định, sẽ là <div className="page-content"> element | |
| Searchbar | |||
| searchByItem | function(query, item, index) | unction tìm kiếm sử dụng bởi Searchbar, nhận vào search query, item và item index. Nếu items thỏa mãn điều kiện tìm kiếm trả về true, ngược lại trả về false false | |
| searchAll | function(query, items) | Function tìm kiếm sử dụng bởi Searchbar, nhận vào search query và mảng tất cả items. Cần return mảng các indexes của các items thỏa mãn điều kiện tìm kiếm |
Virtual List Methods & Properties
VirtualList instance cung cấp các methods và properties:
| Properties | |
|---|---|
| virtualList.items | Array chứa list items |
| virtualList.filteredItems | Array chứa các items đã được lọc (sau khi sử dụng ".filterItems" method) |
| virtualList.domCache | Object với các dom items đã cached |
| virtualList.params | Parameters khơi tạo list |
| virtualList.el | List block element |
| virtualList.$el | ZMP dom instance của list block element |
| virtualList.pageContentEl | Parent "page-content" element |
| virtualList.$pageContentEl | ZMP dom instance của parent "page-content" element |
| virtualList.currentFromIndex | Chỉ mục của item đầu tiên đang được render |
| virtualList.currentToIndex | Chỉ mục của item cuối cùng đang được render |
| virtualList.reachEnd | Thuộc tính Boolean. Bằng true nếu chỉ mục được hiển thị cuối cùng là chỉ mục cuối cùng của tất cả items |
| Methods | |
| virtualList.filterItems(indexes); | Lọc virtual list bằng mảng các chỉ mục của items cần hiển thị |
| virtualList.resetFilter(); | Vô hiệu hóa filter và hiển thị tất cả items |
| virtualList.appendItem(item); | Thêm item vào cuối virtual list |
| virtualList.appendItems(items); | Thêm mảng các items mới vào cuối virtual list |
| virtualList.prependItem(item); | Thêm item vào đầu virtual list |
| virtualList.prependItems(items); | Thêm mảng các items vào đầu virtual list |
| virtualList.replaceItem(index, item); | Thay thế item thông qua index |
| virtualList.replaceAllItems(items); | Thay thế tất cả items với mảng các items mới |
| virtualList.moveItem(oldIndex, newIndex); | Thay đổi vị trí của item |
| virtualList.insertItemBefore(index, item); | Thêm một item vào trước một item với index được chỉ định |
| virtualList.deleteItem(index); | Xóa item có index được chỉ định |
| virtualList.deleteItems(indexes); | Xóa các items được chỉ định thông qua mảng các index |
| virtualList.deleteAllItems(); | Xóa tất cả items |
| virtualList.clearCache(); | Xóa cached DOM elements |
| virtualList.destroy(); | Hủy virtual list và gỡ tất cả events |
| virtualList.update(); | Cập nhật virtual list, bao gồm tính toán lại kích thước danh sách và hiển thị lại danh sách ảo |
| virtualList.scrollToItem(index); | Cuộn đến một item cụ thể |
Ví dụ List và Sortable List
Code demo fallback when rendering server side!
Ví dụ Virtual List
Code demo fallback when rendering server side!
Ví dụ về List skeleton
Code demo fallback when rendering server side!