CSS مرجع API

رفرنس API CSS لایهٔ مؤلفه‌های مبتنی بر کلاس pantoken را پوشش می‌دهد: مؤلفه‌ها، ابزارها، قوانین سراسری و اعلان‌ها که بر پایهٔ سیستم توکن ساخته شده‌اند.

مولفه‌ها

نام	کلاس	خلاصه
agent-shell	.instui-agent-shell	یک کانتینر سطحی برای عوامل هوش مصنوعی.
alert	.instui-alert	یک پیام درون‌خطی با نوار رنگ وضعیت و یک نماد وضعیت ماسک‌شده از مجموعهٔ آیکون‌های مشترک.
avatar	.instui-avatar	آواتاری از کاربر که حروف ابتدای نام یا تصویر را نشان می‌دهد، به‌طور پیش‌فرض دایره‌ای.
badge	.instui-badge	نقطهٔ شمارش یا وضعیت کوچک که روی گوشهٔ هدف قرار می‌گیرد.
banner	.instui-banner	سطح پیام قابل بستن با آیکون برای اعلان‌های سطح صفحه یا در‌زمینهٔ محتوا.
billboard	.instui-billboard	بلوک بزرگی برای حالت خالی یا فراخوان به اقدام: یک آیکون یا تصویر قهرمان، یک عنوان و یک پیام.
breadcrumb	.instui-breadcrumb	ردیف مسیر (breadcrumb) با جداکننده‌ها؛ آخرین نان‌خرده صفحهٔ جاری است.
breadcrumb.link	li	یک نان‌خرده (InstUI Breadcrumb.Link)، یک <li> در <ol> والد؛ آخرین یکی صفحهٔ جاری است.
button	.instui-button	کنترل اقدام قابل دسترسی که از پالت توکن‌ها سبک‌دهی شده است؛ به‌طور پیش‌فرض اولیه.
byline	.instui-byline	یک شیء رسانه: یک شکل قهرمان در کنار عنوان و توضیح.
calendar	.instui-calendar	یک گرید ماهانهٔ ایستا با ناوبری، سرستون‌های روزهای هفته و سلول‌های روز.
calendar.day	.day	یک سلول روز (InstUI Calendar.Day)؛ -today، -selected و -outside-month وضعیت آن را نشانه‌گذاری می‌کنند.
card	.instui-card	یک کانتینر سطحی که محتوای دلخواه را می‌پذیرد.
checkbox	.instui-checkbox	چک‌باکس بومی و برچسب آن، یا یک سوییچ از طریق -variant-toggle.
close-button	.instui-close-button	دکمهٔ آیکون شفاف که نماد × را رسم می‌کند، در سه اندازه به‌علاوهٔ یک نوع روی رنگ.
context-view	.instui-context-view	کال‌آوت مرتفع با caret، قابل قرارگیری در هر ضلع؛ به‌عنوان [popover] بومی کار می‌کند.
drawer-layout	.instui-drawer-layout	طرح‌بندی تقسیم‌شده با یک سینی جانبی جمع‌شونده و پنل محتوای اصلی قابل اسکرول.
drawer-layout.content	.content	پنل محتوای اصلی که فضای باقی‌مانده کنار سینی را پر می‌کند.
drawer-layout.tray	.tray	پنل کناری کنار محتوای اصلی، با اورلی اختیاری و اصلاح‌کننده‌های سطحی شبیه سینی.
file-drop	.instui-file-drop	منطقهٔ کشیدن فایل با حالات hover، پذیرفته‌شده و ردشده.
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	پوشش درون‌جریانی که والد موقعیت‌یافتهٔ خود را پر می‌کند و محتوایش را مرکز می‌کند — مثلاً یک spinner روی یک کارت. برای مودال، <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	روکش ورودی عددی با ستون spinner برای +/-.
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 به‌علاوه یک کپشن اختیاری، با حالت‌های hover، طرح ثابت و طرح کارت‌پشته‌ای.
table.body	tbody	گروه ردیف‌های دادهٔ جدول (InstUI Table.Body).
table.cell	td	یک سلول داده (InstUI Table.Cell).
table.col-header	th	یک سلول سربرگ ستون (InstUI Table.ColHeader)؛ استایل پیش‌فرض th که برای th[scope="row"] توسط table.row-header بازنویسی می‌شود.
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	یک disclosure بومی <details> استایل‌داده‌شده با یک نشانگر (chevron) چرخان.
toggle-group	.instui-toggle-group	یک disclosure حاشیه‌دار مبتنی بر <details>: یک ردیف خلاصه با chevron و محتوای قابل جمع‌شدن.
tooltip	.instui-tooltip	یک حباب تولتیپ CSS برای حالت‌های hover و focus که قابل موقعیت‌دهی در هر سمت است.
tray	.instui-tray	یک پنل لبه‌پین‌شده که از هر سمت کشیده می‌شود؛ یک [popover] یا <dialog> بومی.
tree-browser	.instui-tree-browser	یک درخت disclosure از مجموعه‌های تو در تو و آیتم‌های برگ، با chevronهای چرخان.
view	.instui-view	پریمیتیو View: یک جعبهٔ خنثی با تغییرگرهای کلید-مقدار برای پس‌زمینه، حاشیه، شعاع، سایه، نمایش، موقعیت، overflow و نشانگر ماوس. هر یک از این تغییرگرها همچنین به‌صورت سراسری در دسترس است (تنها یا متصل به هر مؤلفهٔ دیگر) — رجوع کنید به ابزارهای 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 به‌علاوه painter مشترک -icon-<name> که پیش از هر عنصر، یک گلایف (در currentColor) را ماسک می‌کند.
layout	.--display-flex	ابزارهای نمایش و تراز متن — .--display-<value> و .--text-align-<value> — به‌عنوان کلاس‌های ترکیبی و سراسری، قابل استفاده تنها یا متصل به هر مؤلفه.
maskglobal	.--mask-overlay	یک نسخهٔ دوگانهٔ سراسری از تغییرگرهای 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 یا کانتینر در یک مقیاس نقطهٔ توقف با تم.
screen-reader-content	.instui-screen-reader-content	محتوا را از دید پنهان می‌کند در حالی که برای فناوری‌های کمکی قابل دسترسی نگه می‌دارد (الگوی استاندارد clip).
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	لوگوهای محصولات Instructure به‌صورت توکن‌های تصویر CSS: --instui-logo-<product>-<layout>-<mode> یک SVG داده-URI نگه می‌دارد، بنابراین یک لوگو از طریق مثلاً 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"]	ردیف شِلفِ اپلیکیشن: ناوبری جانبی، کانتینری با سربرگ، و پنل اختیاری.