概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（テーマ以下のナビゲーション項目は、既存の翻訳を維持）

レイアウト

（レイアウト以下のナビゲーション項目は、既存の翻訳を維持）

タイポグラフィ

（タイポグラフィ以下のナビゲーション項目は、既存の翻訳を維持）

コンポーネント

（コンポーネント以下のナビゲーション項目は、既存の翻訳を維持。「Alert Dialog」は「アラートダイアログ」など、必要に応じてより自然な日本語にする。）

ユーティリティ

（ユーティリティ以下のナビゲーション項目は、既存の翻訳を維持。「Accessible Icon」は「アクセシブルアイコン」など、必要に応じてより自然な日本語にする。）

データリスト

メタデータをキーと値のペアのリストとして表示します。

ソースコードを表示問題を報告プレイグラウンドで表示

ステータス: 承認済み
ID: u_2J89JSA4GJ
名前: Vlad Moroz
メールアドレス: vlad@workos.com
会社: WorkOS

<DataList.Root>
  <DataList.Item align="center">
    <DataList.Label minWidth="88px">Status</DataList.Label>
    <DataList.Value>
      <Badge color="jade" variant="soft" radius="full">
        Authorized
      </Badge>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">ID</DataList.Label>
    <DataList.Value>
      <Flex align="center" gap="2">
        <Code variant="ghost">u_2J89JSA4GJ</Code>
        <IconButton
          size="1"
          aria-label="Copy value"
          color="gray"
          variant="ghost"
        >
          <CopyIcon />
        </IconButton>
      </Flex>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Name</DataList.Label>
    <DataList.Value>Vlad Moroz</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Email</DataList.Label>
    <DataList.Value>
      <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Company</DataList.Label>
    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

API リファレンス

このコンポーネントは dl 要素に基づいており、共通マージンプロップをサポートしています。

ルート

データリストのすべてのパーツを含みます。

プロパティ	型	デフォルト
`orientation`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	デフォルト値なし

アイテム

キーと値のペアをラップします。

プロパティ	型	デフォルト
`align`	`Responsive<enum>`	デフォルト値なし

ラベル

キーと値のペアのキーを含みます。

プロパティ	型	デフォルト
`width`	`Responsive<string>`	デフォルト値なし
`minWidth`	`Responsive<string>`	デフォルト値なし
`maxWidth`	`Responsive<string>`	デフォルト値なし
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

値

キーと値のペアの値を含みます。

例

方向

orientation プロパティを使用して、データリストのレイアウト方法を変更します。

名前: Vlad Moroz
メールアドレス: vlad@workos.com
会社: WorkOS

<DataList.Root orientation={{ initial: 'vertical', sm: 'horizontal' }}>
  <DataList.Item>
    <DataList.Label minWidth="88px">Name</DataList.Label>
    <DataList.Value>Vlad Moroz</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Email</DataList.Label>
    <DataList.Value>
      <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Company</DataList.Label>
    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

サイズ

size プロパティを使用して、データリストのサイズを変更します。

名前: Vlad Moroz
メールアドレス: vlad@workos.com
会社: WorkOS

名前: Vlad Moroz
メールアドレス: vlad@workos.com
会社: WorkOS

名前: Vlad Moroz
メールアドレス: vlad@workos.com
会社: WorkOS

<Flex direction="column" gap="6">
  <DataList.Root size="1">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="2">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="3">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>

色

ラベルパーツの color プロパティを使用して、特定の色を割り当てます。

名前: インディゴ
名前: シアン
名前: オレンジ
名前: クリムゾン

<DataList.Root orientation="vertical">
  <DataList.Item>
    <DataList.Label color="indigo">Name</DataList.Label>
    <DataList.Value>Indigo</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="cyan">Name</DataList.Label>
    <DataList.Value>Cyan</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="orange">Name</DataList.Label>
    <DataList.Value>Orange</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="crimson">Name</DataList.Label>
    <DataList.Value>Crimson</DataList.Value>
  </DataList.Item>
</DataList.Root>

ハイコントラスト

highContrast プロパティを使用して、背景とのコントラストを上げます。

名前: インディゴ
名前: シアン
名前: オレンジ
名前: クリムゾン

名前: インディゴ
名前: シアン
名前: オレンジ
名前: クリムゾン

<Flex gap="9">
  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo">Name</DataList.Label>
      <DataList.Value>Indigo</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="cyan">Name</DataList.Label>
      <DataList.Value>Cyan</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="orange">Name</DataList.Label>
      <DataList.Value>Orange</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="crimson">Name</DataList.Label>
      <DataList.Value>Crimson</DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Indigo</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="cyan" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Cyan</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="orange" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Orange</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="crimson" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Crimson</DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>

前へコンテキストメニュー

次へダイアログ

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