DataList

DataListは、データ項目のリストを表示するために使用されます。

インポート

import {
  DataList,
  DataListDescription,
  DataListItem,
  DataListTerm,
} from "@yamada-ui/react"

Copied!

DataList: 子要素(DataListItem)を表示するラッパーコンポーネントです。
DataListItem: 項目のコンポーネントです。
DataListTerm: 項目の用語を表示するコンポーネントです。
DataListDescription: 項目の説明を表示するコンポーネントです。

使い方

編集可能な例

<DataList col={2} w="fit-content">
  <DataListItem>
    <DataListTerm>白石うらら</DataListTerm>
    <DataListDescription>入れ替わりの魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>小田切寧々</DataListTerm>
    <DataListDescription>虜の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>大塚芽子</DataListTerm>
    <DataListDescription>思念（テレパシー）の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>猿島マリア</DataListTerm>
    <DataListDescription>未来視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>滝川ノア</DataListTerm>
    <DataListDescription>過去視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>飛鳥美琴</DataListTerm>
    <DataListDescription>透明の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>西園寺リカ</DataListTerm>
    <DataListDescription>記憶操作の魔女</DataListDescription>
  </DataListItem>
</DataList>

Copied!

itemsを使用せず、orientationを"horizontal"に設定している場合は、colに列数を設定する必要があります。

または、itemsを設定することでDataListItemを省略することができます。

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    { description: "入れ替わりの魔女", term: "白石うらら" },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return <DataList items={items} w="fit-content" />

Copied!

バリアントを変更する

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    { description: "入れ替わりの魔女", term: "白石うらら" },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return (
  <VStack alignItems="start">
    <DataList variant="subtle" items={items} />

    <Separator />

    <DataList variant="bold" items={items} />

    <Separator />

    <DataList variant="grid" items={items} />
  </VStack>
)

Copied!

サイズを変更する

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    { description: "入れ替わりの魔女", term: "白石うらら" },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return (
  <VStack alignItems="start">
    <DataList size="sm" items={items} />

    <Separator />

    <DataList size="md" items={items} />

    <Separator />

    <DataList size="lg" items={items} />
  </VStack>
)

Copied!

方向を変更する

方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトは、"horizontal"です。

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    { description: "入れ替わりの魔女", term: "白石うらら" },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return (
  <VStack alignItems="start">
    <DataList items={items} orientation="horizontal" />

    <Separator />

    <DataList items={items} orientation="vertical" />
  </VStack>
)

Copied!

複数の用語を表示する

複数の用語を表示する場合は、termに配列を設定します。

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    { description: "入れ替わりの魔女", term: ["白石うらら", "清集院桃子"] },
    { description: "虜の魔女", term: ["小田切寧々", "紺野つばさ"] },
    {
      description: "思念（テレパシー）の魔女",
      term: ["大塚芽子", "萌黄ことり"],
    },
    { description: "未来視の魔女", term: ["猿島マリア", "筑紫愛子"] },
    { description: "過去視の魔女", term: ["滝川ノア", "姫川そら"] },
    { description: "透明の魔女", term: ["飛鳥美琴", "菊池アカネ"] },
    { description: "記憶操作の魔女", term: ["西園寺リカ", "虹野晴子"] },
  ],
  [],
)

return <DataList w="fit-content" items={items} />

Copied!

編集可能な例

<DataList w="fit-content" orientation="vertical">
  <DataListItem>
    <DataListTerm>白石うらら</DataListTerm>
    <DataListTerm>清集院桃子</DataListTerm>
    <DataListDescription>入れ替わりの魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>小田切寧々</DataListTerm>
    <DataListTerm>紺野つばさ</DataListTerm>
    <DataListDescription>虜の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>大塚芽子</DataListTerm>
    <DataListTerm>萌黄ことり</DataListTerm>
    <DataListDescription>思念（テレパシー）の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>猿島マリア</DataListTerm>
    <DataListTerm>筑紫愛子</DataListTerm>
    <DataListDescription>未来視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>滝川ノア</DataListTerm>
    <DataListTerm>姫川そら</DataListTerm>
    <DataListDescription>過去視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>飛鳥美琴</DataListTerm>
    <DataListTerm>菊池アカネ</DataListTerm>
    <DataListDescription>透明の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>西園寺リカ</DataListTerm>
    <DataListTerm>虹野晴子</DataListTerm>
    <DataListDescription>記憶操作の魔女</DataListDescription>
  </DataListItem>
</DataList>

Copied!

複数の説明を表示する

