Lism CSS
検索

Timeline

このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。

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

Create Component

Timeline(.c--timeline)というコンポーネントを作って利用する例を紹介していきます。

Source Code

ソースコードを手動でコピー&ペーストしてご利用ください。

Import

import { Timeline } from '@lism-css/ui/react';

Usage

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

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

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

↓
使用例
20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

アイコンの使用例

↓
使用例
20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

横並び

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

  <Timeline.Root isHorizontal>
    <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>

© Lism CSS. All rights reserved.

目次