コンポーネント
Popover
ボタンで開く、ポータルにリッチなコンテンツを表示します。
import {Button,Input,Label,Popover,PopoverContent,PopoverTrigger,} from "@murasakijs/ui";export function PopoverDemo() {return ( <Popover> <PopoverTrigger asChild> <Button variant="outline">Open popover</Button> </PopoverTrigger> <PopoverContent className="w-80"> <div className="grid gap-4"> <div className="space-y-2"> <h4 className="font-medium leading-none">Dimensions</h4> <p className="text-sm text-muted-foreground"> Set the dimensions for the layer. </p> </div> <div className="grid gap-2"> <div className="grid grid-cols-3 items-center gap-4"> <Label htmlFor="width">Width</Label> <Input id="width" defaultValue="100%" className="col-span-2 h-8" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <Label htmlFor="height">Height</Label> <Input id="height" defaultValue="25px" className="col-span-2 h-8" /> </div> </div> </div> </PopoverContent> </Popover>);}使い方
import { Popover, PopoverContent, PopoverTrigger } from "@murasakijs/ui";<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
Popover | ルートプリミティブ。open・defaultOpen・onOpenChange・modal を受け取ります。 |
PopoverTrigger | ポップオーバーを開く要素です。asChild に対応しています。 |
PopoverAnchor | トリガーの代わりに位置合わせの基準にする、任意の要素です。 |
PopoverContent | ポップアップ本体。align(デフォルト "center")と sideOffset(デフォルト 4)を受け取ります。 |
すべてのサブコンポーネントは Radix UI の Popover
プリミティブをラップし、それ以外の props はすべてそのまま渡されます。