timeline 时间轴
- 属性说明
- 示例
  - 代码示例

timeline 时间轴

解释：时间轴组件，可配置时间轴内容，时间轴状态以及自定义图标。适用于信息展示，并可放置在页面的任何位置。

属性说明

属性名	类型	必填	默认值	说明
status	String	否	wait	时间轴状态，类型包括：wait、finished、success、error，每个类型对应不同的icon图标以及时间轴展现样式
title	String	否		时间轴标题
desc	String	否		时间轴副标题
descStyle	String	否		时间轴副标题样式
icon	String	否		自定义 icon 名称
iconColor	String	否		自定义 icon 颜色
timeline-class	String	否		提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴外层样式
item-tail-class	String	否		提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴轴线样式
content-title-class	String	否		提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴标题样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

<view class="wrap">
    <view class="content">
        <view class="card-panel">
            <view class="mode-title">
                <view class="mode-title-line-left"></view>
                <view class="mode-title-text">单条信息样式</view>
                <view class="mode-title-line-right"></view>
            </view>
            <view class="comp-wrap">
                <smt-timeline
                    s-for="item, index in options"
                    status="{{item.status}}"
                    title="{{item.title}}"
                    desc="{{item.desc}}"
                    has-tail="{{item.hasTail}}"
                    icon-color="{{item.iconColor}}"
                    timeline-class="comp-timeline"
                    desc-style="
                        {{index === options.length - 1 ? 'font-weight: 700;' : ''}}
                        {{item.status === 'error' ? 'color: #f7534f' : ''}}
                    "
                >
                    {{item.info}}
                </smt-timeline>
            </view>
        </view>
        <view class="card-panel">
            <view class="mode-title">
                <view class="mode-title-line-left"></view>
                <view class="mode-title-text">多条信息样式</view>
                <view class="mode-title-line-right"></view>
            </view>
            <view class="comp-wrap">
                <smt-timeline
                    s-for="item, index in options2"
                    status="{{item.status}}"
                    desc="{{item.desc}}"
                    has-tail="{{item.hasTail}}"
                    icon-color="{{item.iconColor}}"
                    timeline-class="comp-timeline"
                    desc-style="{{
                        index === options.length - 1
                        ? 'font-weight: 700;'
                        : ''
                    }}"
                >
                    <view
                        class="comp-info-wrap"
                        s-for="descInfo in item.descInfo"
                    >
                        <view class="comp-info">
                            {{descInfo.info}}
                        </view>
                        <view class="comp-title">
                            {{descInfo.title}}
                        </view>
                    </view>
                </smt-timeline>
            </view>
        </view>
    </view>
</view>