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>
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(activity, index) in activities"
|
|
:key="index"
|
|
:icon="activity.icon"
|
|
:type="activity.type"
|
|
:color="activity.color"
|
|
:size="activity.size"
|
|
:hollow="activity.hollow"
|
|
:timestamp="activity.timestamp"
|
|
>
|
|
{{ activity.content }}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { MoreFilled } from '@element-plus/icons-vue'
|
|
|
|
import type { TimelineItemProps } from 'element-plus'
|
|
|
|
interface ActivityType extends Partial<TimelineItemProps> {
|
|
content: string
|
|
}
|
|
|
|
const activities: ActivityType[] = [
|
|
{
|
|
content: 'Custom icon',
|
|
timestamp: '2018-04-12 20:46',
|
|
size: 'large',
|
|
type: 'primary',
|
|
icon: MoreFilled,
|
|
},
|
|
{
|
|
content: 'Custom color',
|
|
timestamp: '2018-04-03 20:46',
|
|
color: '#0bbd87',
|
|
},
|
|
{
|
|
content: 'Custom size',
|
|
timestamp: '2018-04-03 20:46',
|
|
size: 'large',
|
|
},
|
|
{
|
|
content: 'Custom hollow',
|
|
timestamp: '2018-04-03 20:46',
|
|
type: 'primary',
|
|
hollow: true,
|
|
},
|
|
{
|
|
content: 'Default node',
|
|
timestamp: '2018-04-03 20:46',
|
|
},
|
|
]
|
|
</script>
|