Component
Separator
Một đường mỏng chia nội dung thành các nhóm: các phần của một card, các mục trong toolbar, các link trong footer. Mặc định horizontal; vertical giữa các mục trên một hàng. label đặt một chữ ở giữa, như chữ hoặc giữa hai cách đăng nhập.
Xem trước
import { Separator } from "@/components/ui/separator"
<div className="flex w-full max-w-xs flex-col gap-md">
<p className="text-sm text-text-primary">Tài khoản</p>
<Separator />
<p className="text-sm text-text-primary">Thanh toán</p>
</div>Cách dùng
Khi nào dùng
- Chia nội dung thành các nhóm ở chỗ chỉ khoảng cách không cho thấy một nhóm kết thúc đâu: các phần của một card, các nhóm mục menu.
- Chia các mục trên một hàng, như link trong footer hoặc button trong toolbar.
Khi nào không dùng
- Khung nội dung cả bốn phía. Dùng Card.
- Một đường dưới mọi hàng của danh sách hoặc bảng; các hàng có viền riêng.
- Đặt tên một nhóm. Viết một heading.
Biến thể
orientation
horizontal chia nội dung xếp chồng; vertical chia các mục trên một hàng, như các button trên toolbar.
import { Separator } from "@/components/ui/separator"
<div className="flex w-full max-w-xs flex-col gap-md">
<p className="text-sm text-text-primary">Tài khoản</p>
<Separator />
<p className="text-sm text-text-primary">Thanh toán</p>
</div>
<div className="flex items-center gap-md text-sm text-text-secondary">
<span>Tài liệu</span>
<Separator orientation="vertical" />
<span>Nhật ký thay đổi</span>
<Separator orientation="vertical" />
<span>Trạng thái</span>
</div>Ví dụ
Giữa các phần
import { Separator } from "@/components/ui/separator"
<div className="flex flex-col gap-lg">
<p className="text-sm text-text-primary">Đã đăng nhập bằng ada@example.com</p>
<Separator />
<p className="text-sm text-text-secondary">Thanh toán và hóa đơn</p>
</div>Trên một hàng
Vertical, giữa các link. Đường kéo dài bằng chiều cao của hàng.
import { Separator } from "@/components/ui/separator"
<div className="flex items-center gap-md text-sm text-text-secondary">
<a href="#docs">Tài liệu</a>
<Separator orientation="vertical" />
<a href="#changelog">Nhật ký thay đổi</a>
<Separator orientation="vertical" />
<a href="#status">Trạng thái</a>
</div>Có label
Chữ hoặc giữa hai cách đăng nhập. label được đọc ở chỗ nó đứng.
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
<div className="flex w-full max-w-xs flex-col gap-lg">
<Button variant="secondary">Tiếp tục với email</Button>
<Separator label="or" />
<Button variant="secondary">Tiếp tục với passkey</Button>
</div>Được trình đọc màn hình đọc
Không có gì khác chia hai nhóm này, nên đường là một separator.
import { Separator } from "@/components/ui/separator"
<div className="flex flex-col gap-md">
<p className="text-sm text-text-primary">Dự án của bạn</p>
<Separator decorative={false} />
<p className="text-sm text-text-primary">Được chia sẻ với bạn</p>
</div>Nên và không nên
Nên
- Dùng khoảng cách trước; thêm separator khi chỉ khoảng cách không cho thấy một nhóm kết thúc ở đâu.
- Chừa chỗ hai bên bằng gap của phần tử cha, lớn hơn một bậc so với gap bên trong mỗi nhóm.
Không nên
- Đừng đặt separator dưới mọi hàng của danh sách hoặc bảng; các hàng có viền riêng.
- Đừng dùng để khung nội dung cả bốn phía; đó là Card.
- Đừng dùng làm heading. label là một chữ như hoặc; nhóm cần tên thì dùng heading.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| orientation | enum | horizontal | vertical | horizontal | horizontal chia nội dung xếp chồng; vertical chia các mục trên một hàng, như các button trên toolbar. |
| decorative | boolean | - | true | Bị ẩn với trình đọc màn hình. Đặt false khi đường là thứ duy nhất chia hai nhóm. |
| label | node | - | - | Một hay hai chữ ở giữa đường horizontal: hoặc. Giữ ngắn; nhóm cần tên thì dùng heading. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | Đường: viền 1px màu divider, viền trên khi horizontal (hết chiều rộng) và viền phía đầu khi vertical (hết chiều cao của hàng). |
| wrapper | Khi có label: hàng giữ một đường mỗi bên label, gap-md. Hàng nhận role và className của root. |
| line | Khi có label: mỗi đường là viền trên màu divider, chia nhau chiều rộng còn lại. |
| label | Khi có label: chữ secondary 14px ở giữa, trên một dòng. |
Khả năng truy cập
Role: none
- Mặc định để trang trí: trình đọc màn hình bỏ qua, vì heading và danh sách đã cho biết nhóm bắt đầu ở đâu.
- Đặt decorative={false} khi đường là thứ duy nhất chia hai nhóm; nó trở thành separator, và đường vertical nói hướng bằng aria-orientation.
- Khi có label, chữ được đọc ở chỗ nó đứng. Để đường có label vẫn decorative: role separator giấu chữ bên trong khỏi trình đọc màn hình.
- Separator không bao giờ focus được và không nhận phím.
Cài đặt
npx werewolf-ui add separatorChạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.