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

List

アイコンを使った装飾リストの作成例を紹介します。

Create Component

Section titled “Create Component”

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

Source Code

Section titled “Source Code”
ソースコードを手動でコピー&ペーストしてご利用ください。

Import

Section titled “Import”
 import jsx 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 3
  • 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 class='-bd:b -bdc:divider' style='--bds:dashed'>List item 1</li>
  <li class='-bd:b -bdc:divider' style='--bds:dashed'>List item 2</li>
  <li class='-bd:b -bdc:divider' style='--bds:dashed'>
    <Fragment>List item 3</Fragment>
    <ul>
      <li>Nested item</li>
      <li>Nested item</li>
    </ul>
  </li>
</List>
<List
  iconC='var(--purple)'
  iconImg={`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"/></svg>')`}
>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</List>