List

Cú pháp

<zmp-list>, <zmp-list-item>

List giúp hiển thị dạng danh sách các zmp-list-item, hay các Input với vai trò như một form

Properties

List Properties

Prop	Type	Default	Description
media-list	boolean	false	Kích hoạt dạng Media List
links-list	boolean	false	Kích hoạt dạng Links List
simple-list	boolean	false	Kích hoạt dạng Simple List
sortable	boolean	false	Kích hoạt dạng Sortable List
sortable-opposite	boolean	false	Renders sortable handler ở vị trí đối diện với vị trí mặc định
sortable-tap-hold	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
sortable-enabled	boolean	false	Cho phép sắp xếp trên Sortable List
sortable-move-elements	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.
inline-labels	boolean	false	Render label dưới dạng inline-style cho Form Inputs
no-chevron	boolean	false	Xóa bỏ "chevron" icon trên các item của Links List
chevron-center	boolean	false	Căn giữa (theo chiều dọc) "chevron" icon trên các item thuộc media list
no-hairlines	boolean	false	Xóa đường viền bao quanh List
no-hairlines-md	boolean	false	Xóa đường viền quanh List đối với MD theme
no-hairlines-ios	boolean	false	Xóa đường viền quanh List đối với IOS theme
no-hairlines-aurora	boolean	false	Xóa đường viền quanh List đối với Aurora theme
no-hairlines-between	boolean	false	Xóa các đường viền giữa các items
no-hairlines-between-md	boolean	false	Xóa các đường viền giữa các items đối với MD theme
no-hairlines-between-ios	boolean	false	Xóa các đường viền giữa các items đối với iOS theme
no-hairlines-between-aurora	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
tab-active	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
virtual-list	boolean	false	Kích hoạt chế độ Virtual List
virtual-list-params	object		Object chứa các Virtual List Parameters
loading	boolean	false	Bật chế độ loading list
skeleton-effect	string		Tên hiệu ứng loading: 'fade', 'pulse' hoặc 'wave'

List Item Properties

Prop	Type	Default	Description
title	string		List item title
subtitle	string		List item subtitle (Chỉ dùng được khi mediaItem = true)
text	string		List item text (Chỉ dùng được khi mediaItem = true)
description	string		Mô tả cho list item
media	string		Danh sách url hình ảnh cho media list item
after	string		Thêm chỉ dẫn cho list item
badge	string | number		List item Badge
badge-color	string		Tùy chỉnh màu sắc cho Badge. Một trong các màu sắc mặc định
media-item	boolean		List item dạng media list item
divider	boolean		Chuyển item thành divider phân cách giữa các list item
group-title	boolean		Chuyển item thành tiêu đề nhóm list item
no-chevron	boolean	false	Xóa icon mũi tên trên item dạng link
chevron-center	boolean	false	Căn giữa icon mũi tên theo chiều cao của list item
tooltip	string		Nội dung của tooltip hiện lên khi click/hover item
tooltip-trigger	string	hover	Xác định điều kiện hiện tooltip trigger. Có thể là hover, click hoặc manual
selected	boolean		Đặt trạng thái của list item thành active
sortable	boolean		Cho phép vô hiệu hóa sắp xếp item (khi set false). Lưu ý, chỉ hoạt động trên item đầu tiên/ cuối cùng của list.
virtual-list-index	number		Cho phép truyền list item index khi sử dụng Virtual List. Hữu ích khi sử dụng Sortable List giúp biết chính xác các index thay đổi
checkbox	boolean	false	Enables checkbox-item
radio	boolean	false	Enables radio-item
radio-icon	string		Cho phép tùy chỉnh vị trí của radio icon ra đầu hoặc cuối của list item. Giá trị hợp lệ start or end. Mặc định vị trí của radio icon là cuối của item với theme IOS, đầu list item với theme md trên android
checked	boolean	false	Xác định giá trị của checkbox/radio input là checked hoặc không
default-checked	boolean		Xác định giá trị mặc định của checkbox/radio input là checked hoặc không, trong trường hợp dùng uncontrolled component
indeterminate	boolean		Xác định trạng thái của checkbox input có đang là không xác định hay không (thường sử dụng với select all)
name	string		Checkbox/radio input name
value	string | number		Checkbox/radio input value
readonly	boolean	false	Kích hoạt chế độ readonly checkbox/radio
disabled	boolean	false	Vô hiệu hóa checkbox/radio
required	boolean	false	Xác định checkbox/radio là required hoặc không
link	boolean | string		Kích hoạt dạng link item, xác định URL trang cần tải.
tab-link	string | boolean		Kích hoạt dạng tab link và CSS selector cụ thể của tab mà item liên kết
tab-link-active	boolean		Xác định trạng thái active của tab mà link liên kết href | string | boolean | # | URL của trang cần tải. Trường hợp href="false" sẽ không thêm href tag vào link element
view	string		CSS selector của View component sẽ tải trang. hoặc current để load trên View component hiện tại.
external	boolean		Cho phép mở các external link
back	boolean		Kích hoạt back navigation link
force	boolean		Buộc tải trang và bỏ qua trang trước đó trong lịch sử (sử dụng cùng với back prop)
reload-current	boolean		Tải lại trang mới
reload-previous	boolean		Tải lại, thay thế các trang trước trong lịch sử với trang mới
reload-all	boolean		Tải trang mới và xóa tất cả các trang trước ra khỏi lịch sử và DOM
reload-detail	boolean		Tải lại Trang Detail trong Master Detail view
animate	boolean		Disables pages animation
transition	string		Tên hiệu ứng chuyển trang (zmp-circle | zmp-cover | zmp-cover-v | zmp-dive | zmp-fade | zmp-flip | zmp-parallax | zmp-push)
ignore-cache	boolean		Bỏ qua caching
route-tab-id	string		Routable Tab id
route-props	object		Thê props sẽ truyền đến route component đích
prevent-router	boolean	false	Nếu true, link sẽ không được xử lý bởi ZMP router
actions-open	string | boolean		CSS selector của action sheet sẽ mở khi người dùng click
actions-close	string | boolean		CSS selector của action sheet sẽ đóng khi người dùng click. Hoặc boolean để đóng action sheet đang mở
popup-open	string | boolean		CSS selector của popup sẽ mở khi click
sheet-open	string | boolean		CSS selector của sheet modal sẽ mở khi click
sheet-close	string | boolean		CSS selector của sheet modal sẽ đóng khi người dùng click. Hoặc boolean để đóng sheet modal đang mở
searchbar-enable	string | boolean		CSS selector của Expandable Searchbar sẽ kích hoạt khi người dùng click. Hoặc boolean để kích hoạt Searchbar tìm thấy đầu tiên
searchbar-disable	string | boolean		CSS selector của Expandable Searchbar sẽ vô hiệu hóa khi người dùng click. Hoặc boolean để vô hiệu hóa Searchbar tìm thấy đầu tiên
searchbar-toggle	string | boolean		CSS selector của Expandable Searchbar sẽ toggle khi người dùng click. Hoặc boolean để toggle Searchbar tìm thấy đầu tiê
searchbar-clear	string | boolean		CSS selector của Expandable Searchbar sẽ xóa dữ liệu khi người dùng click. Hoặc boolean để xóa dữ liệu của Searchbar được tìm thấy đầu tiên

