CSS एपीआई संदर्भ

CSS API संदर्भ pantoken की क्लास-आधारित घटक परत को कवर करता है: टोकन सिस्टम पर बने कंपोनेंट्स, यूटिलिटीज़, वैश्विक नियम, और घोषणाएँ।

कम्पोनेंट्स

नाम	क्लास	सारांश
agent-shell	.instui-agent-shell	AI एजेंट्स के लिए एक सतह कंटेनर।
alert	.instui-alert	एक इनलाइन संदेश जिसके साथ स्थिति रंग बार और साझा आइकन सेट से एक मास्क्ड स्थिति ग्लीफ़ होता है।
avatar	.instui-avatar	एक उपयोगकर्ता अवतार जो प्रारम्भिक अक्षर या एक छवि दिखाता है, डिफ़ॉल्ट रूप से गोलाकार।
badge	.instui-badge	लक्ष्य के कोण पर रखा गया एक छोटा काउंट या स्थिति डॉट।
banner	.instui-banner	पेज-स्तर या संदर्भ-आधारित घोषणाओं के लिए एक डिस्मिस करने योग्य, आइकनयुक्त संदेश सतह।
billboard	.instui-billboard	एक बड़ा शून्य-स्थिति या कॉल-टू-एक्शन ब्लॉक: एक हीरो आइकन या छवि, एक हेडिंग, और एक संदेश।
breadcrumb	.instui-breadcrumb	सेपरेटर के साथ एक ब्रेडक्रम्ब ट्रेल; आखिरी क्रम्ब वर्तमान पेज है।
breadcrumb.link	li	एक क्रम्ब (InstUI Breadcrumb.Link), माता-पिता के <ol> में एक <li>; आखिरी वाला वर्तमान पेज है।
button	.instui-button	एक पहुँच-योग्य कार्रवाई नियंत्रण, टोकन पैलेट से स्टाइल किया गया; डिफ़ॉल्ट रूप से प्राथमिक।
byline	.instui-byline	एक मीडिया ऑब्जेक्ट: शीर्षक और विवरण के बगल में एक हीरो आकृति।
calendar	.instui-calendar	नेविगेशन, सप्ताह के दिन हेडर, और दिन कोशिकाओं के साथ एक स्थिर मासिक ग्रिड।
calendar.day	.day	एक दिन कोशिका (InstUI Calendar.Day); -today, -selected, और -outside-month इसकी स्थिति को चिह्नित करते हैं।
card	.instui-card	एक सतह कंटेनर जो Arbitrary सामग्री स्वीकार करता है।
checkbox	.instui-checkbox	एक नेटिव चेकबॉक्स और उसका लेबल, या -variant-toggle के माध्यम से एक स्विच।
close-button	.instui-close-button	एक पारदर्शी आइकन बटन जो अपना × ग्लीफ़ स्वयं बनाता है, तीन आकारों में और ऑन-रंग वैरिएंट में।
context-view	.instui-context-view	एक उभरा हुआ कॉलआउट जिसमें एक केरट है, किसी भी पक्ष पर स्थित किया जा सकता है; नेटिव [popover] के रूप में काम करता है।
drawer-layout	.instui-drawer-layout	एक स्प्लिट लेआउट जिसमें एक समेटने योग्य साइड ट्रे और एक प्राथमिक स्क्रॉल करने योग्य कंटेंट पेन है।
drawer-layout.content	.content	वह प्राथमिक सामग्री पेन जो ट्रे के बगल में शेष स्थान भरता है।
drawer-layout.tray	.tray	मुख्य सामग्री के बगल का साइड पैनल, वैकल्पिक ओवरले और ट्रे जैसे सतह मॉडिफायर के साथ।
file-drop	.instui-file-drop	हॉवर, स्वीकार किए गए, और अस्वीकार किए गए अवस्थाओं के साथ एक फ़ाइल ड्रॉपज़ोन।
form-field	.instui-form-field	एक फॉर्म-फ़ील्ड रैपर: एक लेबल, इसके नियंत्रण, और इनलाइन, अनिवार्य, या रीड-ओनली लेआउट।
form-field-group	.instui-form-field-group	एक <fieldset> समूह जिसमें एक लीजेंड, एक कॉलम या इनलाइन लेआउट, और कॉन्फ़िगर करने योग्य स्पेसिंग है।
form-field-messages	.instui-form-field-messages	फ़ील्ड हेल्प और मान्यकरण संदेश — संकेत, त्रुटि, सफलता, और स्क्रीन-रीडर-केवल — त्रुटि और सफलता पर एक ग्लीफ़ के साथ।
heading	.instui-heading	शीर्षक टाइपोग्राफी -level-h1 से -level-h6 तक।
img	.instui-img	एक स्टाइल किया गया <img> जिसमें डिस्प्ले, क्रॉप, और इफेक्ट मॉडिफायर्स हैं जो स्टैक होते हैं।
in-place-edit	.instui-in-place-edit	एक [contenteditable] जो फोकस होने तक टेक्स्ट के रूप में पढ़ता है, फिर इनपुट क्रोम दिखाता है।
input-group	.instui-input-group	लीडिंग और ट्रेलिंग आइकन स्लॉट के साथ टेक्स्ट इनपुट के चारों ओर एक मुखौटा।
link	.instui-link	साइज, डार्क बैकग्राउंड के लिए एक इनवर्स वैरिएंट, और इनलाइन या अनस्टाइल्ड रूपों के साथ एक स्टाइल किया गया हाइपरलिंक।
list	.instui-list	टोकन-निर्देशित आइटम स्पेसिंग के साथ एक सूची।
list.item	.instui-list	एक सूची आइटम (InstUI List.Item).
mask	.instui-mask	एक इन-फ्लो ओवरले जो इसके पोजिशन्ड पैरेंट को भरता है और अपनी सामग्री को केंद्रित करता है — उदाहरण के लिए कार्ड पर एक स्पिनर। मॉडल के लिए, नेटिव <dialog> पसंद करें (उसका ::backdrop मास्क है)। इन मॉडिफायर्स में से हर एक ग्लोबली भी उपलब्ध है (बेर, या किसी अन्य कंपोनेंट पर चेन करके) — देखें mask ग्लोबल यूटिलिटी।
menu	.instui-menu	आइटम्स, समूहों, और सेपरेटर के साथ एक ड्रॉपडाउन सतह।
menu.group	.group	एक लेबल वाला समूह हेडिंग (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	एक मेनू एंट्री (InstUI Menu.Item); -disabled, -highlighted, या -active/[aria-checked] जोड़ें।
menu.separator	.separator	आइटम्स के बीच एक डिवाइडर नियम (InstUI Menu.Separator).
metric	.instui-metric	एक लेबल किया गया आँकड़ा — कैप्शन के ऊपर एक बड़ी मान।
modal	.instui-modal	एक संवाद सतह (नेटिव <dialog> पर काम करता है); हेडर/बॉडी/फूटर भाग।
modal.body	.body	सामग्री क्षेत्र (InstUI Modal.Body); एक अकेला <img> फुल-ब्लीड हो जाता है।
modal.footer	.footer	एक्शन रो (InstUI Modal.Footer).
modal.header	.header	शीर्षक रो (InstUI Modal.Header).
number-input	.instui-number-input	एक नंबर-इनपुट मुखौटा जिसमें +/- स्पिनर कॉलम है।
pagination	.instui-pagination	पृष्ठ नेविगेशन: क्रमांकित पेज, पहला, पिछला, अगला, और अंतिम तीर, और रिक्तियों के लिए एलिप्सिस।
pagination.page	.page	एक पेज लिंक या बटन (InstUI Pagination.Page); वर्तमान पेज पर [aria-current] लागू होता है।
pill	.instui-pill	एक कॉम्पैक्ट स्थिति लेबल; साझा -icon-<name> रूप के साथ एक अग्रणी ग्लीफ़ जोड़ें।
popover	.instui-popover	एक उभरा हुआ सतह एक नेटिव [popover] के लिए, CSS एंकर पोजिशनिंग के साथ स्थित।
progress	.instui-progress	रंगीन मीटर, साइज, और वैकल्पिक मूल्य लेबल के साथ एक निर्धारित प्रोग्रेस बार।
progress-circle	.instui-progress-circle	एक वृत्ताकार प्रोग्रेस रिंग जो --value और --value-max कस्टम प्रॉपर्टीज़ से संचालित होता है।
radio	.instui-radio	एक नेटिव रेडियो बटन और उसका लेबल।
radio-input-group	.instui-radio-input-group	एक सिंगल-सेलेक्ट रेडियो <fieldset>, सादा या कनेक्टेड सेगमेंटेड टॉगल के रूप में।
range-input	.instui-range-input	एक स्टाइल किया गया रेंज स्लाइडर जिसमें एक इनवर्स वैल्यू बबल है।
rating	.instui-rating	भरे और खाली ग्लिफ़ के साथ एक स्टार रेटिंग और वैकल्पिक संख्यात्मक लेबल।
side-nav-bar	.instui-side-nav-bar	आइकन-ऊपर-लेबल आइटमों की एक ऊर्ध्वाधर नेविगेशन रेल, एक न्यूनतम आइकन-केवल मोड के साथ।
side-nav-bar.item	.item	एक नेविगेशन प्रविष्टि (InstUI SideNavBar.Item); -selected सक्रिय वाले को चिह्नित करता है।
simple-select	.instui-simple-select	एक स्टाइल किया गया स्थानीय <select> caret के साथ, जो टेक्स्ट-इनपुट की अवस्थाओं और आकारों से मेल खाता है।
spinner	.instui-spinner	एक एनिमेटेड लोडिंग रिंग; इसे role="status" और aria-label दें।
table	.instui-table	एक स्टाइल किया हुआ डेटा टेबल th और td के लिए और एक वैकल्पिक कैप्शन के साथ, होवर, फिक्स्ड, और स्टैक्ड-कार्ड लेआउट सहित।
table.body	tbody	टेबल का डेटा रो समूह (InstUI Table.Body)।
table.cell	td	एक डेटा सेल (InstUI Table.Cell)।
table.col-header	th	एक कॉलम-हेडर सेल (InstUI Table.ColHeader); डिफ़ॉल्ट th स्टाइलिंग, table.row-header द्वारा th[scope="row"] के लिए ओवरराइड की जाती है।
table.head	thead	टेबल का हैडर रो समूह (InstUI Table.Head)।
table.row	tr	एक टेबल रो (InstUI Table.Row)।
table.row-header	th[scope="row"]	एक रो-हेडर सेल (InstUI Table.RowHeader); रो-हेडर टोकन से स्टाइल किया गया, कॉलम-हेडर वाले टोकन से नहीं।
tabs	.instui-tabs	एक टैब्ड पैनल सेट: एक टैब सूची, चयन योग्य टैब, और उनके पैनल।
tabs.panel	.panel	एक टैब के लिए सामग्री पैनल (InstUI Tabs.Panel)।
tabs.tab	.tab	एक एकल टैब बटन (InstUI Tabs.Tab, पैरेंट Tabs की टैब सूची द्वारा कॉन्फ़िगर किया गया); -selected सक्रिय वाले को चिह्नित करता है।
tag	.instui-tag	किसी कीवर्ड या फ़िल्टर के लिए एक इनलाइन चिप।
text	.instui-text	बॉडी-टेक्स्ट टाइपोग्राफी — आकार, वज़न, रंग, और शैली मोडिफ़ायर के साथ।
text-area	.instui-text-area	एक स्टाइल किया गया, रिसाइज़ करने योग्य स्थानीय <textarea> जो टेक्स्ट इनपुट की समान अवस्थाएँ और आकार रखता है।
text-input	.instui-text-input	एक स्टाइल किया गया स्थानीय <input> — जिसमें date, time, और datetime-local शामिल हैं, जहाँ ब्राउज़र पिकर प्रदान करता है — वैधता अवस्थाओं और आकारों के साथ।
toggle-details	.instui-toggle-details	एक स्टाइल किया गया स्थानीय <details> डिस्क्लोज़र, घुमने वाला चिवरन के साथ।
toggle-group	.instui-toggle-group	एक बॉर्डर्ड डिस्क्लोज़र जो <details> पर आधारित है: एक चिवरन समरी रो और_COLLAPSIBLE_ सामग्री।
tooltip	.instui-tooltip	एक CSS होवर और फ़ोकस टूलटिप बबल, किसी भी ओर पर स्थित किया जा सकता है।
tray	.instui-tray	एक किनारे-फिक्स्ड पैनल जो किसी भी ओर से स्लाइड करता है; एक स्थानीय [popover] या <dialog>।
tree-browser	.instui-tree-browser	नेस्टेड संग्रहों और पत्ती आइटमों का एक डिस्क्लोज़र ट्री, घुमने वाले चिवरन के साथ।
view	.instui-view	View प्रिमिटिव: एक न्यूट्रल बॉक्स जिसमें बैकग्राउंड, बॉर्डर, रेडियस, शैडो, डिस्प्ले, पोजिशन, ओवरफ़्लो, और कर्सर के लिए की-वैल्यू मोडिफ़ायर होते हैं। इन सभी मोडिफ़ायर्स में से हर एक ग्लोबली भी उपलब्ध है (बिना किसी के, या किसी अन्य कंपोनेंट पर चेन करके) — देखें background/border/shadow/display/position/overflow/cursor यूटिलिटीज़।

यूटिलिटीज

नाम	क्लास	सारांश
color	.--text-danger	सैमांटिक रंग यूटिलिटीज़: .--bg-<name>, .--text-<name> (जिसका उपनाम .--color-<name> है), और .--border-<name> क्यूरेटेड सैमांटिक पेलट के लिए। इनमें से हर एक का एक कंपोनेंट-ऐटैच्ड उपनाम मोडिफ़ायर भी है (उदाहरण के लिए -bg-danger किसी भी .instui-<component> पर)।
cursor	.--cursor-pointer	cursor एक कॉम्पोज़ेबल, ग्लोबल क्लास के रूप में — .--cursor-<value> — बिना किसी के या किसी भी कंपोनेंट पर चेन करके उपयोग करने योग्य (.instui-button.--cursor-pointer)।
gap	.--gap-md	स्पेसिंग स्केल पर फ्लेक्स/ग्रिड gap यूटिलिटीज़, शॉर्ट (--gap-sm) या लॉन्ग (--gap-small) स्पेलिंग। बिना किसी के या किसी भी कंपोनेंट पर चेन करके उपयोग करने योग्य (.instui-view.--gap-sm) — जो कंपोनेंट पहले से अपना खुद का gap किसी कंपोनेंट-विशिष्ट टोकन से सेट करते हैं उन्हें ओवरराइड किया जा सकता है।
icon	.instui-icon	आइकन सिस्टम: .instui-icon साइजिंग प्लस साझा -icon-<name> पेंटर जो किसी ग्लिफ़ को ( currentColor में) किसी तत्व पर लागू होने से पहले मास्क करता है।
layout	.--display-flex	डिस्प्ले और टेक्स्ट-अलाइन यूटिलिटीज़ — .--display-<value> और .--text-align-<value> — कॉम्पोज़ेबल, ग्लोबल क्लास के रूप में, बिना किसी के या किसी भी कंपोनेंट पर चेन करके उपयोग करने योग्य।
maskglobal	.--mask-overlay	एक ग्लोबल, द्वैध कॉपी mask कंपोनेंट के ओवरले मोडिफ़ायर्स की — --mask-overlay, --mask-fullscreen, --mask-blur — बिना .instui-mask तत्व में रैप किए, किसी भी कंपोनेंट पर बिना या चेन करके उपयोग करने योग्य।
overflow	.--overflow-x-hidden	overflow-x/overflow-y को कॉम्पोज़ेबल, ग्लोबल क्लास के रूप में — .--overflow-x-<value> / .--overflow-y-<value> — बिना किसी के या किसी भी कंपोनेंट पर चेन करके उपयोग करने योग्य।
position	.--position-relative	position एक कॉम्पोज़ेबल, ग्लोबल क्लास के रूप में — .--position-<value> — बिना किसी के या किसी भी कंपोनेंट पर चेन करके उपयोग करने योग्य (.instui-button.--position-relative)।
responsive	[class*="-hidden-"],[class*="-show-"]	थीम्ड ब्रेकपॉइंट स्केल पर viewport- या container-चौड़ाई आधारित शो/हाइड क्लासेस।
screen-reader-content	.instui-screen-reader-content	सहायक तकनीक के लिए उपलब्ध रखते हुए दृश्य रूप से सामग्री को छुपाता है (मानक क्लिप पैटर्न)।
spacing	.--p-md	मार्जिन और पैडिंग उपयोगिताएँ — .--m<side>-<step> / .--margin-<side>-<step> और .--p<side>-<step> / .--padding-<side>-<step> स्पेसिंग स्केल पर (स्‍ଥानीय t/b/s/e/x/y या कोई नहीं, छोटा लिखित या पूरा शब्द — उदाहरण के लिए --mb-sm और --margin-bottom-small वही नियम हैं; margin वैकल्पिक रूप से auto भी स्वीकार करता है)। किसी भी कंपोनेंट पर अकेला या चेन करके उपयोगी (उदाहरण: class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index गहराई उपयोगिताएँ — .--stack-<level> (deepest, below, above, topmost) — किसी भी कंपोनेंट पर अकेला या चेन करके उपयोगी, ताकि लेयर्स हाथ से चुने गए नंबरों की बजाय पूर्वानुमेय ढंग से स्टैक हों।
transition	.instui-transition.-transition-fade-entering	Transition कंपोनेंट के लिए एनीमेशन स्टेट क्लासें — .instui-transition और स्टेट क्लासें (-transition-fade-entering, -transition-scale-exited, आदि) — किसी भी कंपोनेंट पर अकेला या चेन करके उपयोगी।
truncate	.--truncate	लाइन क्लैंपिंग द्वारा नियंत्रित इलिप्सिस ट्रंकेशन --lines से — किसी भी कंपोनेंट पर अकेला या चेन करके उपयोगी (.instui-button.--truncate).
visual-debug	.-with-visual-debug	लेआउट-डीबगिंग आउटलाइन: किसी भी एलिमेंट पर समेकित .-with-visual-debug लगाकर बॉक्स और उसके तात्कालिक बच्चों का आउटलाइन दिखाएँ, ताकि लेआउट की संरचना एक नज़र में दिखाई दे।

नियम

नाम	क्लास	सारांश
base	*	ऑप्ट-इन ग्लोबल रिसेट: box-sizing, पेज सतह, बेस टेक्स्ट रंग और फ़ॉन्ट, color-scheme, और लिंक डिफ़ॉल्ट्स।
prose	:where(body)	कच्चे HTML के लिए टाइपोग्राफिक डिफ़ॉल्ट — हेडिंग्स, पैरा, सूचियाँ, लिंक और कोड — जहाँ भी आयात किया जाता है स्वचालित रूप से लागू (डिफ़ॉल्ट :where(body)); अलग कंटेंट रूट टार्गेट करने के लिए options.scope पास करें (उदा. .vp-doc).

Plugins

नाम	क्लास	सारांश
logos	.logos	CSS इमेज टोकन के रूप में Instructure उत्पाद लोगो: --instui-logo-<product>-<layout>-<mode> में डेटा-URI SVG रहता है, इसलिए एक लोगो उदाहरण के लिए background-image: var(--instui-logo-canvas-horizontal-color) के माध्यम से पेंट होता है।
primitives	.instui-bg-primitive-color-white	रॉ प्रिमिटिव पैलेट के लिए ऑप्ट-इन यूटिलिटी क्लासेस: .instui-bg-/fg-/border-primitive-color-<name> प्रिमिटिव कलर टोकन्स से रंग भरते हैं, साथ ही प्रिमिटिव फ़ॉन्ट टोकन्स के लिए font-family/font-weight यूटिलिटीज़। इन्हें सैमान्टिक उपयोगिताओं से बाहर रखा गया है ताकि ओवरराइड्स वहाँ केवल सैमान्टिक रहें।
visual-debug	.-with-visual-debug	लेआउट-डीबगिंग आउटलाइन: किसी भी एलिमेंट पर समेकित .-with-visual-debug लगाकर बॉक्स और उसके तात्कालिक बच्चों का आउटलाइन दिखाएँ, ताकि लेआउट की संरचना एक नज़र में दिखाई दे।

layout

नाम	क्लास	सारांश
callout	div[class~="instui-callout"]	संदेश या संक्षिप्त नोट के लिए इनलाइन सूचना अलर्ट।
hero	div[class~="instui-hero"]	शीर्षक, उपशीर्षक और वैकल्पिक बैकग्राउंड इमेज के साथ फुल-विथ हेडर सेक्शन।
page-layout	div[class~="instui-page-layout"]	हेडर, साइडबार और मुख्य सामग्री के साथ मानक तीन-स्तंभ पेज लेआउट।
rubric-note	div[class~="instui-rubric-note"]	रूब्रिक श्रेणियों और स्कोरिंग संकेतकों के साथ संरचित नोट।
testimonial	div[class~="instui-testimonial"]	प्रतिष्ठा और वैकल्पिक इमेजरी के साथ उद्धरण या प्रशंसापत्र प्रदर्शन।
two-column	div[class~="instui-two-column"]	बाएँ और दाएँ सामग्री क्षेत्रों के साथ दो-स्तंभ लेआउट।
wrapper	body[class~="instui-display-flex"]	ऐप-शेल रो: साइड नेव, हेडर वाला कंटेनर, और वैकल्पिक पैनल।