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	The name of the container, which can be used in your container queries to target this container specifically. We place the container name of s-default on every container. Because of this, it is not required to add a containerName identifier in your queries. For example, a @container (inline-size <= 300px) none, auto query is equivalent to @container s-default (inline-size <= 300px) none, auto. Any value set in containerName will be set alongside alongside s-default. For example, containerName="my-container-name" will result in a value of s-default my-container-name set on the container-name CSS property of the rendered HTML.
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The content of the container.