SQueryContainer <s-query-container>

Transforma um elemento em um contêiner de tamanho para que seus filhos se adaptem à largura dele com container queries. SQueryContainer é o wrapper de Vue 3 tipado do web component <s-query-container> do Shopify Polaris.

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

Boas práticas

• Adapte-se ao contêiner, não à viewport. Um query container permite que os componentes respondam à largura do seu contêiner. Isso ajuda componentes que aparecem em lugares com larguras diferentes, como um card de produto na barra lateral ou na coluna principal.
• Nomeie os contêineres quando houver mais de um. Se vários query containers precisarem de queries diferentes, dê a cada um um containerName descritivo para poder direcioná-lo; contêineres sem nome respondem todos às mesmas queries.
• Coloque os valores responsivos nas props. O contêiner fornece o contexto que os componentes do Polaris usam para resolver valores responsivos de props, como padding="@container (inline-size > 500px) large-500, none", então você não precisa escrever CSS de container query.
• Use apenas onde for necessário. Cada query container faz o navegador acompanhar o tamanho dele e aplicar estilos condicionais, então adicione um onde você precisar de responsividade baseada no contêiner, em vez de envolver todos os elementos.

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

Veja as boas práticas da Shopify para <s-query-container> (em inglês) para todas as recomendações.

Exemplo

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	Tipo	Descrição
containerName	string	Um identificador para este contêiner que você pode referenciar em container queries de CSS para aplicar estilos com base no tamanho deste contêiner específico. Todos os componentes de contêiner de consulta recebem automaticamente o nome de contêiner s-default. Você pode omitir o nome do contêiner nas suas consultas, então @container (inline-size <= 300px) equivale a @container s-default (inline-size <= 300px). Quando você fornece um containerName personalizado, ele é adicionado junto com s-default. Por exemplo, containerName="product-card" faz com que s-default product-card seja definido na propriedade CSS container-name, permitindo que você selecione este contêiner com @container product-card (inline-size <= 300px). Saiba mais sobre a propriedade container-name.
id	string	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	O conteúdo exibido dentro do componente de query container, que habilita container queries para estilos responsivos com base no tamanho do contêiner em vez do viewport.