SQueryContainer <s-query-container>

किसी element को size container बना देता है ताकि उसके children container queries से उसकी चौड़ाई के अनुसार ढल सकें। SQueryContainer Shopify के Polaris <s-query-container> web component का typed Vue 3 wrapper है।

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

Best practices

• Viewport के बजाय container के अनुसार ढलें। Query container components को उनके container की चौड़ाई के अनुसार प्रतिक्रिया देने देता है। यह उन components के लिए मददगार है जो अलग-अलग चौड़ाई वाली जगहों पर दिखते हैं, जैसे sidebar में या मुख्य column में कोई product card।
• एक से अधिक containers होने पर उन्हें नाम दें। अगर कई query containers को अलग-अलग queries चाहिए, तो हर एक को वर्णनात्मक containerName दें ताकि आप उसे target कर सकें; बिना नाम वाले सभी containers समान queries का जवाब देते हैं।
• Responsive values को props पर रखें। Container वह context देता है जिसका उपयोग Polaris components responsive prop values को resolve करने के लिए करते हैं, जैसे padding="@container (inline-size > 500px) large-500, none", इसलिए आपको container query CSS स्वयं नहीं लिखनी पड़ती।
• इनका उपयोग केवल वहीं करें जहाँ ज़रूरत हो। हर query container browser से उसके आकार पर नज़र रखवाता है और conditional styles लागू करवाता है, इसलिए हर element को wrap करने के बजाय उसे वहीं जोड़ें जहाँ आपको container-आधारित responsiveness चाहिए।

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

सभी सुझावों के लिए <s-query-container> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	विवरण
containerName	string	इस container के लिए एक identifier, जिसे आप CSS container queries में reference कर सकते हैं ताकि इसी container के size के आधार पर styles लागू हों। सभी query container components को अपने आप s-default container name मिलता है। आप अपनी queries में container name छोड़ सकते हैं, इसलिए @container (inline-size <= 300px) और @container s-default (inline-size <= 300px) बराबर हैं। जब आप कोई custom containerName देते हैं, तो वह s-default के साथ जोड़ दिया जाता है। उदाहरण के लिए, containerName="product-card" से container-name CSS property पर s-default product-card सेट होता है, जिससे आप @container product-card (inline-size <= 300px) के साथ इस container को target कर सकते हैं। container-name property के बारे में और जानें।
id	string	element के लिए एक unique identifier।

Slots

Slot	विवरण
default	query container component के अंदर दिखाई जाने वाली सामग्री, जो container queries को सक्षम करता है ताकि responsive styling viewport के बजाय container के आकार के आधार पर हो।