Docs
Popover
Popover
Displays rich content in a portal, triggered by a button.
Loading...
<script lang="ts">
import {
Popover,
PopoverTrigger,
PopoverContent
} from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
</script>
<Popover>
<PopoverTrigger asChild let:builder>
<Button builders={[builder]} variant="outline">Open</Button>
</PopoverTrigger>
<PopoverContent class="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 for="width">Width</Label>
<Input id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxWidth">Max. width</Label>
<Input id="maxWidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="height">Height</Label>
<Input id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxHeight">Max. height</Label>
<Input id="maxHeight" value="none" class="col-span-2 h-8" />
</div>
</div>
</div>
</PopoverContent>
</Popover>
<script lang="ts">
import {
Popover,
PopoverTrigger,
PopoverContent
} from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
</script>
<Popover>
<PopoverTrigger asChild let:builder>
<Button builders={[builder]} variant="outline">Open</Button>
</PopoverTrigger>
<PopoverContent class="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 for="width">Width</Label>
<Input id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxWidth">Max. width</Label>
<Input id="maxWidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="height">Height</Label>
<Input id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxHeight">Max. height</Label>
<Input id="maxHeight" value="none" class="col-span-2 h-8" />
</div>
</div>
</div>
</PopoverContent>
</Popover>
Installation
npx shadcn-svelte add popover
Usage
<script lang="ts">
import * as Popover from "$components/ui/popover";
</script>
<Popover.Root>
<Popover.Trigger>Open</Popover.Trigger>
<Popover.Content>Place content for the popover here.</Popover.Content>
</Popover.Root>
On This Page