TimeLine 时间轴

基本用法

  1. <nut-timeline>
  2.     <nut-timelineitem>
  3.         <div slot="title">2020-09-18</div>
  4.         <div class="content">您提交了订单，请等待系统确认</div>
  5.     </nut-timelineitem>
  6.     <nut-timelineitem>
  7.         <div slot="title">2020-09-18</div>
  8.         <div class="content">您提交了订单，请等待系统确认</div>
  9.     </nut-timelineitem>
  10.     <nut-timelineitem>
  11.         <div slot="title">2020-09-18</div>
  12.         <div class="content">您提交了订单，请等待系统确认</div>
  13.     </nut-timelineitem>
  14.     <nut-timelineitem>
  15.         <div slot="title">2020-09-18</div>
  16.         <div class="content">您提交了订单，请等待系统确认</div>
  17.     </nut-timelineitem>
  18. </nut-timeline>

轴点类型

  1. <nut-timeline>
  2.     <nut-timelineitem>
  3.         <div slot="title">2020-09-18</div>
  4.         <div class="content">您提交了订单，请等待系统确认</div>
  5.     </nut-timelineitem>
  6.     <nut-timelineitem pointType="hollow">
  7.         <div slot="title">2020-09-18</div>
  8.         <div class="content">您提交了订单，请等待系统确认</div>
  9.     </nut-timelineitem>
  10.     <nut-timelineitem :pointColor="'#456700'">
  11.         <div slot="title">2020-09-18</div>
  12.         <div class="content">您提交了订单，请等待系统确认</div>
  13.     </nut-timelineitem>
  14.     <nut-timelineitem>
  15.         <div slot="title">2020-09-18</div>
  16.         <div class="content">您提交了订单，请等待系统确认</div>
  17.     </nut-timelineitem>
  18. </nut-timeline>

自定义轴点样式

  1. <nut-timeline>
  2.     <nut-timelineitem>
  3.         <div slot="dot">
  4.             <svg class="icon" width="15" height="15"></svg>
  5.         </div>
  6.         <div slot="title">2020-09-18</div>
  7.         <div class="content">您提交了订单，请等待系统确认</div>
  8.     </nut-timelineitem>
  9.     <nut-timelineitem pointType="hollow">
  10.         <div slot="title">2020-09-18</div>
  11.         <div class="content">您提交了订单，请等待系统确认</div>
  12.     </nut-timelineitem>
  13.     <nut-timelineitem :pointColor="'#456700'">
  14.         <div slot="title">2020-09-18</div>
  15.         <div class="content">您提交了订单，请等待系统确认</div>
  16.     </nut-timelineitem>
  17.     <nut-timelineitem>
  18.         <div slot="title">2020-09-18</div>
  19.         <div class="content">您提交了订单，请等待系统确认</div>
  20.     </nut-timelineitem>
  21. </nut-timeline>

TimeLineItem Props

字段说明类型默认值
pointType轴点样式：circle/hollowStringcircle
pointColor自定义轴点颜色，表示背景的颜色或表示边框颜色；String‘‘

TimeLineItem Slot

字段说明
title时间轴title
dot自定义轴点
无基本内容

TimeLine 时间轴节点 - 图1