コンテンツにスキップ
Lism CSS

Timeline

タイムラインの構築例を紹介します。

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Timeline from '@/components/lism/Timeline/index.js';

Examples

Section titled “Examples”
↓
使用例
20yy年m月dd日
Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日
Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日
Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

<Timeline.Root>
  <Timeline.Item>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
</Timeline.Root>

End, Startの指定, シェイプの協調

Section titled “End, Startの指定, シェイプの協調”

最初と最後の要素にそれぞれisStart、isEndを指定すると、ラインの上下のはみ出しをなくします。
また、isHighlightedでハイライト表示、shapeColorでシェイプの色を指定できます。

↓
使用例
20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

<Timeline.Root>
  <Timeline.Item isStart>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
  <Timeline.Item isEnd isHighlighted shapeColor='red'>
    <Timeline.Time>20yy年m月dd日</Timeline.Time>
    <Timeline.Text>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </Timeline.Text>
  </Timeline.Item>
</Timeline.Root>

アイコンの使用例

Section titled “アイコンの使用例”
↓
使用例
20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日

Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

  <Timeline.Root>
    <Timeline.Item icon={{as:MegaphoneSimple, weight:'fill'}}>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Text>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </Timeline.Text>
    </Timeline.Item>
    <Timeline.Item>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Text>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </Timeline.Text>
    </Timeline.Item>
    <Timeline.Item icon='check' isHighlighted shapeColor='red'>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Text>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </Timeline.Text>
    </Timeline.Item>
  </Timeline.Root>

横並び

Section titled “横並び”
↓
使用例
20yy年m月dd日
Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日
Lism x.y.z がリリース。Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

20yy年m月dd日
Lism x.y.z がリリース。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

  <Timeline.Root variant='horizontal'>
    <Timeline.Item isHorizontal isStart>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Title>Lism x.y.z がリリース。</Timeline.Title>
      <Timeline.Text>
        <Dummy lang='ja' />
      </Timeline.Text>
    </Timeline.Item>
    <Timeline.Item isHorizontal>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Title>Lism x.y.z がリリース。Lism x.y.z がリリース。</Timeline.Title>
      <Timeline.Text>
        <Dummy lang='ja' />
      </Timeline.Text>
    </Timeline.Item>
    <Timeline.Item isHorizontal isEnd isHighlighted>
      <Timeline.Time>20yy年m月dd日</Timeline.Time>
      <Timeline.Title>Lism x.y.z がリリース。</Timeline.Title>
      <Timeline.Text>
        <Dummy lang='ja' />
      </Timeline.Text>
    </Timeline.Item>
  </Timeline.Root>