SQueryContainer <s-query-container>

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

Example

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	An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size. All query container components automatically receive a container name of s-default. You can omit the container name in your queries, so @container (inline-size <= 300px) is equivalent to @container s-default (inline-size <= 300px). When you provide a custom containerName, it's added alongside s-default. For example, containerName="product-card" results in s-default product-card being set on the container-name CSS property, allowing you to target this container with @container product-card (inline-size <= 300px). Learn more about the container-name property.
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The content displayed within the query container component, which enables container queries for responsive styling based on the container's size rather than the viewport.