Popover

Detalles contextuales a demanda. UI no bloqueante. Mantener contexto.

default.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6import { Popover } from '@/components/ui/popover';
7
8const dimensions = [
9  { id: 'width', label: 'Width', defaultValue: '100%' },
10  { id: 'height', label: 'Height', defaultValue: '25px' },
11] as const;
12
13export function Default() {
14  return (
15    <Popover>
16      <Popover.Trigger asChild>
17        <Button variant="outline">Open Popover</Button>
18      </Popover.Trigger>
19      <Popover.Content showClose>
20        <div className="grid gap-4">
21          <div className="space-y-2">
22            <h4 className="leading-none font-medium">Dimensions</h4>
23            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
24          </div>
25          <div className="grid gap-2">
26            {dimensions.map((dim) => (
27              <div key={dim.id} className="grid grid-cols-3 items-center gap-4">
28                <Label htmlFor={dim.id}>{dim.label}</Label>
29                <Input id={dim.id} defaultValue={dim.defaultValue} className="col-span-2" />
30              </div>
31            ))}
32          </div>
33        </div>
34      </Popover.Content>
35    </Popover>
36  );
37}

Instalación

pnpm dlx nachui add popover

Anatomía

1import { Popover } from '@/components/ui/popover';

1<Popover>
2  <Popover.Trigger>Abrir</Popover.Trigger>
3  <Popover.Content>
4    <p>Contenido interactivo acá.</p>
5  </Popover.Content>
6</Popover>

Ejemplos

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6import { Popover } from '@/components/ui/popover';
7
8const dimensions = [
9  { id: 'width', label: 'Width', defaultValue: '100%' },
10  { id: 'height', label: 'Height', defaultValue: '25px' },
11] as const;
12
13export function Default() {
14  return (
15    <Popover>
16      <Popover.Trigger asChild>
17        <Button variant="outline">Open Popover</Button>
18      </Popover.Trigger>
19      <Popover.Content showClose>
20        <div className="grid gap-4">
21          <div className="space-y-2">
22            <h4 className="leading-none font-medium">Dimensions</h4>
23            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
24          </div>
25          <div className="grid gap-2">
26            {dimensions.map((dim) => (
27              <div key={dim.id} className="grid grid-cols-3 items-center gap-4">
28                <Label htmlFor={dim.id}>{dim.label}</Label>
29                <Input id={dim.id} defaultValue={dim.defaultValue} className="col-span-2" />
30              </div>
31            ))}
32          </div>
33        </div>
34      </Popover.Content>
35    </Popover>
36  );
37}

Referencia de API

Prop	Tipo	Por defecto	Descripción
`defaultOpen`	`boolean`	`false`	Estado inicial de apertura.
`open`	`boolean`	—	Estado controlado.
`onOpenChange`	`(open: boolean) => void`	—	Callback cuando cambia el estado de apertura.

Popover.Trigger

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como hijo.

Popover.Content

Prop	Tipo	Por defecto	Descripción
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"bottom"`	Posición relativa al trigger.
`sideOffset`	`number`	`4`	Distancia desde el trigger.
`showClose`	`boolean`	`false`	Muestra un botón de cerrar.
`className`	`string`	—	Clases CSS adicionales.

Popover.Close

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como hijo.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorLabel

SiguienteProgress