Chuyển tới nội dung chính

List Item

List Item Properties

PropTypeDefaultDescription
titlestringList item title
subtitlestringList item subtitle (Chỉ dùng được khi mediaItem = true)
textstringList item text (Chỉ dùng được khi mediaItem = true)
descriptionstringMô tả cho list item
mediastringDanh sách url hình ảnh cho media list item
afterstringThêm chỉ dẫn cho list item
badgestring | numberList item Badge
badgeColorstringTùy chỉnh màu sắc cho Badge. Một trong các màu sắc mặc định
mediaItembooleanList item dạng media list item
dividerbooleanChuyển item thành divider phân cách giữa các list item
groupTitlebooleanChuyển item thành tiêu đề nhóm list item
noChevronbooleanfalseXóa icon mũi tên trên item dạng link
chevronCenterbooleanfalseCăn giữa icon mũi tên theo chiều cao của list item
tooltipstringNội dung của tooltip hiện lên khi click/hover item
tooltipTriggerstringhoverXác định điều kiện hiện tooltip trigger. Có thể là hover, click hoặc manual
selectedbooleanĐặt trạng thái của list item thành active
sortablebooleanCho 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.
virtualListIndexnumberCho 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
checkboxbooleanfalseEnables checkbox-item
radiobooleanfalseEnables radio-item
radioIconstringCho 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
checkedbooleanfalseXác định giá trị của checkbox/radio input là checked hoặc không
defaultCheckedbooleanXá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
indeterminatebooleanXá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)
namestringCheckbox/radio input name
valuestring | numberCheckbox/radio input value
readonlybooleanfalseKích hoạt chế độ readonly checkbox/radio
disabledbooleanfalseVô hiệu hóa checkbox/radio
requiredbooleanfalseXác định checkbox/radio là required hoặc không
linkboolean | stringKích hoạt dạng link item, xác định URL trang cần tải.
tabLinkstring | booleanKích hoạt dạng tab link và CSS selector cụ thể của tab mà item liên kết
tabLinkActivebooleanXá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
viewstringCSS selector của View component sẽ tải trang. hoặc current để load trên View component hiện tại.
externalbooleanCho phép mở các external link
backbooleanKích hoạt back navigation link
forcebooleanBuộc tải trang và bỏ qua trang trước đó trong lịch sử (sử dụng cùng với back prop)
reloadCurrentbooleanTải lại trang mới
reloadPreviousbooleanTải lại, thay thế các trang trước trong lịch sử với trang mới
reloadAllbooleanTải trang mới và xóa tất cả các trang trước ra khỏi lịch sử và DOM
reloadDetailbooleanTải lại Trang Detail trong Master Detail view
animatebooleanDisables pages animation
transitionstringTên hiệu ứng chuyển trang (zmp-circle | zmp-cover | zmp-cover-v | zmp-dive | zmp-fade | zmp-flip | zmp-parallax | zmp-push)
ignoreCachebooleanBỏ qua caching
routeTabIdstringRoutable Tab id
routePropsobjectThê props sẽ truyền đến route component đích
preventRouterbooleanfalseNếu true, link sẽ không được xử lý bởi ZMP router
actionsOpenstring | booleanCSS selector của action sheet sẽ mở khi người dùng click
actionsClosestring | booleanCSS selector của action sheet sẽ đóng khi người dùng click. Hoặc boolean để đóng action sheet đang mở
popupOpenstring | booleanCSS selector của popup sẽ mở khi click
sheetOpenstring | booleanCSS selector của sheet modal sẽ mở khi click
sheetClosestring | booleanCSS selector của sheet modal sẽ đóng khi người dùng click. Hoặc boolean để đóng sheet modal đang mở
searchbarEnablestring | booleanCSS 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
searchbarDisablestring | booleanCSS 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
searchbarTogglestring | booleanCSS selector của Expandable Searchbar sẽ toggle khi người dùng click. Hoặc boolean để toggle Searchbar tìm thấy đầu tiê
searchbarClearstring | booleanCSS 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]

EventPropDescription
clickonClickEvent sẽ triggered khi người dùng clicks lên list item
changeonChangeEvent sẽ triggered khi trạng thai của list item input (radio or checkbox) thay đổi
tapHoldonTapHoldEvent 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!