SHeading <s-heading>

Một tiêu đề đặt tên cho một phần của trang. SHeading là Vue 3 wrapper có type cho web component <s-heading> của Shopify Polaris.

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

Best practices

• Gán tiêu đề cho mọi phần chính. Tiêu đề tạo thành dàn ý của giao diện, giúp người bán định hướng và thấy nội dung được tổ chức như thế nào.
• Để component tự chọn cấp tiêu đề. Nó gán cấp HTML (h2, h3, h4) dựa trên độ sâu lồng nhau, nên trình đọc màn hình nhận được cấu trúc tài liệu đúng mà bạn không cần đặt cấp thủ công.
• Hãy cụ thể. Nói rõ phần đó bao gồm gì, ví dụ "Product details" hay "Customer details" thay vì chỉ "Details".
• Chỉ giới hạn số dòng khi thực sự cần. lineClamp có thể kiểm soát tiêu đề dài trong không gian hẹp như thẻ, nhưng cắt ngắn tiêu đề có thể che mất thông tin người bán cần.
• Định dạng các tiêu đề tương tự theo cùng một cách. Tiêu đề cho cùng loại nội dung, chẳng hạn mọi thẻ trong một danh sách, nên trông giống nhau.

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

Ví dụ

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

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

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	Kiểu	Mô tả
accessibilityRole	"heading" | "presentation" | "none"	Ý nghĩa ngữ nghĩa của nội dung component. Khi được đặt, role sẽ được công nghệ hỗ trợ dùng để giúp người dùng điều hướng trang. - heading: Xác định phần tử là tiêu đề đối với công nghệ hỗ trợ. - none: Loại bỏ ý nghĩa ngữ nghĩa khỏi phần tử tiêu đề. - presentation: Loại bỏ ý nghĩa ngữ nghĩa khỏi phần tử tiêu đề.
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.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	Cỡ chữ của tiêu đề. Các giá trị có tên cũng áp dụng line-height và letter-spacing tương ứng: - 'small' ánh xạ tới headingXs - 'base' ánh xạ tới headingSm - 'large' / 'large-100' ánh xạ tới headingMd - 'large-200' ánh xạ tới headingLg - 'large-300' ánh xạ tới headingXl - 'large-400' ánh xạ tới heading2xl
lineClamp	number	Cắt bớt nội dung văn bản theo số dòng được chỉ định.

Slots

Slot	Mô tả
default	Văn bản tiêu đề hiển thị bên trong component heading, đóng vai trò tiêu đề hoặc đầu mục cho nội dung.