SGrid `<s-grid>`

Một container CSS grid để bố trí nội dung theo hàng và cột. SGrid là Vue 3 wrapper có type cho web component <s-grid> của Shopify Polaris.

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

Best practices

Tính đến màn hình nhỏ hơn. Một grid hoạt động tốt trên desktop có thể vỡ trên mobile. Hãy quyết định nó nên reflow hoặc sắp xếp lại thế nào ở độ rộng hẹp hơn thay vì cố định một bố cục.
Dùng một kiểu khoảng cách nhất quán. Khoảng cách đều giữa các mục tạo cho bố cục một nhịp ổn định và dễ đọc lướt hơn, vì vậy tránh trộn nhiều cách tạo khoảng cách trong cùng một grid.
Tính đến nội dung không vừa. Các ô có kích thước cố định nhưng độ dài nội dung thay đổi. Hãy quyết định trước nội dung quá dài hoặc quá rộng nên xuống dòng, bị cắt bớt hay cuộn.
Dùng component đơn giản hơn khi đủ. SGrid mạnh nhưng thêm độ phức tạp, vì vậy hãy xem một component bố cục đơn giản hơn có làm được việc không, và chỉ dùng grid cho những trường hợp cần đến những gì nó cung cấp.

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

Ví dụ

Column 1

Column 2

Column 1

Column 2

vue

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

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</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)`	Căn chỉnh grid theo trục block. Giá trị này ghi đè giá trị block của `placeContent`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Căn chỉnh các grid item theo trục block.
`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
`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
`gridTemplateColumns`	`string`	Các cột trong grid và kích thước của chúng. Chấp nhận: - Giá trị kích thước track, chẳng hạn `1fr auto` - Chuỗi giá trị responsive với các giá trị kích thước track được hỗ trợ làm giá trị truy vấn
`gridTemplateRows`	`string`	Các hàng trong grid và kích thước của chúng. Chấp nhận: - Giá trị kích thước track, ví dụ `1fr auto` - Chuỗi giá trị responsive với các giá trị kích thước track được hỗ trợ làm giá trị truy vấn
`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)`	Căn chỉnh grid theo trục inline. Giá trị này ghi đè giá trị inline của `placeContent`.
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Căn chỉnh các grid item theo trục inline.
`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.
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	Thuộc tính viết tắt cho `justify-content` và `align-content`.
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	Thuộc tính viết tắt cho `justify-items` và `align-items`.
`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 grid, được sắp xếp theo bố cục lưới linh hoạt với số cột, số hàng và khoảng cách có thể cấu hình.

SGrid <s-grid> ​

Best practices ​

Ví dụ ​

Props ​

Slots ​

SGrid `<s-grid>`

Best practices

Ví dụ

Props

Slots