Bỏ qua đến nội dung
1.6k

Popover

Một bảng điều khiển nổi được gắn với một bộ kích hoạt dành cho các công cụ chọn ngày, bộ lọc và biểu mẫu nhúng — với phong cách viền và bóng theo trường phái tân thô mộc.

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

Popover hiển thị nội dung phong phú trong một panel nổi neo vào trigger của nó — mở khi bấm, đóng khi bấm ra ngoài hoặc nhấn Esc. Được xây dựng trên thành phần Base UI Popover và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

  • Biểu mẫu nội tuyến — đổi tên một mục, đặt kích thước hoặc chỉnh một tùy chọn mà không cần mở cả một dialog.
  • Bộ chọn ngày và màu — neo một lịch hoặc bảng màu ngay vào ô nhập của nó.
  • Bộ lọc trên thanh công cụ và bảng — gom các checkbox và khoảng giá trị vào sau một trigger nhỏ gọn.

Cài đặt

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/popover.json
npx shadcn@latest add https://neobrutalism.com/r/base/popover.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/popover.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/popover.json

Cài đặt các phụ thuộc sau:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Sao chép và dán đoạn mã sau vào dự án của bạn.

components/ui/popover.tsx
"use client"

import * as React from "react"
import { Popover as PopoverPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded border-2 bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="popover-header"
      className={cn("flex flex-col gap-0.5 text-sm", className)}
      {...props}
    />
  )
}

function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
  return (
    <div
      data-slot="popover-title"
      className={cn("font-medium", className)}
      {...props}
    />
  )
}

function PopoverDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="popover-description"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

export {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
}

Cập nhật các đường dẫn import cho phù hợp với thiết lập dự án của bạn.

Cách dùng

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

Kết hợp

Dùng cách kết hợp sau để xây dựng một Popover:

Popover
├── PopoverTrigger
└── PopoverContent

Ví dụ

Cơ bản

Một popover đơn giản với phần đầu, tiêu đề và mô tả.

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

Căn chỉnh

Dùng prop align trên PopoverContent để kiểm soát việc căn chỉnh theo chiều ngang.

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

Với biểu mẫu

Một popover có các trường biểu mẫu bên trong.

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

RTL

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import {

Khả năng truy cập

Popover tuân theo mẫu Dialog của WAI-ARIA ở dạng không modal: trigger mang aria-haspopup="dialog", aria-expanded và aria-controls, còn panel render với role="dialog" — focus chuyển vào bên trong khi mở và trở về trigger khi đóng.

Tương tác bàn phím:

PhímHành động
Space / EnterMở hoặc đóng popover từ trigger
Tab / Shift + TabChuyển focus qua các phần tử nhận focus trong panel
EscĐóng popover và trả focus về trigger

Tham chiếu API

Xem tài liệu Base UI Popover.