Popover

버튼으로 트리거되어 포털에 풍부한 콘텐츠를 표시합니다.

examples/krds/popover-demo.tsx

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/popover.json

사용법

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

구성

다음 조합으로 Popover:

Popover
├── PopoverTrigger
└── PopoverContent

예제

Basic

A simple popover with a header, title, and description.

examples/krds/popover-basic.tsx

import { Button } from "@/components/ui/button"
import {
  Popover,

Align

PopoverContent의 align prop으로 수평 정렬을 제어합니다.

examples/krds/popover-alignments.tsx

import { Button } from "@/components/ui/button"
import {
  Popover,

With Form

A popover with form fields inside.

examples/krds/popover-form.tsx

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/popover-rtl.tsx

"use client"

import {

API 참조

Radix UI Popover 문서를 참고하세요.

Pagination Progress