SQueryContainer <s-query-container>

Biến một phần tử thành size container để các phần tử con thích ứng theo chiều rộng của nó bằng container query. SQueryContainer là Vue 3 wrapper có type cho web component <s-query-container> của Shopify Polaris.

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

Best practices

• Thích ứng theo container, không phải viewport. Query container cho phép component phản hồi theo chiều rộng của container chứa nó. Điều này hữu ích cho các component xuất hiện ở những nơi có chiều rộng khác nhau, như một card sản phẩm trong sidebar hoặc trong cột chính.
• Đặt tên container khi có nhiều hơn một. Nếu nhiều query container cần các query khác nhau, hãy đặt cho mỗi container một containerName mang tính mô tả để bạn có thể nhắm tới nó; các container không có tên đều phản hồi cùng các query.
• Đặt giá trị responsive trên prop. Container cung cấp ngữ cảnh mà các component Polaris dùng để phân giải giá trị prop responsive, chẳng hạn padding="@container (inline-size > 500px) large-500, none", nên bạn không cần tự viết CSS container query.
• Chỉ dùng ở nơi cần thiết. Mỗi query container khiến trình duyệt phải theo dõi kích thước của nó và áp dụng style có điều kiện, nên hãy chỉ thêm ở nơi bạn cần responsive theo container thay vì bọc mọi phần tử.

<SQueryContainer>
  <SBox padding="@container (inline-size > 500px) large-500, none">
    <!-- … -->
  </SBox>
</SQueryContainer>

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

Ví dụ

Wide layout (container inline-size ≥ 320px)Narrow layout (container inline-size < 320px)

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

<template>
  <div class="query-resize-wrapper">
    <SQueryContainer containerName="docs-demo">
      <SText class="wide-only">Wide layout (container inline-size ≥ 320px)</SText>
      <SText class="narrow-only">Narrow layout (container inline-size &lt; 320px)</SText>
    </SQueryContainer>
  </div>
</template>

<style scoped>
.query-resize-wrapper {
  resize: horizontal;
  overflow: auto;
  inline-size: 400px;
  max-inline-size: 100%;
  min-inline-size: 160px;
  border: 1px dashed #8c9196;
  border-radius: 8px;
  padding: 12px;
}
.narrow-only {
  display: none;
}
/* Queries the container established by SQueryContainer via its containerName prop. */
@container docs-demo (inline-size < 320px) {
  .wide-only {
    display: none;
  }
  .narrow-only {
    display: block;
  }
}
</style>

Props

Prop	Kiểu	Mô tả
containerName	string	Định danh cho container này mà bạn có thể tham chiếu trong CSS container query để áp dụng style dựa trên kích thước của chính container này. Mọi component query container đều tự động nhận tên container s-default. Bạn có thể bỏ qua tên container trong query, nên @container (inline-size <= 300px) tương đương với @container s-default (inline-size <= 300px). Khi bạn cung cấp một containerName tùy chỉnh, nó được thêm vào cạnh s-default. Ví dụ, containerName="product-card" khiến s-default product-card được đặt cho thuộc tính CSS container-name, cho phép bạn nhắm tới container này bằng @container product-card (inline-size <= 300px). Tìm hiểu thêm về thuộc tính container-name.
id	string	Định danh duy nhất của phần tử.

Slots

Slot	Mô tả
default	Nội dung được hiển thị bên trong component query container, cho phép dùng container query để tạo kiểu responsive dựa trên kích thước của container thay vì viewport.