125k

Popover

PreviousNext

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

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

インストール

pnpm dlx shadcn@latest add popover

使い方

import {
  Popover,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
<PopoverTrigger>
  <Button variant="outline">Open Popover</Button>
  <Popover>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </Popover>
</PopoverTrigger>

構成

Popover を構築するには、次の構成を使用します。

PopoverTrigger
├── Button
└── Popover

基本

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

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

配置

Popover の placement プロパティを使用して、水平方向の配置を制御します。

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

フォーム付き

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

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

RTL

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

"use client"

import {

API リファレンス

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