SQueryContainer <s-query-container>

将元素变为尺寸容器，使其子元素可以通过容器查询适配其宽度。 SQueryContainer 是 Shopify Polaris <s-query-container> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 适配容器而不是视口。 query container 让组件能够根据其容器的宽度做出响应。这对出现在不同宽度位置的组件很有帮助，例如位于侧边栏或主栏中的产品卡片。
• 有多个容器时为其命名。 如果多个 query container 需要不同的查询，请为每个容器设置描述性的 containerName 以便定位；未命名的容器都会响应相同的查询。
• 将响应式值写在 props 上。 容器为 Polaris 组件提供解析响应式 prop 值所需的上下文，例如 padding="@container (inline-size > 500px) large-500, none"，因此无需自己编写容器查询 CSS。
• 只在需要的地方使用。 每个 query container 都会让浏览器跟踪其尺寸并应用条件样式，因此只在需要基于容器的响应式布局时添加，而不是包裹每一个元素。

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

参阅 Shopify 关于 <s-query-container> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
containerName	string	此容器的标识符，可在 CSS 容器查询中引用，以根据该特定容器的尺寸应用样式。所有查询容器组件都会自动获得 s-default 容器名称。在查询中可以省略容器名称，因此 @container (inline-size <= 300px) 等同于 @container s-default (inline-size <= 300px)。提供自定义 containerName 时，它会与 s-default 一起添加。例如，containerName="product-card" 会将 container-name CSS 属性设置为 s-default product-card，这样就可以通过 @container product-card (inline-size <= 300px) 定位此容器。详细了解 container-name 属性。
id	string	元素的唯一标识符。

Slots

Slot	说明
default	查询容器组件中显示的内容。该组件启用容器查询，可根据容器尺寸而非视口尺寸进行响应式样式设置。