SQueryContainer <s-query-container>

Macht ein Element zu einem Size-Container, sodass sich seine Kinder per Container Queries an seine Breite anpassen können. SQueryContainer ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-query-container>.

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

Best Practices

• An den Container anpassen, nicht an den Viewport. Ein Query Container lässt Komponenten auf die Breite ihres Containers reagieren. Das hilft Komponenten, die an Stellen unterschiedlicher Breite erscheinen, etwa eine Produkt-Card in einer Sidebar oder in der Hauptspalte.
• Container benennen, wenn es mehrere gibt. Brauchen mehrere Query Container unterschiedliche Queries, geben Sie jedem einen aussagekräftigen containerName, um ihn gezielt anzusprechen; unbenannte Container reagieren alle auf dieselben Queries.
• Responsive Werte in Props angeben. Der Container liefert den Kontext, mit dem Polaris-Komponenten responsive Prop-Werte wie padding="@container (inline-size > 500px) large-500, none" auflösen, sodass Sie kein eigenes Container-Query-CSS schreiben müssen.
• Nur dort einsetzen, wo nötig. Jeder Query Container lässt den Browser seine Größe verfolgen und bedingte Styles anwenden. Fügen Sie daher nur dort einen hinzu, wo containerbasierte Responsivität gebraucht wird, statt jedes Element zu umschließen.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-query-container> (auf Englisch).

Beispiel

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	Typ	Beschreibung
containerName	string	Eine Kennung für diesen Container, auf die in CSS Container Queries verwiesen werden kann, um Styles abhängig von der Größe genau dieses Containers anzuwenden. Alle Query-Container-Komponenten erhalten automatisch den Container-Namen s-default. Der Container-Name kann in Queries weggelassen werden, daher ist @container (inline-size <= 300px) gleichbedeutend mit @container s-default (inline-size <= 300px). Wird ein eigener containerName angegeben, kommt er zusätzlich zu s-default hinzu. Beispielsweise führt containerName="product-card" dazu, dass s-default product-card für die CSS-Eigenschaft container-name gesetzt wird, sodass dieser Container mit @container product-card (inline-size <= 300px) angesprochen werden kann. Mehr zur Eigenschaft container-name.
id	string	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Der Inhalt innerhalb der Query-Container-Komponente, die Container Queries für responsives Styling anhand der Größe des Containers statt des Viewports ermöglicht.