ポップオーバー

ボタンによってトリガーされる、リッチコンテンツを表示するためのフローティング要素です。

ソースコードを見る問題を報告する Playgroundで見る

<Popover.Root>
  <Popover.Trigger>
    <Button variant="soft">
      <ChatBubbleIcon width="16" height="16" />
      Comment
    </Button>
  </Popover.Trigger>
  <Popover.Content width="360px">
    <Flex gap="3">
      <Avatar
        size="2"
        src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
        fallback="A"
        radius="full"
      />
      <Box flexGrow="1">
        <TextArea placeholder="Write a comment…" style={{ height: 80 }} />
        <Flex gap="3" mt="3" justify="between">
          <Flex align="center" gap="2" asChild>
            <Text as="label" size="2">
              <Checkbox />
              <Text>Send to group</Text>
            </Text>
          </Flex>

          <Popover.Close>
            <Button size="1">Comment</Button>
          </Popover.Close>
        </Flex>
      </Box>
    </Flex>
  </Popover.Content>
</Popover.Root>

APIリファレンス

このコンポーネントは、Popoverプリミティブからpropsを継承します。

Root

ポップオーバーのすべての部分を含みます。

トリガー

ポップオーバーを開くコントロールをラップします。

コンテンツ

開いたポップオーバーにレンダリングされるコンテンツを含みます。このコンポーネントは、div要素に基づいています。

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

クローズ

ポップオーバーを閉じるコントロールをラップします。

例

サイズ

ポップオーバーのサイズを制御するには、sizeプロパティを使用します。これは、コンテンツのpaddingとborder-radiusに影響を与えます。ポップオーバーのサイズを制御するには、width / minWidth / maxWidthとheight / minHeight / maxHeightプロパティと組み合わせて使用します。

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

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

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

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

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

ポップオーバーの側面とコンテンツを揃えるには、Insetコンポーネントを使用します。

<Popover.Root>
  <Popover.Trigger>
    <Button variant="soft">
      <Share2Icon width="16" height="16" />
      Share image
    </Button>
  </Popover.Trigger>
  <Popover.Content width="360px">
    <Grid columns="130px 1fr">
      <Inset side="left" pr="current">
        <img
          src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?&auto=format&fit=crop&w=400&q=80"
          style={{ objectFit: 'cover', width: '100%', height: '100%' }}
        />
      </Inset>

      <div>
        <Heading size="2" mb="1">
          Share this image
        </Heading>
        <Text as="p" size="2" mb="4" color="gray">
          Minimalistic 3D rendering wallpaper.
        </Text>

        <Flex direction="column" align="stretch">
          <Popover.Close>
            <Button size="1" variant="soft">
              <Link1Icon width="16" height="16" />
              Copy link
            </Button>
          </Popover.Close>
        </Flex>
      </div>
    </Grid>
  </Popover.Content>
</Popover.Root>

前Inset

次Progress

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

ポップオーバー