SQueryContainer <s-query-container>

Transforme un élément en conteneur de taille afin que ses enfants s'adaptent à sa largeur grâce aux container queries. SQueryContainer est le wrapper Vue 3 typé du web component <s-query-container> de Shopify Polaris.

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

Bonnes pratiques

• Adaptez-vous au conteneur, pas au viewport. Un query container permet aux composants de réagir à la largeur de leur conteneur. C'est utile pour les composants qui apparaissent dans des zones de largeurs différentes, comme une carte produit dans une barre latérale ou dans la colonne principale.
• Nommez les conteneurs lorsqu'il y en a plusieurs. Si plusieurs query containers ont besoin de requêtes différentes, donnez à chacun un containerName descriptif pour pouvoir le cibler ; les conteneurs sans nom répondent tous aux mêmes requêtes.
• Placez les valeurs responsives sur les props. Le conteneur fournit le contexte que les composants Polaris utilisent pour résoudre les valeurs de props responsives, comme padding="@container (inline-size > 500px) large-500, none", si bien que vous n'avez pas à écrire vous-même le CSS des container queries.
• Ne les utilisez que là où c'est nécessaire. Chaque query container oblige le navigateur à suivre sa taille et à appliquer des styles conditionnels : ajoutez-en un là où vous avez besoin d'un comportement responsive basé sur le conteneur plutôt que d'envelopper chaque élément.

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

Consultez les bonnes pratiques de Shopify pour <s-query-container> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
containerName	string	Un identifiant pour ce conteneur, que vous pouvez référencer dans les requêtes de conteneur CSS afin d'appliquer des styles selon la taille de ce conteneur précis. Tous les composants conteneurs de requête reçoivent automatiquement le nom de conteneur s-default. Vous pouvez omettre le nom du conteneur dans vos requêtes : @container (inline-size <= 300px) équivaut donc à @container s-default (inline-size <= 300px). Lorsque vous fournissez un containerName personnalisé, il est ajouté à côté de s-default. Par exemple, containerName="product-card" définit s-default product-card sur la propriété CSS container-name, ce qui vous permet de cibler ce conteneur avec @container product-card (inline-size <= 300px). En savoir plus sur la propriété container-name.
id	string	Un identifiant unique pour l'élément.

Slots

Slot	Description
default	Le contenu affiché dans le composant query container, qui active les container queries pour un style responsive basé sur la taille du conteneur plutôt que sur celle du viewport.