List

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

インポート

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

Copied!

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

使い方

編集可能な例

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

Copied!

順序なしリスト

編集可能な例

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

Copied!

順序付きリスト

編集可能な例

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

Copied!

独自のアイコンを使う

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

編集可能な例

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

Copied!

その他のリスト

編集可能な例

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

Copied!

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

前Kbd 次DataList