ChannelMark
Mẫu chuẩnLogo kênh bên thứ ba trong một chip trung tính. Thiếu asset thì hiện chữ cái đầu, không bao giờ ảnh vỡ.
Playground
Facebook chưa có mono nên biến thể đó rơi về fallback. Zalo có cả default và mono, và asset của Zalo là unofficial.
import { ChannelMark } from "@nexobox/ui";
<ChannelMark channel="facebook" variant="default" size="md" label={"Facebook"} />Khi nào sử dụng
Nên dùng
Nhận ra một kênh ngay: danh sách kênh, thẻ đã kết nối, cột kênh trong bảng.
Tránh dùng
Trang trí, nền, avatar người dùng, hoặc thay cho Icon. Không gắn chấm trạng thái kết nối lên mark.
Anatomy
Chip do kit kiểm soát: nền, bo góc, kích thước, đệm. Mark bên trong không đọc token. Không có wordmark cho tới khi asset được nhập.
States
Mark của biến thể đang chọn.
Chữ cái đầu. Không ảnh vỡ, không để trống.
Vẽ bình thường. Không có dấu hiệu thị giác. Zalo đang unofficial.
Kế thừa opacity của nút. Mark không nói thêm gì.
Một màu, kế thừa currentColor. Facebook chưa có mono nên sẽ fallback.
sm, md, lg. Sàn chạm áp dụng cho nút chứa mark, không cho chính chip.
Không có trạng thái kết nối. Không có prop màu, bo góc, hay src.
Design tokens
Chỉ chip đọc token: --nf-component-channel-mark-size, -sm-size, -lg-size, -padding, -radius, nền và viền. Chữ fallback đọc --nf-component-channel-mark-fallback-foreground. Hình bên trong không đọc token.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| channel | — | Bắt buộc. Id kênh. |
| variant | default | default hoặc mono. Wordmark chỉ khi asset tồn tại. |
| size | md | sm, md, lg. Kích thước chip. |
| label | — | Tên kênh, hoặc false khi cạnh đó đã có chữ. |