SSection <s-section>

Nhóm các nội dung liên quan, với tiêu đề, tiêu đề phụ và các hành động tùy chọn. SSection là Vue 3 wrapper có type cho web component <s-section> của Shopify Polaris.

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

Best practices

• Nhóm các nội dung thuộc về nhau. Cho mỗi section một nhiệm vụ duy nhất và nhất quán, dù là thông tin liên quan hay các điều khiển liên quan; khi đó nó vừa là một container trực quan vừa bổ sung ý nghĩa cho cấu trúc trang.
• Viết tiêu đề mang tính mô tả. Người bán lướt qua heading để định hướng, nên hãy nêu rõ bên trong có gì thay vì dùng một tiêu đề chung chung.
• Chỉ lồng sâu đến mức nội dung cần. Một section lồng nhau ảnh hưởng đến thứ bậc tiêu đề và dàn ý của trang chứ không phải cách nó hiển thị. Giữ tối đa hai hoặc ba cấp, và chỉ lồng khi cấu trúc bổ sung giúp nội dung rõ ràng hơn.
• Bỏ padding khi nội dung cần trải từ mép này sang mép kia. Dùng padding="none" cho những thứ như bảng hoặc hình ảnh cần lấp đầy section, sau đó kiểm tra rằng nội dung bên trong vẫn giữ đủ khoảng cách riêng.
• Thêm accessibilityLabel khi tiêu đề chưa đủ. Khi tiêu đề hiển thị trên màn hình chưa làm rõ mục đích của section với người dùng trình đọc màn hình, hãy cung cấp một nhãn bổ sung phần ngữ cảnh còn thiếu.
• Chọn đúng slot header. Đặt các chi tiết bổ nghĩa cho chính tiêu đề, như tooltip hoặc một con số đếm, vào accessory. Đặt thông tin về toàn bộ section, như một badge trạng thái, vào supplemental. Các hành động như nút hoặc menu thuộc về accessory, vì supplemental không nhận chúng.

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

Ví dụ

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

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

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</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.
heading	string	Văn bản tiêu đề hiển thị ở đầu section. Tiêu đề này đặt tên cho nội dung của section và tự động dùng cấp tiêu đề ngữ nghĩa phù hợp (h2, h3, h4) dựa trên độ sâu lồng nhau để duy trì cấu trúc tài liệu đúng.
padding	"base" | "none"	Padding áp dụng cho tất cả các cạnh của nội dung phần tử. - base: áp dụng padding phù hợp với phần tử. Lưu ý rằng điều này có thể dẫn đến không có padding nếu đó là quyết định thiết kế đúng trong một ngữ cảnh cụ thể. - none: loại bỏ toàn bộ padding khỏi nội dung của phần tử. Điều này hữu ích khi các phần tử bên trong section cần trải dài đến mép của section. Ví dụ, một ảnh toàn chiều rộng. Khi đó, hãy dùng s-box với padding 'base' để khôi phục padding mong muốn cho phần nội dung còn lại. heading và các hành động ở header vẫn giữ padding của chúng, nên có thể kết hợp với none.
subheading	string	Văn bản hỗ trợ bổ sung cho tiêu đề, được render bên dưới nó với kiểu hiển thị nhạt hơn. Đây không phải là tiêu đề: nó không thêm mục nào vào dàn ý tài liệu, không thay đổi cấp tiêu đề của các phần tử con trong section và không được đọc như một phần của tiêu đề. Hãy giữ những gì phân biệt section này với section khác trong heading, vì đó là điều người điều hướng theo tiêu đề nghe được.

Slots

Slot	Mô tả
default	Nội dung được hiển thị bên trong component section, nhóm các phần tử liên quan thành một đơn vị logic với tiêu đề tùy chọn.
accessory	Thông tin ngữ cảnh bổ sung làm rõ tiêu đề, được render inline bên cạnh văn bản tiêu đề. Chỉ chấp nhận các phần tử Badge, Icon, Button, Menu, Text, Avatar, Thumbnail và Tooltip. Text phải dùng tone, fontSize và fontWeight là auto; Icon, Avatar và Thumbnail phải dùng size="base"; Badge phải dùng size="base" và color="base"; Button phải dùng inlineSize="auto". Một Tooltip mà interestFor của một phần tử phụ trỏ tới có thể được đặt vào slot này bên cạnh phần tử đó.
graphic	Một hình ảnh trang trí củng cố tiêu đề, được render trước tiêu đề. Chấp nhận một Icon duy nhất có size là base, hoặc một Badge chỉ có icon (đặt icon, không có nội dung văn bản) có size là large. Tiêu đề đã xác định section, nên nội dung này không được công nghệ hỗ trợ đọc lên, và hoàn toàn không được render khi section không có heading.
primary-action	Button hoặc link hành động chính, đại diện cho hành động chính hoặc quan trọng nhất trong ngữ cảnh này. Thường được hiển thị nổi bật hơn so với các hành động phụ để tạo thứ bậc rõ ràng.
secondary-actions	Các nút hành động hoặc liên kết bổ sung cung cấp các hành động thay thế hoặc hỗ trợ. Được giảm nhấn mạnh về mặt thị giác so với hành động chính. Một ButtonGroup chứa một hành động và activator chỉ có icon cho Menu của nó sẽ được render thành một nhóm phân đoạn với activator hình chevron. Nhóm cần có accessibilityLabel, và phải chứa đúng một Button có văn bản, theo sau là một Button không có văn bản có accessibilityLabel và commandFor mở một Menu, cả hai đều có variant là secondary hoặc auto.
supplemental	Trạng thái hoặc metadata mô tả toàn bộ section thay vì bổ nghĩa cho tiêu đề của nó, được render ở cuối inline của header, trước mọi hành động. Đây không phải là một hành động. Chỉ chấp nhận các phần tử Badge, Avatar, Text, Icon, Thumbnail và Tooltip, với cùng các ràng buộc prop như accessory.