Timeline

Display information content in chronological or reverse order.

Basic usage

Timeline basic usage

No ReverseReverse

Node 1

2023-10-10

Node 2

2023-10-01

Node 3

2023-09-30

Custom dot

When the dotType is solid or hollow, can add colors to dot by setting this attribute dotColor. At the same time, you can directly pass in DOM node to customize node styles through slot#dot. Priority is higher than dotColor and dotType

Node 1

2023-09-30

Node 2

2023-10-01

Node 3

2023-10-02

Custom axis

Timeline provide three different axis: solid、dashed and dotted.default is solid.

Node 1

The content of node 1

2023-09-30

Node 2

The content of node 2

2023-10-01

Node 3

The content of node 3

2023-10-02

Pending

When the task state is happening and the recording is still in progress, ghost nodes can be used to represent the current time node.

Node 1

2023-09-30

Node 2

2023-10-01

Custom pending

Timeline pivot point can be customized through slot#pending-dot.

Node 1

2023-09-30

Node 2

2023-10-01

Label Position

The position of the label text can be set by labelPosition.

samerelative

Node 1

2023-09-30

Node 2

2023-10-01

Node 3

2023-10-02

Vertical

The vertical time axis.

leftalternateright

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-08

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-09

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-10

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="mode"
    @change="handleModeChange"
  >
    <tu-radio label="left">left</tu-radio>
    <tu-radio label="alternate">alternate</tu-radio>
    <tu-radio label="right">right</tu-radio>
  </tu-radio-group>

  <tu-timeline :mode="mode">
    <tu-timeline-item label="2023-08">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-09">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-10">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
  </tu-timeline>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const mode = ref('left');

const handleModeChange = (_mode: string) => {
  mode.value = _mode;
};
</script>

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="mode"
    @change="handleModeChange"
  >
    <tu-radio label="left">left</tu-radio>
    <tu-radio label="alternate">alternate</tu-radio>
    <tu-radio label="right">right</tu-radio>
  </tu-radio-group>

  <tu-timeline :mode="mode">
    <tu-timeline-item label="2023-08">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-09">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-10">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
  </tu-timeline>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const mode = ref('left');

const handleModeChange = (_mode: string) => {
  mode.value = _mode;
};
</script>

Horizontal

The horizontal time axis.

topalternatebottom

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-08

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-09

Tu View Plus

A vue 3.x Neumorphism UI design for web

2023-10

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="mode"
    @change="handleModeChange"
  >
    <tu-radio label="top">top</tu-radio>
    <tu-radio label="alternate">alternate</tu-radio>
    <tu-radio label="bottom">bottom</tu-radio>
  </tu-radio-group>

  <tu-timeline direction="horizontal" :mode="mode">
    <tu-timeline-item label="2023-08">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-09">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-10">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
  </tu-timeline>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const mode = ref('top');

const handleModeChange = (_mode: string) => {
  mode.value = _mode;
};
</script>

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="mode"
    @change="handleModeChange"
  >
    <tu-radio label="top">top</tu-radio>
    <tu-radio label="alternate">alternate</tu-radio>
    <tu-radio label="bottom">bottom</tu-radio>
  </tu-radio-group>

  <tu-timeline direction="horizontal" :mode="mode">
    <tu-timeline-item label="2023-08">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-09">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
    <tu-timeline-item label="2023-10">
      <div style="margin-bottom: 6px">Tu View Plus</div>
      <div style="font-size: 12px">A vue 3.x Neumorphism UI design for web</div>
    </tu-timeline-item>
  </tu-timeline>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const mode = ref('top');

const handleModeChange = (_mode: string) => {
  mode.value = _mode;
};
</script>

Custom Label

You can customize labels through the label slot

Time Schedule 1

Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.

Time Schedule 2

Time Schedule 3

<template>
  <tu-timeline>
    <tu-timeline-item>
      Time Schedule 1
      <template #label>
        <tu-card effect="up" class="mt-2 mb-4">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
    <tu-timeline-item>
      Time Schedule 2
      <template #label>
        <tu-card effect="up" class="mt-2 mb-4">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
    <tu-timeline-item>
      Time Schedule 3
      <template #label>
        <tu-card effect="up" class="mt-2">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
  </tu-timeline>
</template>

<template>
  <tu-timeline>
    <tu-timeline-item>
      Time Schedule 1
      <template #label>
        <tu-card effect="up" class="mt-2 mb-4">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
    <tu-timeline-item>
      Time Schedule 2
      <template #label>
        <tu-card effect="up" class="mt-2 mb-4">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
    <tu-timeline-item>
      Time Schedule 3
      <template #label>
        <tu-card effect="up" class="mt-2">
          Stay organized, reduce stress, and accomplish personal and business
          goals with a daily schedule template. It’s a simple yet effective
          time-management tool for any daily activity, whether you’re managing a
          busy work schedule, academic assignments or family chores.
        </tu-card>
      </template>
    </tu-timeline-item>
  </tu-timeline>
</template>

Timeline API

Timeline Attributes

Name	Description	Type	Default
reverse	Whether reverse order	`Boolean`	false
direction	Timeline direction	`String`	vertical
mode	The display mode of Timeline	`String`	left
pending	Whether to display ghost nodes. When set to true, only ghost nodes are displayed. When passed to ReactNode, it will be displayed as node content.	`Boolean` `String`	-
label-position	Position of label text	`String`	same

Timeline Slots

Name	Description
dot	Custom dot

Timeline-Item API

Timeline-Item Attributes

Name	Description	Type	Default
dot-color	Dot color	`String`	-
dot-type	Dot type	`String`	default
line-type	Line type	`String`	solid
line-color	Line Color	`String`	-
label	Label text	`String`	-
position	Item position	`String`	-

Timeline-Item Slots

Name	Description
dot	Custom dot
label	Custom label

Timeline ​

Basic usage ​

Custom dot ​

Custom axis ​

Pending ​

Custom pending ​

Label Position ​

Vertical ​

Horizontal ​

Custom Label ​

Timeline API ​

Timeline Attributes ​

Timeline Slots ​

Timeline-Item API ​

Timeline-Item Attributes ​

Timeline-Item Slots ​

Timeline

Basic usage

Custom dot

Custom axis

Pending

Custom pending

Label Position

Vertical

Horizontal

Custom Label

Timeline API

Timeline Attributes

Timeline Slots

Timeline-Item API

Timeline-Item Attributes

Timeline-Item Slots