时间线
时间线可视化一系列链接的事件。
导入 #
import Timeline from 'primevue/timeline';
基础 #
时间线需要一个value来表示事件的集合，以及一个content插槽，它接收一个对象作为参数来返回内容。
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
对齐 #
内容相对于线条的位置由align属性定义。
<Timeline :value="events" class="w-full md:w-80">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
<Timeline :value="events" align="right" class="w-full md:w-80">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
<Timeline :value="events" align="alternate" class="w-full md:w-80">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
相反 #
线条另一侧的附加内容可以使用opposite属性提供。
<Timeline :value="events">
<template #opposite="slotProps">
<small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
</template>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
模板 #
自定义内容和样式标记的示例实现。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
水平 #
时间线方向由layout属性控制，默认是vertical，另一种选择是horizontal。
<Timeline :value="events" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<Timeline :value="events" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<Timeline :value="events" layout="horizontal" align="alternate">
<template #opposite> </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
可访问性 #
屏幕阅读器
时间线使用语义有序列表元素来列出事件。没有强制执行特定的角色，您仍然可以使用任何aria角色和属性，因为任何有效的属性都传递给列表元素。
键盘支持
组件不包含任何交互元素。