List Item
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 | |
badgeColor | string | Tùy chỉnh màu sắc cho Badge. Một trong các màu sắc mặc định | |
mediaItem | 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 | |
groupTitle | boolean | Chuyển item thành tiêu đề nhóm list item | |
noChevron | boolean | false | Xóa icon mũi tên trên item dạng link |
chevronCenter | 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 | |
tooltipTrigger | 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. | |
virtualListIndex | 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 |
radioIcon | 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 |
defaultChecked | 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. | |
tabLink | string | boolean | Kích hoạt dạng tab link và CSS selector cụ thể của tab mà item liên kết | |
tabLinkActive | 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) | |
reloadCurrent | boolean | Tải lại trang mới | |
reloadPrevious | boolean | Tải lại, thay thế các trang trước trong lịch sử với trang mới | |
reloadAll | 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 | |
reloadDetail | 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) | |
ignoreCache | boolean | Bỏ qua caching | |
routeTabId | string | Routable Tab id | |
routeProps | object | Thê props sẽ truyền đến route component đích | |
preventRouter | boolean | false | Nếu true , link sẽ không được xử lý bởi ZMP router |
actionsOpen | string | boolean | CSS selector của action sheet sẽ mở khi người dùng click | |
actionsClose | string | boolean | CSS selector của action sheet sẽ đóng khi người dùng click. Hoặc boolean để đóng action sheet đang mở | |
popupOpen | string | boolean | CSS selector của popup sẽ mở khi click | |
sheetOpen | string | boolean | CSS selector của sheet modal sẽ mở khi click | |
sheetClose | string | boolean | CSS selector của sheet modal sẽ đóng khi người dùng click. Hoặc boolean để đóng sheet modal đang mở | |
searchbarEnable | 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 | |
searchbarDisable | 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 | |
searchbarToggle | 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ê | |
searchbarClear | 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 |
List Item Events
Thêm event handler thông qua các props: on[EventName]
Event | Prop | Description |
---|---|---|
click | onClick | Event sẽ triggered khi người dùng clicks lên list item |
change | onChange | Event sẽ triggered khi trạng thai của list item input (radio or checkbox) thay đổi |
tapHold | onTapHold | 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 App component để kích hoạt tap hold |
List Item Slots
List Item React component (<ListItem/>
) has additional slots for custom elements:
- 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 className="item-content"\>
element - content / content-end - element sẽ đuọc chèn vào vị trí cuối cùng của
<div className="item-content"\>
element - inner-start - element sẽ đuọc chèn vào vị trí cuối cùng của
<div className="item-inner"\>
element - default / inner / inner-end - element sẽ đuọc chèn vào vị trí cuối cùng của
<div className="item-inner"\>
element - media - element sẽ được chèn vào trong
<div className="item-media"\>
element - before-title - element sẽ được chèn ngay trước
<div className="item-title"\>
element - title - element sẽ được chèn vào trong
<div className="item-title"\>
element - after-title - element sẽ được chèn ngay sau
<div className="item-title"\>
element - subtitle - element sẽ được chèn vào trong
<div className="item-subtitle"\>
element - text - element sẽ được chèn vào trong
<div className="item-text"\>
element - header -element sẽ được chèn vào trong
<div className="item-header"\>
element - footer - element sẽ được chèn vào trong
<div className="item-footer"\>
element - after-start - element sẽ đuọc chèn vào vị trí cuối cùng của
<div className="item-after"\>
element - after / after-end - element sẽ đuọc chèn vào vị trí cuối cùng của
<div className="item-after"\>
element
<List mediaList>
<ListItem
link='/home/'
title='Item Title'
subtitle='Item Subtitle'
text='Text'
after='Read more'
>
<img src='path-to-my-image.jpg' slot='media' />
<div slot='root-start'>Root Start</div>
<div slot='root'>Root End</div>
<div slot='content-start'>Content Start</div>
<div slot='content'>Content End</div>
<div slot='media-start'>Media Start</div>
<div slot='media'>Media</div>
<span slot='after-start'>After Start</span>
<span slot='after'>After End</span>
<div slot='inner-start'>Inner Start</div>
<div slot='inner'>Inner End</div>
<div slot='before-title'>Before Title</div>
<div slot='after-title'>After Title</div>
</ListItem>
</List>;
{
/* Renders to: */
}
<div className='list media-list'>
<ul>
<li>
<div>Root Start</div>
<a href='/home/' className='item-link'>
<div className='item-content'>
<div>Content Start</div>
<div className='item-media'>
<img src='path-to-my-image.jpg' />
</div>
<div className='item-inner'>
<div>Inner Start</div>
<div className='item-title-row'>
<div>Before Title</div>
<div className='item-title'>Item Title</div>
<div>After Title</div>
<div className='item-after'>
<span>After Start</span>
<span>Read more</span>
<span>After End</span>
</div>
</div>
<div className='item-subtitle'>Item Subtitle</div>
<div className='item-text'>Text</div>
<div>Inner End</div>
</div>
<div>Content End</div>
</div>
</a>
<div>Root End</div>
</li>
</ul>
</div>;
Ví dụ
Code demo fallback when rendering server side!