List & ListItem
<List>は<ul>タグを、<ListItem>は<li>タグを出力するLismコンポーネントです。
<List> は <Lism as="ul"> のエイリアス、<ListItem> は <Lism as="li"> のエイリアスです。全ての Lism Props が使用できます。
<List> の as prop: ul(デフォルト) / ol / dl
<ListItem> の as prop: li(デフォルト) / dt / dd
Import
import { List, ListItem } from 'lism-css/react';基本的な使い方
↓
<List>の出力例- リストアイテム 1
- リストアイテム 2
- リストアイテム 3
<List> <ListItem>リストアイテム 1</ListItem> <ListItem>リストアイテム 2</ListItem> <ListItem>リストアイテム 3</ListItem></List>番号付きリスト
as="ol" を指定すると、<ol>タグとして出力されます。
↓
<List as="ol">の出力例- リストアイテム 1
- リストアイテム 2
- リストアイテム 3
<List as="ol"> <ListItem>リストアイテム 1</ListItem> <ListItem>リストアイテム 2</ListItem> <ListItem>リストアイテム 3</ListItem></List>定義リスト
<List as="dl"> と <ListItem as="dt">, <ListItem as="dd"> を組み合わせて、定義リストを作成できます。
↓
<List as="dl">の出力例- 用語 1
- 用語 1 の説明文です。
- 用語 2
- 用語 2 の説明文です。
<List as="dl"> <ListItem as="dt" fw="bold"> 用語 1 </ListItem> <ListItem as="dd">用語 1 の説明文です。</ListItem> <ListItem as="dt" fw="bold"> 用語 2 </ListItem> <ListItem as="dd">用語 2 の説明文です。</ListItem></List>