SQueryContainer `<s-query-container>`

요소를 크기 컨테이너로 만들어 자식 요소가 container query로 너비에 맞게 조정되도록 합니다. SQueryContainer은(는) Shopify Polaris <s-query-container> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

viewport가 아니라 컨테이너에 맞추세요. query container를 사용하면 컴포넌트가 자신을 감싸는 컨테이너의 너비에 반응할 수 있습니다. 사이드바나 메인 열에 놓이는 상품 카드처럼 너비가 다른 여러 위치에 나타나는 컴포넌트에 유용합니다.
여러 개라면 컨테이너에 이름을 붙이세요. 여러 query container에 서로 다른 쿼리가 필요하다면 각각에 설명적인 containerName을 지정해 대상으로 삼을 수 있게 합니다. 이름 없는 컨테이너는 모두 같은 쿼리에 반응합니다.
반응형 값은 props에 지정하세요. 컨테이너는 Polaris 컴포넌트가 padding="@container (inline-size > 500px) large-500, none" 같은 반응형 prop 값을 해석하는 데 쓰는 맥락을 제공하므로, container query CSS를 직접 작성할 필요가 없습니다.
필요한 곳에만 사용하세요. query container마다 브라우저가 크기를 추적하고 조건부 스타일을 적용해야 하므로, 모든 요소를 감싸지 말고 컨테이너 기반 반응형이 필요한 곳에만 추가합니다.

vue

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

전체 가이드는 <s-query-container>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Wide layout (container inline-size ≥ 320px)

Narrow layout (container inline-size < 320px)

vue

<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	타입	설명
`containerName`	`string`	CSS 컨테이너 쿼리에서 참조해 이 특정 컨테이너의 크기에 따라 스타일을 적용할 수 있는 컨테이너 식별자입니다. 모든 쿼리 컨테이너 컴포넌트는 자동으로 `s-default`라는 컨테이너 이름을 받습니다. 쿼리에서 컨테이너 이름을 생략할 수 있으므로 `@container (inline-size <= 300px)`는 `@container s-default (inline-size <= 300px)`와 같습니다. 사용자 정의 `containerName`을 지정하면 `s-default`와 함께 추가됩니다. 예를 들어 `containerName="product-card"`로 지정하면 `container-name` CSS 속성에 `s-default product-card`가 설정되어 `@container product-card (inline-size <= 300px)`로 이 컨테이너를 대상으로 지정할 수 있습니다. container-name 속성에 대해 자세히 알아보세요.
`id`	`string`	요소의 고유 식별자입니다.

Slots

Slot	설명
`default`	쿼리 컨테이너 컴포넌트 안에 표시되는 콘텐츠입니다. 이 컴포넌트는 뷰포트가 아닌 컨테이너 크기를 기준으로 반응형 스타일을 적용할 수 있도록 컨테이너 쿼리를 활성화합니다.

SQueryContainer <s-query-container> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SQueryContainer `<s-query-container>`

모범 사례

예시

Props

Slots