125k

Popover

PreviousNext

ボタンによってトリガーされて、ポータルにリッチコンテンツを表示します。

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

インストール

pnpm dlx shadcn@latest add popover

使用法

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

基本

ヘッダー、タイトル、説明を含むシンプルなポップオーバー。

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

整列

PopoverContent の align プロップを使用して、水平方向の配置を制御します。

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

フォーム付き

内部にフォームフィールドを含むポップオーバー。

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import {

API リファレンス

詳細については、Radix UI Popover ドキュメントを参照してください。