Popover
Mẫu chuẩnLớp nổi không chặn trang. Không màn che. Không mũi tên.
Playground
Panel được portal, nên nó theo theme của trang. Trigger theo brand đang chọn.
import { Button, Popover, PopoverContent, PopoverTrigger } from "@nexobox/ui";
<Popover>
<PopoverTrigger asChild>
<Button type="button">Ghi chú</Button>
</PopoverTrigger>
<PopoverContent>
<p>Ghi chú ngắn.</p>
</PopoverContent>
</Popover>Khi nào sử dụng
Nên dùng
Giao diện ngắn neo vào một nút: ghi chú, menu nhỏ, xác nhận nhẹ.
Tránh dùng
Chọn một giá trị thì dùng Select. Việc phải xong trước khi dùng tiếp trang thì dùng Dialog. Panel sát đáy thì dùng Sheet. Không dùng làm tooltip.
Anatomy
PopoverTrigger bọc Button. PopoverContent là panel. PopoverClose là nút thật. Không có mũi tên vì kit không có token mũi tên.
States
Chỉ còn trigger.
Vòng focus của Button. Không chỉ dựa vào màu.
Disabled đặt trên Button. Không mở.
Bấm nút Ghi chú để mở. Không có empty, loading, hay invalid. Không có size.
Design tokens
Panel đọc --nf-semantic-surface-raised, --nf-semantic-border-subtle, --nf-component-overlay-shadow, --nf-component-panel-radius, --nf-motion-overlay-in. Không có token --nf-component-popover-*.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| PopoverTrigger asChild | — | Bọc Button thật. Tên lấy từ chữ của nút hoặc aria-label. |
| PopoverContent | align start | Panel. Không chặn trang. |
| PopoverClose | — | Nút thật để đóng. |