SLink <s-link>
Một liên kết văn bản điều hướng đến trang hoặc URL khác, hoặc chạy một lệnh. SLink là Vue 3 wrapper có type cho web component <s-link> của Shopify Polaris.
ts
import { SLink } from 'polaris-vue-elements'Best practices
- Chỉ mở link bên ngoài trong tab mới. Đặt
target="_blank"cho URL nằm ngoài trang admin, như tài liệu trợ giúp hoặc trang của đối tác. Link bên trong trang admin nên mở trong cùng tab để người bán không mất vị trí trong luồng công việc.
Xem best practices của Shopify cho <s-link> (tiếng Anh) để có hướng dẫn đầy đủ.
Ví dụ
vue
<script setup>
import { SLink } from 'polaris-vue-elements'
</script>
<template>
<SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
<SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</template>Props
| Prop | Kiểu | Mô tả |
|---|---|---|
accessibilityLabel | string | Nhãn mô tả mục đích hoặc nội dung của component cho các công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này để cung cấp thêm ngữ cảnh khi riêng nội dung hiển thị chưa thể hiện rõ mục đích của component. |
command | "--auto" | "--show" | "--hide" | "--toggle" | "--copy" | Đặt hành động mà commandFor sẽ thực hiện khi phần tử có thể nhấp này được kích hoạt. Xem tài liệu của từng component để biết các hành động mà chúng hỗ trợ. - --auto: hành động mặc định cho component đích. - --show: hiển thị component đích. - --hide: ẩn component đích. - --toggle: bật/tắt component đích. - --copy: sao chép ClipboardItem đích. |
commandFor | string | ID của một component sẽ phản hồi khi component này được kích hoạt (ví dụ: nhấp). Xem command để biết cách điều khiển hành vi của component đích. |
download | string | Khiến trình duyệt coi URL được liên kết là một tệp tải xuống, với chuỗi này là tên tệp. Tải xuống chỉ hoạt động với URL cùng origin hoặc các scheme blob: và data:. |
href | string | URL để liên kết tới. - Nếu được đặt, nó sẽ điều hướng tới vị trí do href chỉ định sau khi thực thi event click. - Nếu commandFor được đặt, command sẽ được thực thi thay cho việc điều hướng. |
interestFor | string | ID của một component sẽ phản hồi khi có sự chú ý (ví dụ: hover và focus) trên component này. |
lang | string | Ngôn ngữ của nội dung văn bản. Dùng khi văn bản ở ngôn ngữ khác với phần còn lại của trang, giúp công nghệ hỗ trợ như trình đọc màn hình phát âm đúng. Giá trị phải là một language subtag hợp lệ từ IANA language subtag registry. |
target | "auto" | "_blank" | "_self" | "_parent" | "_top" | Chỉ định nơi hiển thị URL được liên kết. |
tone | "auto" | "neutral" | "critical" | Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy. - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể. |
Events
| Event | Kiểu |
|---|---|
click | MouseEvent |
Lắng nghe các event này bằng listener dạng @click trên <SLink>.
Slots
| Slot | Mô tả |
|---|---|
default | Văn bản hoặc các phần tử hiển thị bên trong component link, điều hướng người dùng tới vị trí khác khi được kích hoạt. |