Popover

インポート

import { Popover, PopoverTrigger, PopoverContent } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Popover, PopoverTrigger, PopoverContent } from '@caroainc/ui-components/popover'

基本的な使い方

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">開く</Button>
  </PopoverTrigger>
  <PopoverContent>
    ポップオーバーの内容
  </PopoverContent>
</Popover>

シンプルな例

<Popover>
  <PopoverTrigger>ヒント</PopoverTrigger>
  <PopoverContent>説明文</PopoverContent>
</Popover>

パディングサイズ

padding propでパディングサイズを調整できます。

<PopoverContent padding="none">...</PopoverContent>
<PopoverContent padding="sm">...</PopoverContent>
<PopoverContent padding="md">...</PopoverContent>  {/* デフォルト */}
<PopoverContent padding="lg">...</PopoverContent>

幅

width propで幅を調整できます。個別に幅を指定したい場合はclassName（w-*）で上書きしてください。

<PopoverContent width="auto">...</PopoverContent>
<PopoverContent width="sm">...</PopoverContent>
<PopoverContent width="default">...</PopoverContent>  {/* デフォルト（w-72） */}
<PopoverContent width="lg">...</PopoverContent>

Props

Prop	Type	Default	Description
`open`	`boolean`	`-`	開閉状態（制御コンポーネント）
`onOpenChange`	`(open: boolean) => void`	`-`	開閉変更時のコールバック

PopoverContent

Prop	Type	Default	Description
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	パディングサイズ（none: 0, sm: 8px, md: 16px, lg: 24px）
`width`	`'auto' \| 'sm' \| 'default' \| 'lg'`	`'default'`	幅（auto: 内容に合わせる, sm: 14rem, default: 18rem, lg: 24rem）
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	表示位置
`align`	`'start' \| 'center' \| 'end'`	`'center'`	配置

Popover

On this page