Popover

Displays rich content in a portal, triggered by a button.

Dimensions

Set the dimensions for the layer. 

<Popover>
    <PopoverTrigger><Button variant="outline">Open popover</Button></PopoverTrigger>
    <PopoverContent className="w-80">
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="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 class="grid grid-cols-3 items-center gap-4">
                    <Label htmlFor="maxWidth">Max. width</Label>
                    <Input
                            id="maxWidth"
                            defaultValue="300px"
                            className="col-span-2 h-8"
                    />
                </div>
                <div class="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 class="grid grid-cols-3 items-center gap-4">
                    <Label htmlFor="maxHeight">Max. height</Label>
                    <Input
                            id="maxHeight"
                            defaultValue="none"
                            className="col-span-2 h-8"
                    />
                </div>
            </div>
        </div>
    </PopoverContent>
</Popover>

Installation

uvx --from basic-components components add popover
pipx run --spec basic-components components add popover
pip install basic-components && components add popover
  • Copy Popover components below to your local environment
  • Place them in the components/ui/popover directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Popover>
    <PopoverTrigger><Button variant="outline">Open popover</Button></PopoverTrigger>
    <PopoverContent className="w-80">
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="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 class="grid grid-cols-3 items-center gap-4">
                    <Label htmlFor="maxWidth">Max. width</Label>
                    <Input
                            id="maxWidth"
                            defaultValue="300px"
                            className="col-span-2 h-8"
                    />
                </div>
                <div class="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 class="grid grid-cols-3 items-center gap-4">
                    <Label htmlFor="maxHeight">Max. height</Label>
                    <Input
                            id="maxHeight"
                            defaultValue="none"
                            className="col-span-2 h-8"
                    />
                </div>
            </div>
        </div>
    </PopoverContent>
</Popover>

Attributes

Name Type Default Description
variant String "default" Sets the button style. Available: default, outline, ghost, etc.

Code

{#def
    className: str = "",
#}
<div x-data="{ open: false }" class="{{ className }}">{{ content }}</div>
{#def
    className: str = "",
    sideOffset: int = 4,
#}
<div
    x-show="open"
    @keydown.escape.window="open = false"
    @click.away="open = false"
    x-transition:enter="transition ease-out duration-200"
    x-transition:leave="transition ease-in duration-150"
    x-transition:enter-start="opacity-0 scale-90"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-90"
    class="{{ className }} absolute z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50"
    style="margin-top: {{ sideOffset }}px;"
>
  {{ content }}
</div>
{#def

#}
<div @click="open = !open">
  {{ content }}
</div>