タイムライン

v-timelineは時系列の情報を綺麗に表示したいときに便利です。

使い方

最も単純な形式の v-timeline は、少なくとも1つの v-timeline-item を含む垂直タイムラインを表示します。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

props

slots

sass

以下に、簡単な例から複雑な例まで示します。

The small prop allows alternate styles to provide a unique design.

条件に応じて v-timeline-itemのドット内のアイコンをカスタマイズできます。

reversepropを使用して、タイムライン項目の方向を反転できます。これはデフォルトモードと denseモードの両方で機能します。

v-timeline-itemの中にv-cardを置くと、カードの横にCaret(吹き出し) が表示されます。

denseタイムラインは、すべてのコンテンツを右に配置します。この例では v-alert がカードを置き換えて、異なるデザインを提供します。

oppositeスロットにより、向かい側にレイヤーを追加してカスタマイズできます。

iconスロットとv-avatarを使用して、アバターをドットに挿入します。

色付きのドットで、タイムラインを読みやすくする視覚的なブレークポイントを作成します。

Modular components allow you to create highly customized solutions that just work.

準備はいいですか？以下から続きが読めます。