CSS: gap ​

.--gap-md — स्पेसिंग स्केल पर Flex/grid gap यूटिलिटीज़, शॉर्ट (--gap-sm) या लॉन्ग (--gap-small) स्पेलिंग। किसी भी कंपोनेंट (.instui-view.--gap-sm) पर अकेले या चेन करके उपयोग करने योग्य — वे कंपोनेंट्स जो पहले से अपने कंपोनेंट-विशिष्ट टोकन से अपना gap सेट करते हैं, उसे ओवरराइड किया जा सकता है।

Source: index.ts

उपयोग ​

css
@import "@pantoken/components/utilities.css";

डेमो ​

उदाहरण ​

html
<div class="--display-flex --gap-sm">
  <span>One</span>
  <span>Two</span>
</div>

मॉडिफायर ​

मॉडिफायरविवरण
.--gap-mdमध्यम स्पेसिंग टोकन को गैप के रूप में लागू करता है।
.--gap-*शॉर्ट और लॉन्ग स्पेसिंग-स्टेप स्पेलिंग दोनों में गैप यूटिलिटीज़।

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-component-shared-tokens-spacing-general-space-none<length>0rem
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem
--instui-spacing-space-sm<length>0.5rem
--instui-spacing-space-xl<length>1.5rem
--instui-spacing-space-xs<length>0.25rem
--instui-spacing-space2xl<length>2rem
--instui-spacing-space2xs<length>0.125rem