Thành phần thương hiệu
Editor panel
Get in touch with labelled contact rows, a QR slot and an Email me button; variant=band is the press-black contact band for the CV.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Get in touch
- name@example.com
- linkedin.com/in/example
- Phone
- +00 000 000 000
- GitHub
- github.com/example
Scan to save my contact
Install
bash
npx shadcn add @eloquent/editor-panelUsage
tsx
import { EditorPanel } from "@/components/ui/editor-panel";
<EditorPanel
title="Get in touch"
rows={[
{ label: "Email", value: "name@example.com", href: "mailto:name@example.com" },
{ label: "LinkedIn", value: "linkedin.com/in/example", href: "https://www.linkedin.com/in/example" },
{ label: "Phone", value: "+00 000 000 000", href: "tel:+00000000000" },
{ label: "GitHub", value: "github.com/example", href: "https://github.com/example" },
]}
qr={<img src="/qr.svg" alt="QR code to save my contact" />}
qrCaption="Scan to save my contact"
actionLabel="Email me"
actionHref="mailto:name@example.com"
/>Add variant="band" for the press-black contact band on the CV.
States
Get in touch
- name@example.com
- linkedin.com/in/example
- Phone
- +00 000 000 000
- GitHub
- github.com/example
Scan to save my contact
Get in touch
- name@example.com
- Phone
- On request
| State | Treatment |
|---|---|
| Panel | Heavy ink rule on top, hairlines between rows, ink-fill button |
| Band | press ground, on-press text and hairlines, inverse button |
| Row link | Underlined, no hover effect |
| Focus | 2px outline, 2px offset: ink on the panel, on-press on the band |
| No QR | Omit qr; the rows take the full width |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the row links, then the button |
| Enter | Follows the focused link |
Vietnamese
Liên hệ
- name@example.com
- linkedin.com/in/example
- Điện thoại
- +00 000 000 000
- GitHub
- github.com/example
Quét để lưu liên hệ của tôi
Ink adaptation
Brand item with no upstream. Rules and type replace a card box; the band is the single inverse block of its surface.