Nhảy tới nội dung

step

Cập nhật lần cuối vào

steps là component dùng để tạo các bước trên multi-step form.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

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ínhKiểu dữ liệuGiá trị mặc địnhBắt buộcMô tả
classNamestring""Custom class cho component
stylestring""Custom inline style cho component
direction'horizontal' | 'vertical'Hướng của steps menu
activeIndexnumber | nullIndex của step hiện tại
failIndexnumber | nullIndex của step bị bỏ qua, step chưa hoàn thành hoặc lỗi
itemsArray<{ 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
inactiveColorstring'rgba(0, 0, 0, 0.1)'Màu của line và milestone khi step inactive
activeColorstring'#1a94ff'Màu của line và milestone khi step active
milestoneErrorColorstring'#ff424f'Màu của milestone khi step được đánh dấu error(index === failIndex)
milestoneSizestring'16px'Size của milestone
reverseVerticalbooleanfalseĐả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'
}
]
}
});