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

Timeline

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

Import

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

Examples

↓
使用例
20yy年m月dd日

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

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

20yy年m月dd日

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

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

20yy年m月dd日

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

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

リサイズ可能 
<Timelines>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
</Timelines>

End, Startの指定

最初と最後の要素にそれぞれisStart、isEndを指定すると、ラインの上下のはみ出しをなくします。

↓
使用例
20yy年m月dd日

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

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

20yy年m月dd日

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

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

20yy年m月dd日

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

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

リサイズ可能 
<Timelines>
  <Timeline isStart>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline isEnd>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
</Timelines>

シェイプの強調

isHighlightedでハイライト表示、shapeColorでシェイプの色を指定できます。

↓
使用例
20yy年m月dd日

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

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

20yy年m月dd日

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

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

20yy年m月dd日

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

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

リサイズ可能 
<Timelines>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline isHighlighted shapeColor='red'>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
  <Timeline>
    <TimelineTime>20yy年m月dd日</TimelineTime>
    <TimelineBody>
      <Text>Lism x.y.z がリリース。</Text>
      <Dummy lang='ja'/>
    </TimelineBody>
  </Timeline>
</Timelines>

アイコンの使用例

↓
使用例
20yy年m月dd日

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

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

20yy年m月dd日

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

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

20yy年m月dd日

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

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

リサイズ可能 
  <Timelines>
    <Timeline>
      <TimelineTime>20yy年m月dd日</TimelineTime>
      <TimelineBody>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </TimelineBody>
    </Timeline>
    <Timeline>
      <TimelineTime>20yy年m月dd日</TimelineTime>
      <TimelineBody>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </TimelineBody>
    </Timeline>
    <Timeline icon='check' isHighlighted shapeColor='red'>
      <TimelineTime>20yy年m月dd日</TimelineTime>
      <TimelineBody>
        <Text>Lism x.y.z がリリース。</Text>
        <Dummy lang='ja'/>
      </TimelineBody>
    </Timeline>
  </Timelines>