SQueryContainer <s-query-container>

Convierte un elemento en un contenedor de tamaño para que sus hijos se adapten a su ancho con container queries. SQueryContainer es el wrapper de Vue 3 tipado del web component <s-query-container> de Shopify Polaris.

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

Buenas prácticas

• Adáptate al contenedor, no al viewport. Un query container permite que los componentes respondan al ancho de su contenedor. Esto ayuda a los componentes que aparecen en lugares de distintos anchos, como una tarjeta de producto en una barra lateral o en la columna principal.
• Nombra los contenedores cuando haya más de uno. Si varios query containers necesitan consultas diferentes, da a cada uno un containerName descriptivo para poder dirigirte a él; los contenedores sin nombre responden todos a las mismas consultas.
• Pon los valores responsivos en las props. El contenedor proporciona el contexto que los componentes de Polaris usan para resolver valores responsivos de las props, como padding="@container (inline-size > 500px) large-500, none", así que no tienes que escribir tú mismo el CSS de las container queries.
• Úsalos solo donde sea necesario. Cada query container obliga al navegador a seguir su tamaño y aplicar estilos condicionales, así que añade uno donde necesites un comportamiento responsivo basado en el contenedor en lugar de envolver cada elemento.

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

Consulta las buenas prácticas de Shopify para <s-query-container> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Descripción
containerName	string	Un identificador para este contenedor al que puedes hacer referencia en las container queries de CSS para aplicar estilos según el tamaño de este contenedor concreto. Todos los componentes contenedores de consulta reciben automáticamente el nombre de contenedor s-default. Puedes omitir el nombre del contenedor en tus consultas, de modo que @container (inline-size <= 300px) equivale a @container s-default (inline-size <= 300px). Cuando proporcionas un containerName personalizado, se añade junto a s-default. Por ejemplo, containerName="product-card" hace que se establezca s-default product-card en la propiedad CSS container-name, lo que te permite seleccionar este contenedor con @container product-card (inline-size <= 300px). Obtén más información sobre la propiedad container-name.
id	string	Un identificador único para el elemento.

Slots

Slot	Descripción
default	El contenido que se muestra dentro del componente de contenedor de consultas, que habilita las consultas de contenedor para aplicar estilos adaptables según el tamaño del contenedor en lugar del viewport.