Timeline

Timeline component.

Basic Usage

A simple way to define a timeline

• April 12, 2019

  Initialize bin-ui

• April 21, 2019

  Release v1.1.0, added several basic components

• July 24, 2019

  Release v1.5.0, added many form components and common components

• August 23, 2019

  Release v2.0.0, officially implemented table, menu and other components

<template>
  <b-timeline>
    <b-timeline-item>
      <p class="time">April 12, 2019</p>
      <p class="content">Initialize bin-ui</p>
    </b-timeline-item>
    <b-timeline-item>
      <p class="time">April 21, 2019</p>
      <p class="content">Release v1.1.0, added several basic components</p>
    </b-timeline-item>
    <b-timeline-item>
      <p class="time">July 24, 2019</p>
      <p class="content">Release v1.5.0, added many form components and common components</p>
    </b-timeline-item>
    <b-timeline-item>
      <p class="time">August 23, 2019</p>
      <p class="content">Release v2.0.0, officially implemented table, menu and other components</p>
    </b-timeline-item>
  </b-timeline>
</template>

<style scoped>
.time {
  margin: 0 !important;
  font-size: 14px;
  font-weight: bold;
}
.content {
  margin: 0;
  padding: 0 0 0 5px !important;
}
</style>

Set Color

Use various colors to indicate different states. You can use success, info, warning, danger, or a custom color. The default is primary.

Release v1.0

Release v1.5

Bug Fix

Critical Failure

Release v2.0

Milestone Release

<template>
  <b-timeline-item color="primary">Release v1.0</b-timeline-item>
  <b-timeline-item color="info">Release v1.5</b-timeline-item>
  <b-timeline-item color="warning">Bug Fix</b-timeline-item>
  <b-timeline-item color="danger">Critical Failure</b-timeline-item>
  <b-timeline-item color="success">Release v2.0</b-timeline-item>
  <b-timeline-item color="#ff30b5">Milestone Release</b-timeline-item>
</template>

Last Node Setting

Add the pending property to mark the last node

• 发布1.0版本
• 发布1.5版本
• 发布2.0版本
• 持续更New...

<template>
  <b-timeline pending>
    <b-timeline-item>发布1.0版本</b-timeline-item>
    <b-timeline-item>发布1.5版本</b-timeline-item>
    <b-timeline-item>发布2.0版本</b-timeline-item>
    <b-timeline-item>持续更New...</b-timeline-item>
  </b-timeline>
</template>

Custom Node Icon

Defaults to a hollow circle; you can customize the axis point icon

• 正式版上线
• 发布2.0版本
• 发布1.5版本
• 发布1.0版本

<template>
  <b-timeline>
    <b-timeline-item color="success" dot-top="10px">
      <template #dot>
        <b-icon name="heart-fill" size="20"></b-icon>
      </template>
      <span>正式版上线</span>
    </b-timeline-item>
    <b-timeline-item>发布2.0版本</b-timeline-item>
    <b-timeline-item>发布1.5版本</b-timeline-item>
    <b-timeline-item>发布1.0版本</b-timeline-item>
  </b-timeline>
</template>

Timeline Props

Parameter	Description	Type	Options	Default
pending	Specifies whether it is the last node	Boolean	—	false

TimelineItem Props

Parameter	Description	Type	Options	Default
color	Circle color	String	primary,success,info,warning,danger, or custom color value	primary
dot-top	Dot top offset	String	Custom offset from the dot to the top	—

TimelineItem Slot

Name	Description
default	Basic content
dot	Custom timeline dot content