SParagraph <s-paragraph>

Một khối văn bản nội dung. SParagraph là Vue 3 wrapper có type cho web component <s-paragraph> của Shopify Polaris.

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

Best practices

• Giữ đoạn văn ngắn. Hướng tới hai đến bốn câu bằng ngôn ngữ đơn giản, không dùng thuật ngữ chuyên môn. Người bán thường đọc lướt, nên hãy chia nội dung dài thành các phần nhỏ hơn.
• Dùng tone để thể hiện ý định. tone="critical" phù hợp với lỗi, "caution" với cảnh báo và "success" với xác nhận. Luôn kèm theo câu chữ rõ ràng thay vì chỉ dựa vào màu sắc.
• Thiết kế cho trợ năng. Thêm văn bản chỉ dành cho trình đọc màn hình (accessibilityVisibility="exclusive") cho phần ngữ cảnh mà người bán nhìn thấy được nhận biết qua bố cục hoặc icon, và đảm bảo văn bản có tone vẫn đủ độ tương phản để đọc.
• Cắt dòng một cách cẩn thận. lineClamp hữu ích ở những chỗ chật như card hoặc bản xem trước, nhưng đừng bao giờ để việc cắt bớt che mất thông tin quan trọng.

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

Ví dụ

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

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

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</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 đoạn vă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 đoạn văn.
lineClamp	number	Cắt bớt nội dung văn bản theo số dòng được chỉ định.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Tone ngữ nghĩa áp dụng cho văn bản đoạn vă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 (đỏ). - caution: Thông báo khuyến nghị cần chú ý (vàng).

Slots

Slot	Mô tả
default	Nội dung văn bản đoạn văn hiển thị bên trong component paragraph, trình bày một khối văn bản liên quan với kiểu dáng phù hợp.