Steps

手順を示すレイアウトの構築例を紹介します。

Import

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

 import Steps from '@/components/lism/Steps/index.js';

Usage

↓

使用例

Step.1

手順1のタイトル

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

Step.2

手順2のタイトル

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroy, Foo の取り組み。

Step.3

手順3のタイトル.長いテキストのテスト、ステップタイトル。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

リサイズ可能

<Steps.Root>
  <Steps.Item>
    <Steps.Head tag='h3' num='1'>
      <>手順1のタイトル</>
    </Steps.Head>
    <Steps.Body>
      <Dummy lang='ja' length='s' />
    </Steps.Body>
  </Steps.Item>

  <Center>
    <Icon icon={ArrowFatLinesDown} weight='fill' fz='2xl' />
  </Center>

  <Steps.Item>
    <Steps.Head tag='h3' num='2'>
      <>手順2のタイトル</>
    </Steps.Head>
    <Steps.Body>
      <Dummy lang='ja' length='s' />
      <Dummy lang='ja' length='codes' />
    </Steps.Body>
  </Steps.Item>

  <Center>
    <Icon icon={ArrowFatLinesDown} weight='fill' fz='2xl' />
  </Center>

  <Steps.Item>
    <Steps.Head tag='h3' num='3'>
      <>手順3のタイトル</>
    </Steps.Head>
    <Steps.Body>
      <Dummy lang='ja' length='l' />
    </Steps.Body>
  </Steps.Item>
</Steps.Root>