list-item
List item là component được sử dụng để hiển thị một item trong list.
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/data-visualization/list/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/data-visualization/list/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Cài đặt tini-ui
:
Để sử dụng list item bạn cần phải cài đặt thư viện tini-ui.
$> yarn add @tiki.vn/tini-ui
Chi tiết
Mỗi một list item sẽ có các thành phần như hình vẽ dưới đây
Trong đó prefix
, suffix
, default
, afterTitle
, afterUpperSubtitle
, afterLowerSubTitle
, additionContent
là các UI component
có thể được tuỳ chỉnh bằng cách sử dụng <slot>
với tên tương ứng.
Còn thumb
, upperTitle
, lowerTitle
và arrow
là các UI property có thể tuỳ chỉnh bằng cách truyền vào
property của <list-item>
.
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
padding | boolean | false | Nếu cờ được bật, list-item sẽ được bao ngoài bởi một phần padding. Chi tiết phần padding này vui lòng xem file Figma của Design System |
class | string | custom class để thay đổi thuộc tính cho list-item | |
thumb | URL | url cuả thumb image. Nếu thumb không được truyền vào, thumb image sẽ không hiển thị. | |
thumbSize | number | size của image. Trường này bắt buộc phải truyền nếu như truyền vào thumb | |
upperSubtitle | string | no | Giá trị của upperSubtitle |
lowerSubtitle | string | no | Giá trị của lowerSubtitle |
titlePosition | enum('top', 'middle', 'bottom') | 'top' | Vị trí của title. Nếu là 'top' thì slot <default> sẽ được render trên đầu của upperSubtitle . Nếu là middle thì <default> được render ở giữa upperSubtitle và lowerSubtitle . Nếu là bottom thì <default> được render ở dưới lowerSubtitle |
arrow | boolean | false | Nếu cờ được bật, thì sẽ render arrow icon ở bên phải của <list-item> . |
iconSize | number | 20px | size của icon |
disabled | boolean | false | Nếu cờ được bật, <list-item> là không thể click vào |
onClick | event | Hàm để xử lý sự kiện click vào |
Sample Code
Khai báo sử dụng trong file .json
{
"defaultTitle": "List",
"usingComponents": {
"list-item": "@tiki.vn/tini-ui/es/list/list-item/index"
}
}
Sử dụng trong txml
<template name="header">
<view class="page-list-header">
<view class="page-list-header-title">Usage</view>
<view class="page-list-header-content">Lists are used to display name/value pairs, action and information.</view>
</view>
</template>
<template name="list-content-with-suffix-and-prefix">
<view class="page-list-content-block">
<view class="page-list-content-block-title">Content with Prefix & Suffix</view>
<list-item arrow upperSubtitle="Description"
thumb="https://uat.tikicdn.com/ts/miniapp/8f/73/72/47a128fa0f759f1fca0b37bbc487d5f1.png" thumbSize="40px">
<view>Label</view>
<view slot="suffix">
<view class="text-title text-regular">CTA message</view>
</view>
<view slot="prefix">
<icon type="location" size="24" color="#808089" />
</view>
</list-item>
<list-item upperSubtitle="Description"
thumb="https://uat.tikicdn.com/ts/miniapp/8f/73/72/47a128fa0f759f1fca0b37bbc487d5f1.png" thumbSize="40px">
<view>Label</view>
<view slot="suffix">
<button size="small" class="page-list-item-button">Button</button>
</view>
<view slot="prefix">
<icon type="location" size="24" color="#808089" />
</view>
</list-item>
<list-item arrow upperSubtitle="Description">
<view>Label</view>
<view slot="prefix">
<icon type="location" size="24" color="#808089" />
</view>
</list-item>
</view>
</template>
<view class="page page-list">
<template is="header" />
<view class="page-list-content">
<view class="page-list-content-title">Variants</view>
<template is="list-content-with-suffix-and-prefix" />
</view>
</view>
Khai báo style với tcss
.page-list-header {
background-color: var(--white);
padding: var(--space-stack-small);
margin-bottom: var(--space-stack-2x-small);
}
.page-list-header-title {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
line-height: var(--font-height-large);
}
.page-list-header-content {
margin-top: var(--space-stack-2x-small);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-base);
line-height: var(--font-height-base);
}
.page-list-content {
padding: var(--space-stack-small);
}
.page-list-content-title {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
line-height: var(--font-height-large);
margin-bottom: var(--space-stack-medium);
}
.page-list-content-block {
background-color: var(--white);
padding: var(--space-stack-medium);
padding-bottom: var(--space-stack-large);
border-radius: var(--radius-rounded-8px, 8px);
margin-bottom: var(--space-stack-medium);
border: 1px solid var(--gray20);
}
.page-list-content-block-title {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
line-height: var(--font-height-base);
margin-bottom: var(--space-stack-2x-small);
}
.page-list-content-block button {
border-radius: var(--radius-rounded-4px, 4px);
}
.text-title {
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
line-height: var(--font-height-base);
color: var(--text-list-primary, var(--gray100));
}
.text-bold {
font-weight: var(--font-weight-bold);
}
.text-regular {
font-weight: var(--font-weight-regular);
}
Đoạn code trên sẽ tạo ra giao diện như sau