タイムライン
タイムラインは、一連の連鎖したイベントを視覚化します。
インポート #
import Timeline from 'primevue/timeline';
基本 #
タイムラインには、イベントのコレクションの値と、パラメータとしてオブジェクトを受け取りコンテンツを返すコンテンツスロットが必要です。
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
配置 #
ラインに対するコンテンツの位置は、配置プロパティで定義されます。
<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>
反対側 #
ラインの反対側の追加コンテンツは、反対側プロパティで提供できます。
<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>
水平 #
タイムラインの向きはレイアウトプロパティで制御され、デフォルトは垂直で、代替として水平があります。
<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の役割と属性を使用できます。
キーボードサポート
コンポーネントにはインタラクティブな要素は含まれていません。