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

List

アイコン部分にデザインを適用できるリストの作成例を紹介します。

Import

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

Usage

Section titled “Usage”
↓
Preview
  • List item 1
  • List item 2
  • List item 3
    • Nested item
    • Nested item
  • List item 1
  • List item 2
  • List item 3
    • Nested item
    • Nested item
  • List item 1
  • List item 2
  • List item 3
<List>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    <Fragment>List item 3</Fragment>
    <ul>
      <li>Nested item</li>
      <li>Nested item</li>
    </ul>
  </li>
</List>
<List variant='check'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    <Fragment>List item 3</Fragment>
    <ul>
      <li>Nested item</li>
      <li>Nested item</li>
    </ul>
  </li>
</List>
<List variant='caret'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</List>