SClickable <s-clickable>

Biến bất kỳ nội dung nào thành nút hoặc liên kết có thể nhấp, mà không áp đặt kiểu dáng của nút. SClickable là Vue 3 wrapper có type cho web component <s-clickable> của Shopify Polaris.

import { SClickable } from 'polaris-vue-elements'

Best practices

• Gắn nhãn cho phần tử không có văn bản hiển thị. Nếu bên trong vùng có thể nhấp không có văn bản đọc được, hãy đặt accessibilityLabel để người dùng trình đọc màn hình biết nó dùng để làm gì.
• Chọn chế độ phù hợp. Dùng nó như một button để kích hoạt hành động, gán href để điều hướng, và đặt type="submit" khi nó gửi một form.
• Giải thích trạng thái bị vô hiệu hóa. Khi bạn đặt disabled, hãy làm trạng thái đó rõ ràng về mặt thị giác và thêm văn bản cho người bán biết vì sao phần tử không dùng được.

Xem best practices của Shopify cho <s-clickable> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của phần tử. Khi được đặt, nhãn sẽ được đọc cho người dùng công nghệ hỗ trợ và cung cấp thêm ngữ cảnh cho họ. Chỉ dùng nhãn này khi nội dung của phần tử không đủ ngữ cảnh cho người dùng công nghệ hỗ trợ.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Đặt ý nghĩa ngữ nghĩa cho nội dung của component. Khi được đặt, role sẽ được các công nghệ hỗ trợ sử dụng để giúp người dùng điều hướng trang.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Thay đổi khả năng hiển thị của phần tử. - visible: phần tử hiển thị với mọi người dùng. - hidden: phần tử bị loại khỏi cây trợ năng nhưng vẫn hiển thị. - exclusive: phần tử bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng.
background	"subdued" | "base" | "strong" | "transparent"	Màu nền của component.
blockSize	"auto" | "0"	Kích thước theo chiều dọc của phần tử trong bố cục tiêu chuẩn (chiều cao trong chế độ viết từ trái sang phải hoặc từ phải sang trái). Block size điều chỉnh theo hướng viết: trong bố cục ngang, nó điều khiển chiều cao; trong bố cục dọc, nó điều khiển chiều rộng. Điều này đảm bảo hành vi nhất quán giữa các hướng văn bản khác nhau. Tìm hiểu thêm về block-size.
border	BorderShorthand	Đường viền được áp dụng bằng cú pháp viết tắt để chỉ định độ rộng, màu sắc và kiểu trong một thuộc tính duy nhất.
borderColor	"subdued" | "base" | "strong"	Màu của viền, dùng thang màu của design system. Khi được đặt, giá trị này ghi đè giá trị màu chỉ định trong thuộc tính border. Chọn subdued, base hoặc strong để phù hợp với mức nhấn mạnh thị giác cần thiết.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	Độ bo tròn các góc của phần tử theo thang bán kính của design system. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định bán kính khác nhau cho từng góc. Dùng để tạo các góc bo tròn hoặc phần tử bo tròn hoàn toàn.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Kiểu trực quan của đường viền ở tất cả các cạnh, chẳng hạn solid, dashed hoặc dotted. Khi được đặt, giá trị này ghi đè giá trị kiểu được chỉ định trong thuộc tính border. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định kiểu khác nhau cho từng cạnh.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	Độ dày của đường viền ở tất cả các cạnh. Khi được đặt, giá trị này ghi đè giá trị độ rộng được chỉ định trong thuộc tính border. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định độ rộng khác nhau cho từng cạnh.
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.
disabled	boolean	Component có bị vô hiệu hóa hay không, ngăn việc nhấp và focus. Khi bị vô hiệu hóa, event click sẽ không được kích hoạt và các click event từ phần tử con sẽ dừng lan truyền ngay lập tức. Các phần tử con có tính tương tác vẫn có thể nhận focus và được tương tác. Thuộc tính này mặc định không áp dụng kiểu trực quan. Bạn nên tự áp dụng kiểu disabled khi cần.
display	"auto" | "none"	Kiểu display bên ngoài của component. Kiểu bên ngoài quyết định cách component tham gia vào flow layout. - auto là giá trị ban đầu của component. Giá trị thực tế phụ thuộc vào component và ngữ cảnh. - none ẩn component khỏi hiển thị và loại bỏ nó khỏi cây trợ năng (accessibility tree), khiến trình đọc màn hình không thể nhận thấy.
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.
inlineSize	"auto" | "0"	Chiều rộng trong chế độ viết ngang, hoặc chiều cao trong chế độ viết dọc. Dùng cho việc định kích thước tương đối theo luồng, thích ứng với hướng văn bản. Tìm hiểu thêm về inline-size.
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.
loading	boolean	Component có đang ở trạng thái tải hay không, điều này cho công nghệ hỗ trợ biết rằng một hành động đang diễn ra và ngăn tương tác.
maxBlockSize	"none" | "0"	Chiều cao tối đa trong chế độ viết ngang, hoặc chiều rộng tối đa trong chế độ viết dọc. Ngăn phần tử lớn vượt quá kích thước này. Tìm hiểu thêm về max-block-size.
maxInlineSize	"none" | "0"	Chiều rộng tối đa trong chế độ viết ngang, hoặc chiều cao tối đa trong chế độ viết dọc. Ngăn phần tử lớn vượt quá kích thước này. Tìm hiểu thêm về max-inline-size.
minBlockSize	"0"	Chiều cao tối thiểu trong chế độ viết ngang, hoặc chiều rộng tối thiểu trong chế độ viết dọc. Ngăn phần tử co nhỏ hơn kích thước này. Tìm hiểu thêm về min-block-size.
minInlineSize	"0"	Chiều rộng tối thiểu trong chế độ viết ngang, hoặc chiều cao tối thiểu trong chế độ viết dọc. Ngăn phần tử co nhỏ hơn kích thước này. Tìm hiểu thêm về min-inline-size.
overflow	"visible" | "hidden"	Đặt hành vi tràn (overflow) của phần tử. - hidden: cắt bớt nội dung khi nó lớn hơn container của phần tử. Phần tử sẽ không thể cuộn và người dùng sẽ không thể truy cập nội dung bị cắt bằng cách kéo hoặc dùng con lăn chuột. - visible: nội dung vượt ra ngoài container của phần tử vẫn hiển thị.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	Padding áp dụng cho tất cả các cạnh của component. Hỗ trợ cú pháp 1 đến 4 giá trị dùng các giá trị theo hướng luồng (flow-relative): - 1 giá trị áp dụng cho tất cả các phía - 2 giá trị áp dụng cho block (trên/dưới) và inline (trái/phải) - 3 giá trị áp dụng cho block-start (trên), inline (trái/phải) và block-end (dưới) - 4 giá trị áp dụng cho block-start (trên), inline-end (phải), block-end (dưới) và inline-start (trái) Ví dụ:* base, large none, base large-100 base small Dùng auto để kế thừa padding từ vùng chứa gần nhất đã bị loại bỏ padding. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Padding theo hướng block (trên và dưới trong chế độ viết ngang). Chấp nhận một giá trị cho cả hai phía hoặc hai giá trị phân tách bằng dấu cách cho block-start và block-end. Ví dụ:* large none áp dụng large cho phía trên và none cho phía dưới. Ghi đè giá trị block từ padding. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Padding block-end (phía dưới trong chế độ viết ngang). Ghi đè giá trị block-end từ paddingBlock. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Padding block-start (phía trên trong chế độ viết ngang). Ghi đè giá trị block-start từ paddingBlock. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Padding theo chiều inline (trái và phải trong chế độ viết ngang). Chấp nhận một giá trị cho cả hai phía hoặc hai giá trị cách nhau bằng dấu cách cho inline-start và inline-end. Ví dụ:* large none áp dụng large cho bên trái và none cho bên phải. Ghi đè giá trị inline từ padding. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Padding phía inline-end (bên phải trong chế độ viết LTR, bên trái trong RTL). Ghi đè giá trị inline-end từ paddingInline. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Padding phía inline-start (bên trái trong chế độ viết LTR, bên phải trong RTL). Ghi đè giá trị inline-start từ paddingInline. Cũng chấp nhận chuỗi giá trị responsive với PaddingKeyword được hỗ trợ làm giá trị truy vấn.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Chỉ định nơi hiển thị URL được liên kết.
type	"button" | "reset" | "submit"	Hành vi của Button. - submit: Cho biết component hoạt động như nút submit, nghĩa là nó submit form gần nhất. - button: Cho biết component hoạt động như một nút, nghĩa là nó không có hành động mặc định. - reset: Cho biết component hoạt động như nút reset, nghĩa là nó reset form gần nhất (đưa các trường về giá trị mặc định). Thuộc tính này bị bỏ qua nếu component hỗ trợ href hoặc commandFor/command và một trong số đó được đặt.

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Events

Event	Kiểu
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Lắng nghe các event này bằng listener dạng @blur trên <SClickable>.

Slots

Slot	Mô tả
default	Nội dung được hiển thị bên trong component clickable, giúp bất kỳ nội dung nào trở nên tương tác và có thể nhấp mà không mang ngữ nghĩa của button hay link.