SStack `<s-stack>`

Sắp xếp các phần tử con theo hàng hoặc cột với khoảng cách và căn chỉnh nhất quán. SStack là Vue 3 wrapper có type cho web component <s-stack> của Shopify Polaris.

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

Best practices

Để khoảng cách phản ánh mối quan hệ. Một gap nhỏ cho thấy các mục thuộc về nhau, còn gap lớn hơn tách biệt các nhóm khác nhau. Chọn khoảng cách khớp với thứ bậc nội dung của bạn.
Lường trước việc stack inline sẽ xuống dòng. Với direction="inline", các mục chuyển sang dòng mới khi hết chỗ. Đó thường là điều bạn muốn, nhưng nếu cần kiểm soát chính xác việc ngắt dòng hoặc nhiều hàng, hãy dùng một cách bố cục khác.
Đặt căn chỉnh có chủ đích. Căn chỉnh mặc định phù hợp với hầu hết bố cục. Điều chỉnh alignItems hoặc justifyContent khi các mục có kích thước khác nhau hoặc cần vị trí cụ thể.

vue

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

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

Ví dụ

Item 1

Item 2

Item 3

vue

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

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</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.
`alignContent`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (9 more)`	Kiểm soát việc phân bố các dòng dọc theo trục block khi nội dung xuống thành nhiều dòng. Thuộc tính này chỉ ảnh hưởng đến các stack có nội dung xuống dòng. Với stack một dòng, hãy dùng `alignItems`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Kiểm soát việc căn chỉnh các phần tử con dọc theo trục block (theo chiều dọc trong chế độ viết ngang). Dùng thuộc tính này để căn các mục vuông góc với hướng của stack - theo chiều dọc với inline stack hoặc theo chiều ngang với block stack.
`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.
`columnGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	Điều chỉnh khoảng cách giữa các phần tử theo trục inline. Giá trị này ghi đè giá trị column của `gap`. Chấp nhận: - Một giá trị `SpacingKeyword` duy nhất, chẳng hạn `large-100` - Một chuỗi giá trị responsive với SpacingKeyword được hỗ trợ làm giá trị query
`direction`	`"block" \| "inline"`	Hướng sắp xếp các phần tử con của stack bên trong stack. Chấp nhận: - Một giá trị duy nhất, `inline` hoặc `block` - Chuỗi giá trị responsive với các giá trị hướng được hỗ trợ làm giá trị truy vấ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.
`gap`	`MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>`	Điều chỉnh khoảng cách giữa các phần tử. Chấp nhận: - Một giá trị `SpacingKeyword` duy nhất áp dụng cho cả hai trục, chẳng hạn `large-100` - Một cặp giá trị, chẳng hạn `large-100 large-500`, để đặt lần lượt trục inline và trục block - Một chuỗi giá trị responsive với SpacingKeyword được hỗ trợ làm giá trị query
`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.
`justifyContent`	`"normal" \| "stretch" \| "center" \| "start" \| "end" \| "unsafe center" \| "unsafe start" \| "unsafe end" … (6 more)`	Kiểm soát việc phân bố các phần tử con dọc theo trục inline (theo chiều ngang trong chế độ viết ngang). Dùng thuộc tính này để định vị các mục dọc theo trục chính của stack - theo chiều ngang với inline stack hoặc theo chiều dọc với block stack khi xuống thành nhiều dòng.
`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.
`rowGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	Điều chỉnh khoảng cách giữa các phần tử theo trục block. Giá trị này ghi đè giá trị row của `gap`. Chấp nhận: - Một giá trị `SpacingKeyword` duy nhất, chẳng hạn `large-100` - Một chuỗi giá trị responsive với SpacingKeyword được hỗ trợ làm giá trị query

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).

Slots

Slot	Mô tả
`default`	Các phần tử con được hiển thị bên trong component stack, được sắp xếp theo chiều dọc hoặc chiều ngang với khoảng cách nhất quán.

SStack <s-stack> ​

Best practices ​

Ví dụ ​

Props ​

Slots ​

SStack `<s-stack>`

Best practices

Ví dụ

Props

Slots