Neumorphism UI
アクションとオーバーレイ@neumorphism-ui/popover

Popover

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

@neumorphism-ui/popover
Registry JSON

プレビュー

インストール

インストール: popovernpx shadcn@latest add @neumorphism-ui/popover

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

使い方: インストールnpx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/popover

Import

Popover の import コード
"use client";

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

Example

Popover の使用コード
export default function Example() {

  return (<Popover><PopoverTrigger render={<Button />}>{"通知設定"}</PopoverTrigger><PopoverContent><PopoverTitle>{"通知を調整"}</PopoverTitle><PopoverDescription>{"重要な更新だけを受け取り、集中を保ちます。"}</PopoverDescription><PopoverClose render={<Button variant="primary" />}>{"閉じる"}</PopoverClose></PopoverContent></Popover>);
}

API リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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