CSS מדריך API

מדריך ה־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), <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	כפתור אייקון שקוף המצייר את צל ה־× שלו, בשלושה גדלים ובגרסת on-color.
context-view	.instui-context-view	קריאה מוגבהת עם חרטום, ניתנת למיקום מכל צד; פועלת כ־[popover] מקומי.
drawer-layout	.instui-drawer-layout	פריסה מפוצלת עם מגירת צד מתקפלת וממשק תוכן ראשי הניתן לגלילה.
drawer-layout.content	.content	משטח התוכן הראשי שממלא את השטח הנותר לצד המגירה.
drawer-layout.tray	.tray	לוח צדדי לצד התוכן הראשי, עם אפשרות להטלה מעל ועם מסננים הדומים למגירה.
file-drop	.instui-file-drop	אזור השלכת קבצים עם מצבי hover, accepted ו־rejected.
form-field	.instui-form-field	עטיפת שדה טופס: תווית, הבקרים שלה ופריסות inline, required או readonly.
form-field-group	.instui-form-field-group	קבוצת <fieldset> עם אגדה, פריסת עמודה או inline וריווח ניתן לקונפיגורציה.
form-field-messages	.instui-form-field-messages	עזרה לשדה והודעות ולידציה — רמז, שגיאה, הצלחה ו־screen-reader-only — עם גליף בשגיאה ובהצלחה.
heading	.instui-heading	טיפוגרפיית כותרות מ־-level-h1 עד -level-h6.
img	.instui-img	‏<img> מעוצב עם modifiers של תצוגה, חיתוך ואפקט שמערמים זה על זה.
in-place-edit	.instui-in-place-edit	‏[contenteditable] שמתנהג כטקסט עד שמקבל פוקוס, ואז מציג ממשק קלט.
input-group	.instui-input-group	חזית סביב שדה טקסט עם חריצי אייקון מובילים וסופיים.
link	.instui-link	קישור מעוצב עם גדלים, וריאנט הפוך לרקעים כהים, ופורמות inline או לא מעוצבות.
list	.instui-list	רשימה עם ריווח פריטים מונע על ידי טוקנים.
list.item	.instui-list	פריט רשימה (InstUI List.Item).
mask	.instui-mask	שכבת překryv בזרם שממלאת את ההורה הממוקם וממרכזת את תוכנה — לדוגמה ספינר מעל כרטיס. עבור מודל, העדיף <dialog> מקומי (ה־::backdrop שלו הוא המסיכה). כל אחד מהמשננים האלה זמין גם גלובלית (נקי, או שרשור על כל רכיב אחר) — ראו את תועלת הגלובלית mask.
menu	.instui-menu	משטח dropdown של פריטים, קבוצות ומפרידים.
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> בודד מתפרש ל־full-bleed.
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 anchor positioning.
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	גילוי (disclosure) מקומי מעוצב <details> עם שרוול/חץ מסתובב (chevron).
toggle-group	.instui-toggle-group	גילוי מקושט עם מסגרת המבוסס על <details>: שורת סיכום עם chevron ותוכן מתקפל.
tooltip	.instui-tooltip	בועת טולטיפ (tooltip) עם hover ו-focus ב-CSS, ניתנת למיקום מכל צד.
tray	.instui-tray	פאנל מוצמד לקצה שנכנס מחלק כלשהו; יכול להיות [popover] או <dialog> מקומי.
tree-browser	.instui-tree-browser	עץ גילויים (disclosure) של אוספים מקוננים ופריטים עלים, עם chevrons מסתובבים.
view	.instui-view	הפרימיטיב View: תיבה ניטרלית עם מודיפיירים של מפתח-ערך עבור רקע, גבול, רדיוס, צל, תצוגה, מיקום, גלישה וסמן. כל אחד מהמודיפיירים האלה זמין גם כגלובלי (חסר או שרשרת על כל קומפוננטה) — ראו את כלי העזר background/border/shadow/display/position/overflow/cursor.

כלים עזר (Utilities)

שם	מחלקה	סיכום
color	.--text-danger	כלי עזר לצבעים סמנטיים: .--bg-<name>, .--text-<name> (מכונה גם .--color-<name>), ו-.--border-<name> לפלטת הצבעים הסמנטית הממוינת. לכל אחד מהם יש גם מודיפייר מקושר לקומפוננטה (למשל -bg-danger על כל .instui-<component>).
cursor	.--cursor-pointer	cursor כ-class גלובלי קומפוזבילי — .--cursor-<value> — שניתן להשתמש בו בקלות או כשרשרת על כל קומפוננטה (.instui-button.--cursor-pointer).
gap	.--gap-md	כלי עזר של Flex/Grid 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	עותק גלובלי כפול של מודיפיירי-overlay של קומפוננטת mask — --mask-overlay, --mask-fullscreen, --mask-blur — שניתנים לשימוש בודד או כשרשרת על כל קומפוננטה, ללא עטיפה ב-element .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y כקלאסים גלובליים קומפוזביליים — .--overflow-x-<value> / .--overflow-y-<value> — לשימוש בודד או כשרשרת על כל קומפוננטה.
position	.--position-relative	position כ-class גלובלי קומפוזבילי — .--position-<value> — לשימוש בודד או כשרשרת על כל קומפוננטה (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	מחלקות הצגה/הסתרה לפי רוחב תצוגה או מיכל על פני סקלת נקודות שבירה בנושא.
screen-reader-content	.instui-screen-reader-content	מסתיר תוכן ויזואלית תוך שמירה על נגישותו לטכנולוגיות סיוע (תבנית ה-clipping הסטנדרטית).
spacing	.--p-md	תועלות מרווחים ו-padding — .--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> מכיל data-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"]	שורת app-shell: ניווט צדדי, מכולה עם כותרת ולוח אופציונלי.