概要

テーマ

...(以下同様、英語を日本語に翻訳する。コンポーネント名は基本的にカタカナで表記する。例：Overview -> 概要、Color -> カラー、Dark mode -> ダークモード、Typography -> タイポグラフィ、Spacing -> スペース、Breakpoints -> ブレイクポイント、Radius -> 角丸、Shadows -> 影、Cursors -> カーソル）

レイアウト

...(Box -> ボックス、Flex -> フレックス、Grid -> グリッド、Container -> コンテナ、Section -> セクション)

タイポグラフィ

...(Text -> テキスト、Heading -> 見出し、Blockquote -> 引用、Code -> コード、Em -> 強調、Kbd -> キーボード入力、Link -> リンク、Quote -> 引用符、Strong -> 太字)

コンポーネント

...(Alert Dialog -> アラートダイアログ、Aspect Ratio -> アスペクト比、Avatar -> アバター、Badge -> バッジ ... Tooltip -> ツールチップ)

ユーティリティ

ダイアログ

ページの上に表示されるモーダルダイアログウィンドウ。

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

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Edit profile</Button>
  </Dialog.Trigger>

  <Dialog.Content maxWidth="450px">
    <Dialog.Title>Edit profile</Dialog.Title>
    <Dialog.Description size="2" mb="4">
      Make changes to your profile.
    </Dialog.Description>

    <Flex direction="column" gap="3">
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Name
        </Text>
        <TextField.Root
          defaultValue="Freja Johnsen"
          placeholder="Enter your full name"
        />
      </label>
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Email
        </Text>
        <TextField.Root
          defaultValue="freja@example.com"
          placeholder="Enter your email"
        />
      </label>
    </Flex>

    <Flex gap="3" mt="4" justify="end">
      <Dialog.Close>
        <Button variant="soft" color="gray">
          Cancel
        </Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button>Save</Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>

APIリファレンス

このコンポーネントは、ダイアログプリミティブからプロパティを継承します。

このダイアログはモーダルパターンを中心に設計されているため、 modalプロパティは使用できません。

ルート

ダイアログのすべてのパーツを含みます。

トリガー

ダイアログを開くコントロールをラップします。

コンテンツ

ダイアログのコンテンツを含みます。このコンポーネントは、div要素に基づいています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	デフォルト値なし
`align`	`"start" \| "center"`	`"center"`
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"3"`
`width`	`Responsive<string>`	デフォルト値なし
`minWidth`	`Responsive<string>`	デフォルト値なし
`maxWidth`	`Responsive<string>`	`"600px"`
`height`	`Responsive<string>`	デフォルト値なし
`minHeight`	`Responsive<string>`	デフォルト値なし
`maxHeight`	`Responsive<string>`	デフォルト値なし

<Flex gap="4" align="center">
  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">Size 1</Button>
    </Dialog.Trigger>
    <Dialog.Content size="1" maxWidth="300px">
      <Text as="p" trim="both" size="1">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">Size 2</Button>
    </Dialog.Trigger>
    <Dialog.Content size="2" maxWidth="400px">
      <Text as="p" trim="both" size="2">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">Size 3</Button>
    </Dialog.Trigger>
    <Dialog.Content size="3" maxWidth="500px">
      <Text as="p" trim="both" size="3">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button variant="soft">Size 4</Button>
    </Dialog.Trigger>
    <Dialog.Content size="4">
      <Text as="p" trim="both" size="4">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Dialog.Content>
  </Dialog.Root>
</Flex>

インセットコンテンツ付き

インセットコンポーネントを使用して、コンテンツをダイアログの側面に揃えます。

<Dialog.Root>
  <Dialog.Trigger>
    <Button>View users</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Users</Dialog.Title>
    <Dialog.Description>
      The following users have access to this project.
    </Dialog.Description>

    <Inset side="x" my="5">
      <Table.Root>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          <Table.Row>
            <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
            <Table.Cell>danilo@example.com</Table.Cell>
            <Table.Cell>Developer</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
            <Table.Cell>zahra@example.com</Table.Cell>
            <Table.Cell>Admin</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </Inset>

    <Flex gap="3" justify="end">
      <Dialog.Close>
        <Button variant="soft" color="gray">
          Close
        </Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>

前へデータリスト

次へドロップダウンメニュー

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

概要

テーマ