step
steps
là component dùng để tạo các bước trên multi-step form.
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/navigation/step/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/navigation/step/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Cài đặt tini-ui
:
$> yarn add @tiki.vn/tini-ui
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Bắt buộc | Mô tả |
---|---|---|---|---|
className | string | "" | Custom class cho component | |
style | string | "" | Custom inline style cho component | |
direction | 'horizontal' | 'vertical' | ✓ | Hướng của steps menu | |
activeIndex | number | null | ✓ | Index của step hiện tại | |
failIndex | number | null | Index của step bị bỏ qua, step chưa hoàn thành hoặc lỗi | ||
items | Array<{ label?: string; sub?:string }> | ✓ | Danh sách các step. Bạn có thể truyền label hoặc sub rỗng và sử dụng custom slot để chỉnh sửa item như ví dụ trên | |
inactiveColor | string | 'rgba(0, 0, 0, 0.1)' | Màu của line và milestone khi step inactive | |
activeColor | string | '#1a94ff' | Màu của line và milestone khi step active | |
milestoneErrorColor | string | '#ff424f' | Màu của milestone khi step được đánh dấu error(index === failIndex) | |
milestoneSize | string | '16px' | Size của milestone | |
reverseVertical | boolean | false | Đảo ngược hướng của các vertical steps theo chiều bắt đầu từ dưới lên trên |
Sample Code
index.txml
<view class="container">
<steps
className="demo-steps-class"
activeIndex="{{activeIndex}}"
direction="vertical"
failIndex="{{failIndex}}"
items="{{items}}"
activeColor="green"
milestoneSize="30px"
milestoneErrorColor="yellow"
>
<view slot="label_2" style="color: green; font-weight: bold;">label custom with slot</view>
<view slot="sub_4">custom <text style="color: green;"> sub </text> with slot component here; custom <text style="color: green;"> sub </text> with slot component here; </view>
</steps>
</view>
index.js
Page({
data: {
activeIndex: 2,
failIndex: 1,
size: 0,
items: [
{
label: 'Step 1',
sub: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. It was popularised in the 1960s with the release of Letraset PgeMaker including versions of Lorem Ipsum."
},
{
// item này không có label, label sẽ được render từ <view slot="label_2" ... />
sub: 'sub'
},
{
label: 'Step 3',
sub: 'sub'
},
{
label: 'Step 4'
// item này không có sub, sub sẽ được render từ <view slot="sub_4" ... />
},
{
label: 'Step 5',
sub: 'sub'
}
]
}
});