複数の説明を表示する場合は、descriptionに配列を設定します。

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    {
      description: ["入れ替わりの魔女", "絶望的味覚音痴"],
      term: "白石うらら",
    },
    { description: ["虜の魔女", "得意教科は自称全教科"], term: "小田切寧々" },
    {
      description: ["思念（テレパシー）の魔女", "若干腐女子の気がある"],
      term: "大塚芽子",
    },
    {
      description: ["未来視の魔女", "服のセンスが独特な弟がいる"],
      term: "猿島マリア",
    },
    {
      description: ["過去視の魔女", "数々の問題を起こしている"],
      term: "滝川ノア",
    },
    { description: ["透明の魔女", "サディストの気がある"], term: "飛鳥美琴" },
    {
      description: ["記憶操作の魔女", "学校でもノーパンで過ごしている"],
      term: "西園寺リカ",
    },
  ],
  [],
)

return <DataList w="fit-content" items={items} />

Copied!

編集可能な例

<DataList w="fit-content" orientation="vertical">
  <DataListItem>
    <DataListTerm>白石うらら</DataListTerm>
    <DataListDescription>入れ替わりの魔女</DataListDescription>
    <DataListDescription>絶望的味覚音痴</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>小田切寧々</DataListTerm>
    <DataListDescription>虜の魔女</DataListDescription>
    <DataListDescription>得意教科は自称全教科</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>大塚芽子</DataListTerm>
    <DataListDescription>思念（テレパシー）の魔女</DataListDescription>
    <DataListDescription>若干腐女子の気がある</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>猿島マリア</DataListTerm>
    <DataListDescription>未来視の魔女</DataListDescription>
    <DataListDescription>服のセンスが独特な弟がいる</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>滝川ノア</DataListTerm>
    <DataListDescription>過去視の魔女</DataListDescription>
    <DataListDescription>数々の問題を起こしている</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>飛鳥美琴</DataListTerm>
    <DataListDescription>透明の魔女</DataListDescription>
    <DataListDescription>サディストの気がある</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>西園寺リカ</DataListTerm>
    <DataListDescription>記憶操作の魔女</DataListDescription>
    <DataListDescription>学校でもノーパンで過ごしている</DataListDescription>
  </DataListItem>
</DataList>

Copied!

用語をカスタマイズする

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    {
      description: "入れ替わりの魔女",
      term: "白石うらら",
      termProps: { color: "primary" },
    },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return (
  <DataList
    w="fit-content"
    items={items}
    termProps={{ textDecoration: "line-through" }}
  />
)

Copied!

編集可能な例

<DataList w="fit-content" col={2}>
  <DataListItem>
    <DataListTerm color="primary">白石うらら</DataListTerm>
    <DataListDescription>入れ替わりの魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>小田切寧々</DataListTerm>
    <DataListDescription>虜の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>大塚芽子</DataListTerm>
    <DataListDescription>思念（テレパシー）の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>猿島マリア</DataListTerm>
    <DataListDescription>未来視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>滝川ノア</DataListTerm>
    <DataListDescription>過去視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>飛鳥美琴</DataListTerm>
    <DataListDescription>透明の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>西園寺リカ</DataListTerm>
    <DataListDescription>記憶操作の魔女</DataListDescription>
  </DataListItem>
</DataList>

Copied!

説明をカスタマイズする

編集可能な例

const items = useMemo<DataListProps["items"]>(
  () => [
    {
      description: "入れ替わりの魔女",
      term: "白石うらら",
      descriptionProps: { color: "primary" },
    },
    { description: "虜の魔女", term: "小田切寧々" },
    { description: "思念（テレパシー）の魔女", term: "大塚芽子" },
    { description: "未来視の魔女", term: "猿島マリア" },
    { description: "過去視の魔女", term: "滝川ノア" },
    { description: "透明の魔女", term: "飛鳥美琴" },
    { description: "記憶操作の魔女", term: "西園寺リカ" },
  ],
  [],
)

return (
  <DataList
    w="fit-content"
    items={items}
    descriptionProps={{ textDecoration: "line-through" }}
  />
)

Copied!

編集可能な例

<DataList w="fit-content" col={2}>
  <DataListItem>
    <DataListTerm>白石うらら</DataListTerm>
    <DataListDescription color="primary">入れ替わりの魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>小田切寧々</DataListTerm>
    <DataListDescription>虜の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>大塚芽子</DataListTerm>
    <DataListDescription>思念（テレパシー）の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>猿島マリア</DataListTerm>
    <DataListDescription>未来視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>滝川ノア</DataListTerm>
    <DataListDescription>過去視の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>飛鳥美琴</DataListTerm>
    <DataListDescription>透明の魔女</DataListDescription>
  </DataListItem>

  <DataListItem>
    <DataListTerm>西園寺リカ</DataListTerm>
    <DataListDescription>記憶操作の魔女</DataListDescription>
  </DataListItem>
</DataList>

Copied!

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

前List 次Card