CSS API حوالագիր

CSS API հղումը ընդգրկում է pantoken-ի դաս-ամենայն компонենտային շերտը՝ components, utilities, global rules և declarations, որոնք կառուցված են token համակարգի վրա։

Ակումբներ

Անուն	Դաս	Ամփոփում
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	Մեկ հասանելի գործողության կոճակ, ձևավորված token փայտով; որպես դեֆոլտ՝ primary։
byline	.instui-byline	Մեդիա օբյեկտ՝ հերո լուսանկար/ֆիգուրի կողքին վերնագիր և մանրամասներ։
calendar	.instui-calendar	Ստատիկ ամսվա ցանց՝ նավիգացիայով, շաբաթվա օրերի վերնագրերով և օրվա բջիջներով։
calendar.day	.day	Օրվա բջիջ (InstUI Calendar.Day); -today, -selected, և -outside-month նշում են դրա վիճակը։
card	.instui-card	Մակերեսային տարա, որը ընդունում է ցանկացած պարունակություն։
checkbox	.instui-checkbox	Նատիվ checkbox և նրա պիտակ, կամ սկիչ՝ -variant-toggle միջոցով։
close-button	.instui-close-button	Թափանցիկ պատկերակ-կոճակ, որը կերտում է իր × պատկերակը, երեք չափսով և on-color տարբերակով։
context-view	.instui-context-view	Բարձրացված կոչում քեռով (caret), կարող է դիրքավորվել ցանկացած կողմում; գործում է որպես նատիվ [popover]։
drawer-layout	.instui-drawer-layout	Միջնատարավակ կառուցվածք՝collapsible կողային տուփով և հիմնական գրանցվող պարունակության փնջով։
drawer-layout.content	.content	Հիմնական պարունակության պատուհան, որը լցնում է մնացած տարածքը տուփի կողքին։
drawer-layout.tray	.tray	Կողային պանել՝ հիմնական պարունակության կողքին, ընտրված ֆոնի և տրայ-լայն մակերեսի մոդիֆայերեններով։
file-drop	.instui-file-drop	Ֆայլերի dropzone՝ hover, ընդունված և մերժված վիճակներով։
form-field	.instui-form-field	Ֆորմ-ֆիլդի обյեկտ՝ պիտակ, նրա կառավարչական տարաներ և ինլայն/պարտադիր/readonly դասակարգեր։
form-field-group	.instui-form-field-group	<fieldset> խումբ՝ լեգենդով, սյունային կամ ինլայն դասավորությամբ և կարգավորելի տեղաշարժով։
form-field-messages	.instui-form-field-messages	Բաղադրիչի օգնության և վալիդացիայի հաղորդագրություններ՝ hint, error, success և միայն էկրան-կարդացողի համար՝ սխալի և հաջողության դեպքում պատկերակով։
heading	.instui-heading	Վերնագրային տիպոգրաֆիա -level-h1-ից -level-h6-ը։
img	.instui-img	Ձևավորված <img>՝ display, crop և effect մոդիֆայերով, որոնք տեղափոխվում են stack-ով։
in-place-edit	.instui-in-place-edit	[contenteditable] ֆասադ՝ որպես տեքստ ընթերցելի մինչև ֆոկուս, այնուհետև ցուցադրում է ինպուտի UI։
input-group	.instui-input-group	Տեքստային input-ի կեղծ դիմաքեր՝ առջևի և հետևի պատկերակ-սլոտներով։
link	.instui-link	Ֆորմավորված հիպերհղում՝ չափերով, հակառակ տարբերակ մուգ ֆոնների համար և ինլայն կամ առանց ոճի ֆորմաներով։
list	.instui-list	Ցուցակ՝ token-ից ղեկավարվող իրերի միջակայքով։
list.item	.instui-list	Ցուցակի տարր (InstUI List.Item).
mask	.instui-mask	Ըստ հոսքի overlays, որը լցնում է դիրքավորված ծնողը և կենտրոնացնում իր պարունակությունը — օրինակ՝ սփինները քարտի վրա։ Մոդալների համար նախընտրելի է նատիվ <dialog> (խանութը ::backdrop է). Այս մոդիֆայերների յուրաքանչյուրն էլ հասանելի է գլոբալորեն (անմաքուր կամ chained onto այլ կոմպոնենտ) — տես mask գլոբալ utility։
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>-ի վրա); header/body/footer մասեր։
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	Էջային նավիգացիա՝ թվային էջեր, առաջին, նախորդ, հաջորդ և վերջին սլաքներ, և elipsis բացարձակման համար։
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	Ձևավորված range slider՝ հակառակ արժեքի բուբլով։
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>՝ գուրտով, համընկնող տեքստային ինփութի վիճակների և չափերի հետ։
spinner	.instui-spinner	Անիմացված լոադինգ-շրջան; հատկացրեք role="status" և aria-label։
table	.instui-table	Պայմանավորված տվյալների աղյուսակ th և td-ի համար՝ նաև տարբերակով ենթագրով, hover, fixed և stacked-card макետներով։
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>-ի վրա՝ չևրոնային վերնագիր և սեղմվող բովանդակություն։
tooltip	.instui-tooltip	CSS hover և focus tooltip փուչիկ, դիրքավորվող ցանկացած կողմում։
tray	.instui-tray	Եզրակից կցվող պանել, որը սլայդով մտնում է ցանկացած կողմից; բնիկ [popover] կամ <dialog>։
tree-browser	.instui-tree-browser	Բացվող ծառ՝ նեստացված հավաքումներով և եզրափակիչ տարրերով, պտտվող չևրոններով։
view	.instui-view	View պրիմիտիվը՝ նյուտրալ արկղ՝ բանալի-արժեք մոդիֆիկատորներով՝ ֆոն, եզր, ռադիուս, ստվեր, display, position, overflow և cursor։ Այս բոլորը նաև գլոբալ հասանելի են՝ տես 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	Flex/grid gap օգտակարություններ՝ spacing սանդղակով, կարճ (--gap-sm) կամ երկար (--gap-small) ձևավորումով։ Օգտագործելի խիստ կամ շղթայական ցանկացած կոմպոնենտի վրա (.instui-view.--gap-sm) — այն կոմպոնենտները, որոնք արդեն սահմանում են իրենց gap կոմպոնենտ-սպեցիֆիկ տոկենից, կարող են վերազատվել։
icon	.instui-icon	Նշանի համակարգը՝ .instui-icon չափավորում և ընդհանուր -icon-<name> նկարչի մեսին, որը.mask-ով պատում է պատկերակը (ուտ 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-"]	Տեսկոնի կամ կոնտեյների լայնությամբ ցուցադրելու/թաքցնելու կլասեր՝ թեմայացրված breakpoint սանդղակով։
screen-reader-content	.instui-screen-reader-content	視ողաբար թաքցնում է բովանդակությունը՝ այն թողնելով հասանելի օգնական տեխնոլոգիաների համար (סטանդարտ clip օրինակ).
spacing	.--p-md	Margin և 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	Եզրագծային կարճացում (ellipsis)՝ տողերի սահմանմամբ՝ կառավարվում է --lines-ով — կարելի է օգտագործել մաքուր կամ որևէ կոմպոնենթի հետ շղթայական (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Ցուցադրման դաշտի սխեմատիկ կմախք-որոշիչ՝ կոմպոզիտ .-with-visual-debug ավելացնելով ցանկացած էլեմենտի վրա՝ նշելու տուփն ու նրա անմիջական երեխաներին, որպեսզի макետի կառուցվածքը ակնթարթորեն տեսանելի լինի։

Որոնման կանոններ

Անուն	Դաս	Ամփոփում
base	*	Ընտրովի գլոբալ վերագործարկում (reset): box-sizing, էջի մակերեսը, հիմնական տեքստի գույնը և ֆոնը, color-scheme և հիպերհղման (link) ստանդարտները։
prose	:where(body)	Համատիպաֆոնտային (typographic) ստանդարտներ հում 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	Ընտրովի օգտակար դասեր հում սկզբունքային (primitive) գունապնակի համար՝ .instui-bg-/fg-/border-primitive-color-<name> ներկում են գույներ սկզբունքային գույնի տոկեններից, և font-family/font-weight օգտակար ծառայություններ հիմնական ֆոնտի տոկենների համար։ Դրանք պահպանվում են semantic utility-ներից դուրս՝ որպեսզի այնտեղի վերագրումները մնան միայն սեմանտիկ։
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"]	Strukturalized նոտա՝ ռուբրիկայի կատեգորիաներով և գնահատման նշիչներով։
testimonial	div[class~="instui-testimonial"]	Անմատաղձ կամ վկայություն ցուցադրություն՝ աղբյուրով (attribution) և ցանկության դեպքում պատկերով։
two-column	div[class~="instui-two-column"]	Երկու սյուների դասավորություն՝ ձախ և աջ բովանդակային շրջաններով։
wrapper	body[class~="instui-display-flex"]	App-shell տող՝ կողմնային նավիգացիա, կոնտեյներով վերնագիր և ցանկության դեպքում պանել։