Neumorphism UI

Popover

クイック設定など、近くのトリガーに結び付いた小さな操作パネルに使います。

プレビュー

通知設定パネル

タイトル、短い説明、閉じるボタンを備えたパネルを開きます。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/popover

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

通知設定パネル

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/popover
Registry JSON

使い方

PopoverTrigger と PopoverContent を組み合わせ、タイトルか名前を付けます。短い設定や説明を入れ、明示的に閉じる場合は PopoverClose を追加します。

"use client";

import { Button } from "@/components/ui/button";
import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button />}>Project details</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Team workspace</PopoverTitle>
        <PopoverDescription>Eight members are collaborating.</PopoverDescription>
        <PopoverClose render={<Button />}>Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

API リファレンス

ボタンに隣接して文脈を保つ設定パネル。 PopoverTitle と説明を提供し、キーボードで閉じられることを確認します。

コンポーネントプロパティ型デフォルト説明
Popoveropen / defaultOpenboolean—制御状態または初期状態を指定します。
PopoverContentside / alignPositioner.Props—画面境界を考慮した位置または間隔を設定します。
PopoverTriggerrenderReact.ReactElement | function—既存の要素、イベント、ref を合成します。

アクセシビリティ

  • 01

    PopoverTitle と説明を提供し、キーボードで閉じられることを確認します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。