Components
62 typed Vue wrappers, हर Polaris web component के लिए एक, उसी तरह समूहित जैसे Shopify का अपना reference उन्हें समूहित करता है।
Actions
- SButton<s-button>कोई action चलाता है या navigate करता है, जिसमें primary, secondary और tertiary variants, icons और loading state होते हैं।
- SButtonGroup<s-button-group>संबंधित buttons के एक समूह को साथ में रखता है, जैसे एक primary action और उसके secondary actions।
- SClickable<s-clickable>Button की styling थोपे बिना किसी भी content को button या link की तरह clickable बनाता है।
- SClickableChip<s-clickable-chip>एक interactive chip जिसे click किया जा सकता है, link की तरह खोला जा सकता है या हटाया जा सकता है — filters और लगाए गए tags के लिए उपयोगी।
- SLink<s-link>एक text link जो किसी दूसरे पेज या URL पर ले जाता है, या कोई command चलाता है।
- SMenu<s-menu>Actions की एक सूची जो overlay में दिखती है और एक button से खुलती है।
- SPressButton<s-press-button>एक toggle button जो दबा हुआ या बिना दबा हुआ रहता है, किसी mode या filter को चालू और बंद करने के लिए।
Feedback और status
- SBadge<s-badge>एक छोटा label जो किसी object का status दिखाता है, जैसे order, payment या fulfillment।
- SBanner<s-banner>एक प्रमुख संदेश जो पेज या section के ऊपर ज़रूरी जानकारी, चेतावनियाँ या errors दिखाता है।
- SEmptyState<s-empty-state>बताता है कि किसी view में अभी तक content क्यों नहीं है और merchants को पहला कदम उठाने की दिशा दिखाता है।
- SProgress<s-progress>एक progress bar जो दिखाता है कि कोई task अपनी अधिकतम value की ओर कितना आगे बढ़ा है।
- SSpinner<s-spinner>एक animated indicator जो बताता है कि content या कोई action load हो रहा है।
Forms
- SCheckbox<s-checkbox>हाँ/नहीं वाले चुनाव के लिए एक अकेला checkbox, जिसकी checked state v-model से bind होती है।
- SChoice<s-choice>किसी choice list के भीतर एक विकल्प।
- SChoiceList<s-choice-list>एक या कई विकल्प चुनने के लिए radio buttons या checkboxes का समूह।
- SColorField<s-color-field>Color value डालने के लिए एक text input, वैकल्पिक alpha channel के साथ।
- SColorPicker<s-color-picker>Color चुनने के लिए एक visual control।
- SDateField<s-date-field>तारीख डालने के लिए एक input।
- SDatePicker<s-date-picker>एक तारीख या तारीखों की range चुनने के लिए एक calendar।
- SDropZone<s-drop-zone>File upload का एक क्षेत्र जो drag and drop से या file picker से files स्वीकार करता है।
- SEmailField<s-email-field>Email addresses के लिए एक text input।
- SMoneyField<s-money-field>पैसों की राशि के लिए एक numeric input।
- SNumberField<s-number-field>वैकल्पिक minimum, maximum और step वाला एक numeric input।
- SOption<s-option>किसी select के भीतर एक विकल्प।
- SOptionGroup<s-option-group>किसी select के भीतर संबंधित विकल्पों को एक साझा label के तहत समूहित करता है।
- SPasswordField<s-password-field>Passwords के लिए एक text input जो टाइप किए गए अक्षरों को छिपाता है।
- SSearchField<s-search-field>Search queries के लिए एक text input।
- SSelect<s-select>किसी सूची में से एक विकल्प चुनने के लिए एक dropdown।
- SSwitch<s-switch>एक toggle switch जो किसी setting को चालू या बंद करता है।
- STextArea<s-text-area>Notes या descriptions जैसे लंबे content के लिए एक multi-line text input।
- STextField<s-text-field>Label, placeholder, validation error और help text वाला एक single-line text input।
- SUrlField<s-url-field>Web addresses के लिए एक text input।
Layout और संरचना
- SBox<s-box>Padding, background, border, radius और sizing के लिए एक सामान्य container।
- SDivider<s-divider>एक horizontal या vertical रेखा जो content को अलग करती है।
- SGrid<s-grid>Content को rows और columns में व्यवस्थित करने के लिए एक CSS grid container।
- SGridItem<s-grid-item>Grid का एक child जो कई columns या rows तक फैल सकता है।
- SListItem<s-list-item>किसी ordered या unordered list के भीतर एक item।
- SOrderedList<s-ordered-list>एक क्रमांकित सूची।
- SPage<s-page>Top-level page layout, जिसमें heading, page actions और content areas होते हैं।
- SQueryContainer<s-query-container>किसी element को size container बना देता है ताकि उसके children container queries से उसकी चौड़ाई के अनुसार ढल सकें।
- SScrollBox<s-scroll-box>एक container जो content के बाहर निकलने पर उसे scroll करता है।
- SSection<s-section>संबंधित content को समूहित करता है, वैकल्पिक heading, subheading और actions के साथ।
- SStack<s-stack>अपने children को एक row या column में एक जैसी spacing और alignment के साथ व्यवस्थित करता है।
- STable<s-table>Structured data के लिए एक table, वैकल्पिक pagination, loading state और छोटी screens पर list layout के साथ।
- STableBody<s-table-body>Table का body, जिसमें उसकी data rows होती हैं।
- STableCell<s-table-cell>Table row की एक cell।
- STableHeader<s-table-header>Table का एक column header।
- STableHeaderRow<s-table-header-row>Table के ऊपर column headers वाली row।
- STableRow<s-table-row>Table में data की एक row।
- SUnorderedList<s-unordered-list>एक bulleted सूची।
Media और visuals
- SAvatar<s-avatar>किसी व्यक्ति या business की image दिखाता है, या image न होने पर उनके initials।
- SIcon<s-icon>Polaris icon set से नाम के ज़रिए एक icon दिखाता है।
- SImage<s-image>Aspect ratio, fit, borders और lazy loading पर नियंत्रण के साथ एक image दिखाता है।
- SThumbnail<s-thumbnail>किसी product या file की एक छोटी, तय आकार की preview image।
Overlays
Typography और content
- SChip<s-chip>किसी tag या attribute के लिए एक static label, जिसे चाहें तो हटाया जा सकता है।
- SHeading<s-heading>एक heading जो पेज के किसी section का शीर्षक होती है।
- SNumber<s-number>आपके द्वारा पहले से format किया गया number दिखाता है, typography, tone और color styling के साथ।
- SParagraph<s-paragraph>Body text का एक block।
- SText<s-text>Tone, weight और emphasis styling वाला inline text।
- STooltip<s-tooltip>एक छोटा label जो किसी दूसरे element पर hover या focus होने पर दिखता है।