SQueryContainer `<s-query-container>`

要素をサイズコンテナにし、子要素がコンテナクエリでその幅に合わせて変化できるようにします。 SQueryContainer は、Shopify Polaris の <s-query-container> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

ビューポートではなくコンテナに合わせる。 クエリコンテナを使うと、コンポーネントがコンテナの幅に応じて変化できます。サイドバーとメインカラムの両方に表示される商品カードのように、幅の異なる場所に現れるコンポーネントに役立ちます。
複数ある場合はコンテナに名前を付ける。 複数のクエリコンテナで異なるクエリが必要な場合は、それぞれにわかりやすい containerName を付けて対象を指定できるようにします。名前のないコンテナは、すべて同じクエリに反応します。
レスポンシブな値は props に指定する。 コンテナは、padding="@container (inline-size > 500px) large-500, none" のようなレスポンシブな prop の値を Polaris コンポーネントが解決するためのコンテキストを提供するため、コンテナクエリの CSS を自分で書く必要はありません。
必要な場所にだけ使う。 クエリコンテナがあるたびにブラウザはそのサイズを追跡し、条件付きのスタイルを適用します。すべての要素をラップするのではなく、コンテナに基づくレスポンシブ対応が必要な場所にだけ追加します。

vue

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

詳しいガイダンスについては、<s-query-container> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Wide layout (container inline-size ≥ 320px)

Narrow layout (container inline-size < 320px)

vue

<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`	クエリコンテナコンポーネント内に表示されるコンテンツです。このコンポーネントはコンテナクエリを有効にし、ビューポートではなくコンテナのサイズに基づくレスポンシブなスタイリングを可能にします。

SQueryContainer <s-query-container> ​

ベストプラクティス ​

例 ​

Props ​

Slots ​

SQueryContainer `<s-query-container>`

ベストプラクティス

例

Props

Slots