96 lines
2.4 KiB
Markdown
96 lines
2.4 KiB
Markdown
- Home
|
|
- Components
|
|
- Popover
|
|
|
|
# Popover
|
|
|
|
Displays rich content in a portal, triggered by a button.
|
|
|
|
## Props
|
|
|
|
### Popover
|
|
|
|
|
|
Prop Type Default Description
|
|
...Radix props ComponentProps<typeof PopoverPrimitive.Root> - All Radix Popover root props
|
|
|
|
### PopoverContent
|
|
|
|
|
|
Prop Type Default Description
|
|
align 'start' | 'center' | 'end' 'center' Content alignment relative to trigger
|
|
sideOffset number 4 Offset in pixels from the trigger
|
|
...Radix props ComponentProps<typeof PopoverPrimitive.Content> - All Radix content props
|
|
|
|
## Usage
|
|
|
|
```
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline">Open popover</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-80" align="start" onOpenAutoFocus={(e) => {
|
|
e.preventDefault();
|
|
}}>
|
|
<div>
|
|
<div className="space-y-2 mb-2">
|
|
<h4 className="leading-none font-medium">Dimensions</h4>
|
|
<p className="text-muted-foreground text-sm">
|
|
Set the dimensions for the layer.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<FormLayout asChild className="w-2xs" orientation="label-left">
|
|
<label>
|
|
<p className="text-uk-md text-left">Width</p>
|
|
<InputRoot
|
|
id="width"
|
|
defaultValue="300px"
|
|
/>
|
|
</label>
|
|
</FormLayout>
|
|
<FormLayout asChild className="w-2xs" orientation="label-left">
|
|
<label>
|
|
<p className="text-uk-md text-left">Max width</p>
|
|
<InputRoot
|
|
id="maxWidth"
|
|
defaultValue="300px"
|
|
/>
|
|
</label>
|
|
</FormLayout>
|
|
<FormLayout asChild className="w-2xs" orientation="label-left">
|
|
<label>
|
|
<p className="text-uk-md text-left">Height</p>
|
|
<InputRoot
|
|
id="height"
|
|
defaultValue="300px"
|
|
/>
|
|
</label>
|
|
</FormLayout>
|
|
<FormLayout asChild className="w-2xs" orientation="label-left">
|
|
<label>
|
|
<p className="text-uk-md text-left">Max height</p>
|
|
<InputRoot
|
|
id="maxHeight"
|
|
defaultValue="300px"
|
|
/>
|
|
</label>
|
|
</FormLayout>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
### Example
|
|
|
|
```
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start" sideOffset={8}>Content</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|