Events

List events

Event	Description
@tab:show	Event sẽ triggered khi trạng thái của List Tab thay đổi thành visible/active
@tab:hide	Event sẽ triggered khi trạng thái của List Tab thay đổi thành invisible/inactive
@submit	Event sẽ triggered khi người dùng submit form (Khi sử dụng form props)
@sortable:enable	Event sẽ triggered khi chế độ sắp xếp là enabled
@sortable:disable	Event sẽ triggered khi chế độ sắp xếp là disabled
@sortable:sort	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
@virtual:itembeforeinsert	Event sẽ triggered trước khi item đựợc thêm vào virtual document fragment
@virtual:itemsbeforeinsert	Event sẽ triggered sau khi DOM list hiện tại đựợc xóa và trước khi document mới được thêm
@virtual:itemsafterinsert	Event sẽ triggered sau khi document fragment mới với các items được thêm
@virtual:beforeclear	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 Item Events

Thêm event handler thông qua các props: on[EventName]

Event	Description
@click	Event sẽ triggered khi người dùng clicks lên list item
@change	Event sẽ triggered khi trạng thai của list item input (radio or checkbox) thay đổi
@taphold	Event triggered khi người dùng thực hiện nhấn giữ lên List Item element. Lưu ý: cần thêm props :touch="{ tapHold: true }" vào <zmp-app> component để kích hoạt tap hold

Slots

List Slots

Slot	Description
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

List Item Slots

Slot	Description
root-start	Element sẽ đuọc chèn vào vị trí đầu tiên của <li\> element
root	Root-end - element sẽ đuọc chèn vào vị trí cuối cùng của <li\> element
content-start	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-content"\> element
content / content-end	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-content"\> element
inner-start	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-inner"\> element
default / inner / inner-end	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-inner"\> element
media	Element sẽ được chèn vào trong <div class="item-media"\> element
before-title	Element sẽ được chèn ngay trước <div class="item-title"\> element
title	Element sẽ được chèn vào trong <div class="item-title"\> element
after-title	Element sẽ được chèn ngay sau <div class="item-title"\> element
subtitle	Element sẽ được chèn vào trong <div class="item-subtitle"\> element
text	Element sẽ được chèn vào trong <div class="item-text"\> element
header	Lement sẽ được chèn vào trong <div class="item-header"\> element
footer	Element sẽ được chèn vào trong <div class="item-footer"\> element
after-start	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-after"\> element
after / after-end	Element sẽ đuọc chèn vào vị trí cuối cùng của <div class="item-after"\> 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 class="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 Instance Methods & Properties

VirtualList instance cung cấp các methods và properties nâng cao để làm việc với virtual list. Để lấy instance từ component <zmp-list>, ta dùng hàm zmp.virtualList.get(el) để lấy instance.

| 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ụ

Code demo fallback when rendering server side!

Code demo fallback when rendering server side!

Code demo fallback when rendering server side!