mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
8b7d8eacf5
* feat(components): [timeline] support item-placement prop * feat: update * feat: update * feat: update * feat: update * feat: update * test: update * feat: update * feat: update * feat: update * docs: update version number * feat: update * feat: revert padding * feat: update * chore: format * docs: update version number * chore: use ExtractPublicPropTypes * Update docs/en-US/component/timeline.md Co-authored-by: rzzf <cszhjh@gmail.com> * style: use content-box * docs: add an example * style: add padding-right: 0 * docs: remove max-width: 600px * feat: add alternate-left and alternate-right * feat: modify the value of mode --------- Co-authored-by: rzzf <cszhjh@gmail.com>
42 lines
935 B
Vue
42 lines
935 B
Vue
<template>
|
|
<el-radio-group v-model="mode">
|
|
<el-radio-button label="start" value="start" />
|
|
<el-radio-button label="alternate" value="alternate" />
|
|
<el-radio-button label="alternate-reverse" value="alternate-reverse" />
|
|
<el-radio-button label="end" value="end" />
|
|
</el-radio-group>
|
|
|
|
<el-timeline class="mt-4" :mode="mode">
|
|
<el-timeline-item
|
|
v-for="(activity, index) in activities"
|
|
:key="index"
|
|
:timestamp="activity.timestamp"
|
|
>
|
|
{{ activity.content }}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
import type { TimelineProps } from 'element-plus'
|
|
|
|
const activities = [
|
|
{
|
|
content: 'Event start',
|
|
timestamp: '2018-04-15',
|
|
},
|
|
{
|
|
content: 'Approved',
|
|
timestamp: '2018-04-13',
|
|
},
|
|
{
|
|
content: 'Success',
|
|
timestamp: '2018-04-11',
|
|
},
|
|
]
|
|
|
|
const mode = ref<TimelineProps['mode']>('start')
|
|
</script>
|