List

Listは、リストを表示するコンポーネントです。デフォルトでは、ul要素をレンダリングします。

インポート

import {
  List,
  ListItem,
  ListIcon,
  DiscList,
  DecimalList,
} from "@yamada-ui/react"

Copied!

list: 項目のアイコンなしリストのラッパーコンポーネントです。
ListItem: 項目のコンポーネントです。
ListIcon: 項目のアイコンのコンポーネントです。
DiscList: 項目の順序なしリストのラッパーコンポーネントです。
DecimalList: 項目の順序付きリストのラッパーコンポーネントです。

使い方

編集可能な例

<List>
  <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
  <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
  <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
  <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
  <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
</List>

Copied!

順序なしリスト

編集可能な例

<DiscList>
  <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
  <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
  <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
  <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
  <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
</DiscList>

Copied!

順序付きリスト

編集可能な例

<DecimalList>
  <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
  <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
  <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
  <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
  <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
</DecimalList>

Copied!

独自のアイコンを使う

項目に独自のアイコンを使う場合は、ListIconを使用します。

編集可能な例

<List>
  <ListItem>
    <ListIcon as={CircleCheck} color="green.500" />
    よろしければわたしが喜びのダンスを踊りましょうか！
  </ListItem>
  <ListItem>
    <ListIcon as={CircleCheck} color="green.500" />
    お命頂だい!!!　とうっ!!!
  </ListItem>
  <ListItem>
    <ListIcon as={CircleCheck} color="green.500" />
    う…宇宙一のスピードを誇るオ…オレさまのうしろに……
  </ListItem>
  <ListItem>
    <ListIcon as={CircleCheck} color="green.500" />
    オ…オレたちが勝てるわけはなかったはずだ………
  </ListItem>
  <ListItem>
    <ListIcon as={Check} color="green.500" />
    オレは試合場のゴミ拾いみたいなもんかよ…
  </ListItem>
</List>

Copied!

その他のリスト

編集可能な例

<VStack>
  <List styleType="square">
    <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
    <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
    <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
    <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
    <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
  </List>

  <List styleType="circle">
    <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
    <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
    <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
    <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
    <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
  </List>

  <List styleType="lower-alpha" ms="1.2em">
    <ListItem ps="0.2em">
      よろしければわたしが喜びのダンスを踊りましょうか！
    </ListItem>
    <ListItem ps="0.2em">お命頂だい!!!　とうっ!!!</ListItem>
    <ListItem ps="0.2em">
      う…宇宙一のスピードを誇るオ…オレさまのうしろに……
    </ListItem>
    <ListItem ps="0.2em">オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
    <ListItem ps="0.2em">オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
  </List>
</VStack>

Copied!

GitHubでこのページを編集する

前Kbd 次Card