SText <s-text>

Văn bản inline với tone, độ đậm và kiểu nhấn mạnh. SText là Vue 3 wrapper có type cho web component <s-text> của Shopify Polaris.

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

Best practices

• Chọn type có ngữ nghĩa. Chọn "strong" để đánh dấu từ hoặc cụm từ quan trọng, "address" cho địa chỉ bưu chính hoặc email, và "redundant" cho văn bản cung cấp ngữ cảnh cho người dùng trình đọc màn hình khi cùng nội dung đó đã xuất hiện trên màn hình. Chọn đúng type giúp công nghệ hỗ trợ thể hiện được ý nghĩa của văn bản.
• Nhấn mạnh có chừng mực. Áp dụng type="strong" cho từ hoặc con số quan trọng trong câu, không phải cho cả câu; nhấn mạnh quá nhiều sẽ mất tác dụng và khiến văn bản khó đọc lướt hơn.
• Dùng tone cho trạng thái nội dòng. Các tone như "critical", "success" hoặc "caution" thu hút sự chú ý vào một trạng thái, nhưng hãy kèm theo câu chữ rõ ràng thay vì để màu sắc tự truyền tải thông điệp.
• Đừng làm mờ điều quan trọng. color="subdued" phù hợp với dấu thời gian và metadata, nhưng tránh dùng cho thông tin quan trọng mà người bán phải đọc.

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

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

Ví dụ

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

<script setup>
import { SText } from 'polaris-vue-elements'
</script>

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</template>

Props

Prop	Kiểu	Mô tả
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.
color	"subdued" | "base"	Điều chỉnh màu sắc đậm hơn hoặc nhạt hơn.
dir	"auto" | "ltr" | "rtl"	Chỉ định hướng của văn bản trong phần tử. - ltr: ngôn ngữ viết từ trái sang phải (ví dụ: tiếng Anh) - rtl: ngôn ngữ viết từ phải sang trái (ví dụ: tiếng Ả Rập) - auto: user agent xác định hướng dựa trên nội dung - '': hướng được kế thừa từ các phần tử cha (tương đương với việc không đặt thuộc tính)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Cỡ chữ của văn bản. Các giá trị có tên cũng áp dụng line-height và letter-spacing tương ứng.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Đặt các thuộc tính số của phông chữ.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Độ đậm phông chữ của văn bản.
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.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Tone ngữ nghĩa áp dụng cho văn bản, làm thay đổi màu sắc để truyền tải ý nghĩa. - info: Nội dung mang tính thông tin hoặc mẹo hữu ích (xanh dương). - success: Kết quả tích cực hoặc trạng thái thành công (xanh lá). - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn (cam). - 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ể (xám). - caution: Thông báo khuyến nghị cần chú ý (vàng).
type	"strong" | "address" | "redundant" | "generic"	Kiểu ngữ nghĩa và cách tạo kiểu cho nội dung văn bản. Các thuộc tính trình bày khác trên text sẽ ghi đè kiểu mặc định. - strong: Nhấn mạnh văn bản với mức độ quan trọng cao, thường hiển thị in đậm. - generic: Văn bản tiêu chuẩn không có ý nghĩa ngữ nghĩa hay kiểu đặc biệt. - address: Đánh dấu văn bản là thông tin liên hệ, chẳng hạn địa chỉ thực hoặc địa chỉ email. - redundant: Cho biết văn bản là thông tin dư thừa hoặc trùng lặp trong ngữ cảnh trình đọc màn hình.

Slots

Slot	Mô tả
default	Nội dung văn bản hiển thị bên trong component text, áp dụng ý nghĩa ngữ nghĩa và kiểu phù hợp với loại văn bản được chỉ định.