CSS Tohutoro API

Ko te whakawhānuitanga API CSS e kapi ana i te papa waahanga-kāwai o pantoken: ngā kōwae, ngā taputapu, ngā ture ā-ao, me ngā whakapuakitanga i hangaia i runga i te pūnaha tohu.

Ngā Wāhanga

Ingoa	Kāwai	Whakarāpopototanga
agent-shell	.instui-agent-shell	He ipu mata mō ngā kaitautoko AI.
alert	.instui-alert	He karere rārangi-iri me tētahi pae tae ā-tūnga me tētahi tohu tūnga āpokapa mai i te kohinga tohu āwhina.
avatar	.instui-avatar	He ātaahua kaiwhakamahi e whakaatu ana i ngā takahuri rānei he whakaahua, porohita mā te taunoa.
badge	.instui-badge	He pūtau tau iti, he piro tūnga rānei i whakatakotoria ki runga i te kokonga o tētahi tūnga.
banner	.instui-banner	He mata karere ka taea te whakakore, he tohu hoki, mō ngā pānui taumata whārangi, ā-roanga rānei.
billboard	.instui-billboard	He poraka tūnga-kore nui, he karanga ki te mahi rānei: he tohu ārahi, he taitara, me tētahi karere.
breadcrumb	.instui-breadcrumb	He ara pihikete me ngā wehewehe; ko te pihikete whakamutunga ko te whārangi o nāianei.
breadcrumb.link	li	He pihikete (InstUI Breadcrumb.Link), he <li> i roto i te <ol> matua; ko te mea whakamutunga ko te whārangi o nāianei.
button	.instui-button	He mana mahi āhei, kua whakatikaina mai i te papa tohu; matua mā te taunoa.
byline	.instui-byline	He tūnga pāpāho: he ahua ārahi i te taha o te taitara me te whakamārama.
calendar	.instui-calendar	He whatunga marama marama marama-marama me te whakatere, ngā upoko rā o ngā rā, me ngā pūtau rā.
calendar.day	.day	He pūtau rā (InstUI Calendar.Day); ko -today, -selected, me -outside-month e tohu ana i tōna āhua.
card	.instui-card	He ipu mata e āhei ana ki te tūnga ihirangi whānui.
checkbox	.instui-checkbox	He pouaka tirotiro mōrearea ā-tūmatanui me tana tūtohu, rānei he pana mā te -variant-toggle.
close-button	.instui-close-button	He pātene tohu kōmaru hāngai e tuhi ana i tana ake tohu ×, i ngā rahi e toru me tētahi rerekētanga ā-tāhua.
context-view	.instui-context-view	He karanga whakanuia me tētahi kaitiaki, ka taea te whakanoho ki tetahi taha; ka mahi hei [popover] taketake.
drawer-layout	.instui-drawer-layout	He whakatakotoranga wehe e whai ana i tētahi papu taha ka taea te kumea, me tētahi matua pane ihirangi whakatere.
drawer-layout.content	.content	Te pane ihirangi matua e whakakī ana i te wāhi e toe ana i te taha o te papu.
drawer-layout.tray	.tray	Te pānui taha i te taha o te ihirangi matua, me ngā āhuatanga ā-ōrite pērā i te ārai me te mata rite-papu.
file-drop	.instui-file-drop	He wāhi takai kōnae me ngā āhuatanga pērā i te huri, te whakaaetanga, me ngā āhua whakakore.
form-field	.instui-form-field	He kōpaki mara puka: he taitara, ōna mana, me ngā whakaritenga wā i roto, e hiahiatia ana, rānei e panuitia ana.
form-field-group	.instui-form-field-group	He rōpū <fieldset> me te tohu, he whakatakotoranga tīwhiri, raraunga rānei, me ngā waahi wā ka taea te whiriwhiri.
form-field-messages	.instui-form-field-messages	Ngā āwhina mara me ngā karere tautuhi — aratohu, pepeha hapa, angitū, me ngā mō tēnei-pārongo-kore — me tētahi tohu i runga i te hapa me te angitū.
heading	.instui-heading	Te kāhua taitara mai i -level-h1 ki -level-h6.
img	.instui-img	He <img> kua whakatakotoria me ngā whakahaere whakaatu, tapahi, me ngā pānga e piri tata ana.
in-place-edit	.instui-in-place-edit	He [contenteditable] e pānuitia ana hei kuputuhi kia whanake te aro, kātahi ka whakaatu i te anga urunga.
input-group	.instui-input-group	He aturanga i runga i te mata mō te kuputuhi me ngā kōwhiringa tohu ā-mua me ā-muri.
link	.instui-link	He hononga āhua kua whakapaipai me ngā rahi, tētahi rerekētanga urutau mō ngā papamuri pango, ā me ngā āhua ā-rārangi rānei.
list	.instui-list	He rārangi me te wāhi whakatakoto ā-aitu mā ngā tūemi.
list.item	.instui-list	He tūemi rārangi (InstUI List.Item).
mask	.instui-mask	He ārai i roto i-te-taumata e whakakī ana i tana mātua kua whakatakotoria, ka pokapū i ōna ihirangi — hei tauira he poro huri i runga i tētahi kāri. Mō tētahi matapihi matatini, whakamahia he <dialog> taketake (ko tana ::backdrop te wera). Ia kotahi o ēnei pūmotu e wātea ana hoki ā-ao (mā te kore, rānei ka tāpiri ki runga i tētahi atu kīwa) — tirohia te taputapu ā-ao mask.
menu	.instui-menu	He mata taka iho o ngā tūemi, ngā rōpū, me ngā wehewehe.
menu.group	.group	He taitara rōpū ārai — (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	He tomokanga rārangi (InstUI Menu.Item); tāpiri -disabled, -highlighted, rānei -active/[aria-checked].
menu.separator	.separator	He ture wehe i waenga i ngā tūemi (InstUI Menu.Separator).
metric	.instui-metric	He tatauranga taitara — he uara nui kei runga i tētahi taitara whakarāpopototanga.
modal	.instui-modal	He mata kōrero (ka mahi i runga i te <dialog> taketake); he wāhanga upoko/tinana/waea.
modal.body	.body	Te rohe ihirangi (InstUI Modal.Body); ka toro-whānui te <img> takitahi.
modal.footer	.footer	Te rārangi mahi (InstUI Modal.Footer).
modal.header	.header	Te rārangi taitara (InstUI Modal.Header).
number-input	.instui-number-input	He ārahi tomo-nui me tētahi kōwae +/- mō te poro.
pagination	.instui-pagination	Te whakatere whārangi: whārangi nama, tuatahi, o mua, ā muri, ā whakamutunga, me te tohu mō ngā wāhi hēkona.
pagination.page	.page	He hononga whārangi rānei he pātene (InstUI Pagination.Page); ko te whārangi o nāianei ka mau i te [aria-current].
pill	.instui-pill	He tapanga tūnga pūkete; tāpiri he tohu ā-mua mā te anga -icon-<name> āwhina.
popover	.instui-popover	He mata whakanuia mō te [popover] taketake, e whakanohoia ana mā te whakatakoto ā-CSS.
progress	.instui-progress	He pae ahunga whakarite me tētahi mita tae, ngā rahi, me tētahi tapanga uara kōwhiringa.
progress-circle	.instui-progress-circle	He wira ahunga porohita e taraihia ana e ngā āhuatanga ritenga --value me --value-max.
radio	.instui-radio	He pātene reo taketake me tana tūtohu.
radio-input-group	.instui-radio-input-group	He rōpū pātene reo kotahi-te-kōwhiri <fieldset>, he āhua mārama, he rānei hei pana rēreti hono.
range-input	.instui-range-input	He rāruraru rārangi whānui kua whakapaipai me te pōkarekare uara whakatika.
rating	.instui-rating	He reiti whetū me ngā āhuatanga kīhai i whakakīia me ngā wāhi kore-kī, me tētahi tapanga ā-tau kōwhiringa.
side-nav-bar	.instui-side-nav-bar	He ara whakatere tūāhua poutū o ngā tohu-iti-nui i runga i te tapanga, ā, he aratau iti anake-ngā tohu tāme.
side-nav-bar.item	.item	He tomokanga whakatere (InstUI SideNavBar.Item); ka tohu -selected i te mea tūnga.
simple-select	.instui-simple-select	He <select> taketake kua oti te āhua me tētahi karet, e ōrite ana ki ngā āhuatanga me ngā rahi o te tomokanga kuputuhi.
spinner	.instui-spinner	He whiringa porowhita kawemai e neke ana; whakamānawa ki a ia te role="status" me tētahi aria-label.
table	.instui-table	He tēpu raraunga āhua mō th me td me tētahi taitara kōwhiringa, me ngā whakamahinga paheko, tatau pakari, me ngā aronga kāri weriweri.
table.body	tbody	Ko te rōpū rārangi raraunga o te tēpu (InstUI Table.Body).
table.cell	td	He pūtau raraunga (InstUI Table.Cell).
table.col-header	th	He pūtau taitara-column (InstUI Table.ColHeader); ko te āhua taunoa th ka tārewahia e table.row-header mō th[scope="row"].
table.head	thead	Ko te rōpū rārangi upoko o te tēpu (InstUI Table.Head).
table.row	tr	He rārangi tēpu (InstUI Table.Row).
table.row-header	th[scope="row"]	He pūtau taitara-rārangi (InstUI Table.RowHeader); kua āhuaia nō ngā tohu taitara-rārangi, ehara i ngā tohu taitara-column.
tabs	.instui-tabs	He huinga papa rārangi me ripa: rārangi ripa, ripa rānei ka taea te kōwhiri, me ō rātou papa.
tabs.panel	.panel	Te papa ihirangi mō tētahi ripa (InstUI Tabs.Panel).
tabs.tab	.tab	He pātene kotahi ripa (InstUI Tabs.Tab, kua whirihorahia mā te rārangi ripa o te matua Tabs); ka tohu -selected i te mea tūnga.
tag	.instui-tag	He pihikete ā-rārangi mō tētahi kupu matua, kupu rānei taatari.
text	.instui-text	Ngā momo tuhinga ā-tinana mō te kuputuhi tinana me ngā whakarereke rahi, taumaha, tae, me te āhua.
text-area	.instui-text-area	He <textarea> taketake kua āhua, ka taea te whakarahi, me ngā āhuatanga me ngā rahi ōrite ki te tomokanga kuputuhi.
text-input	.instui-text-input	He <input> taketake kua āhua — tae atu ki date, time, me datetime-local, ā, ko te pūtirotiro ka tuku i te kaitīpoka — me ngā āhuatanga whakau me ngā rahi.
toggle-details	.instui-toggle-details	He <details> taketake kua āhua mō te whakamārama me tētahi pere hurihuri.
toggle-group	.instui-toggle-group	He whakamārama pereti ā-papa i hangaia i runga i <details>: he rārangi whakarākei pere me te ihirangi takiri.
tooltip	.instui-tooltip	He puehu kōrero ā-CSS mō te paheko me te aro, e taea ana te tū ki ngā taha katoa.
tray	.instui-tray	He papa here-iti e pēhia ana ki ngā taha ka taka mai i tētahi taha; he [popover] taketake, ā, he <dialog> rānei.
tree-browser	.instui-tree-browser	He rākau whakamarama o ngā kohinga tārahi me ngā tūemi rauemi, me ngā pere hurihuri.
view	.instui-view	Ko te pūtau View: he pouaka tūturu me ngā whakarerekētanga matua-uara mō te papamuri, tātai, porohita, atarangi, whakaatu, tūranga, pāpaku, me te kī. Kei ia kotahi o ēnei whakarerekētanga te wāhi ki te taumata ao (mā te whakamahi māori, mena rānei i runga i tētahi atu kōwae) — tirohia ngā taputapu background/border/shadow/display/position/overflow/cursor.

Ngā Utauta

Ingoa	Kāwai	Whakarāpopototanga
color	.--text-danger	Ngā taputapu tae ā-āhuatanga: .--bg-<name>, .--text-<name> (kua ingoa-iritia hei .--color-<name>), me .--border-<name> mō te rārangi tae ā-āhua kua whakaritea. Kei ia o ēnei he ingoa-taapiri honohono ā-kōwae (hei tauira -bg-danger i runga i tētahi .instui-<component>).
cursor	.--cursor-pointer	cursor hei karaehe whakakotahi, ā-ao — .--cursor-<value> — ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae (.instui-button.--cursor-pointer).
gap	.--gap-md	Ngā taputapu Flex/grid gap i runga i te taera wāhanga, ā, kupu poto (--gap-sm) rānei roa (--gap-small). Ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae (.instui-view.--gap-sm) — ko ngā kōwae e tautuhi ana i ā rātou ake gap mai i tētahi tohu ā-kōwae ka āhei pea te whakakapi.
icon	.instui-icon	Te pūnaha ā-tahua: te āhua whakatau .instui-icon ā-taimana me te peita tohatoha -icon-<name> e whakamask i tētahi tohu (i roto i currentColor) i mua i tētahi wāhanga.
layout	.--display-flex	Ngā taputapu whakaatu me te whakatikatika-kuputuhi — .--display-<value> me .--text-align-<value> — hei karaehe whakakotahi, ā-ao, ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae.
maskglobal	.--mask-overlay	He kape ā-ao, rua o ngā whakarerekētanga kopae o te kōwae mask — --mask-overlay, --mask-fullscreen, --mask-blur — ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae, me te kore e whakakapi i roto i tētahi tūemi .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y hei karaehe whakakotahi, ā-ao — .--overflow-x-<value> / .--overflow-y-<value> — ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae.
position	.--position-relative	position hei karaehe whakakotahi, ā-ao — .--position-<value> — ka taea te whakamahi ā-kore, ā-rārangi rānei ki runga i tētahi kōwae (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Ngā karaehe whakaatu/ huna whānui mō te whanui tirohanga, rānei te whanui ipu, puta noa i tētahi tere-matua kaupapa.
screen-reader-content	.instui-screen-reader-content	E huna ana i te tirohanga, engari ka pupuri tonu i te wāhi mō ngā taputapu āwhina (te tauira paera tapahi).
spacing	.--p-md	Ngā taputapu margin me padding — .--m<side>-<step> / .--margin-<side>-<step> me .--p<side>-<step> / .--padding-<side>-<step> i runga i te paiāwhina mokowā (ngā taha t/b/s/e/x/y rānei kāore, āpitihia hei poto, hei roa rānei — hei tauira --mb-sm me --margin-bottom-small he ture kotahi; ka taea hoki te whakamahi i te margin ki auto). Ka taea te whakamahi mokemoke, mokowhiti rānei hei taurite ki tētahi wāhanga (hei tauira class="instui-view --mb-sm").
stacking	.--stack-topmost	Ngā taputapu hohonu z-index — .--stack-<level> (deepest, below, above, topmost) — ka taea te whakamahi mokemoke, mokowhiti rānei ki tētahi wāhanga, kia whāriki ngā papa i runga i te tikanga, kaua e rīpenehia ki ngā nama ā-ringa.
transition	.instui-transition.-transition-fade-entering	Ngā kara ā-kāhua animation mō te wāhanga Transition — .instui-transition me ērā atu kara ā-kāhua ā-huringa (-transition-fade-entering, -transition-scale-exited, etc.) — ka taea te whakamahi mokemoke, mokowhiti rānei ki tētahi wāhanga.
truncate	.--truncate	Whakatewhatewha ellipsis me te whakawātea rārangi mā te --lines — ka taea te whakamahi mokemoke, mokowhiti rānei ki tētahi wāhanga (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Tētahi anga whakamātau tatauranga: whakapirihia te .-with-visual-debug ki runga i tētahi tūemi kia whakaatu ai i te pouaka me ōna tamariki tonu, kia kitea te hanganga whakatakotoranga i runga i te titiro.

Ngā Ture

Ingoa	Kāwai	Whakarāpopototanga
base	*	Te whakahoki ā-motu kōwhiri: box-sizing, te mata whārangi, tae kuputuhi tūāpapa me te tohu momotuhi, color-scheme, me ngā tautuhinga hono taunoa.
prose	:where(body)	Ngā tūtohu ā-tārua mō HTML mata — ārahi, parakaraka, rārangi, hononga, me te waehere — ka whakamahia aunoa i ngā wā katoa e kawemai ana (taunoa :where(body)); tukua options.scope hei tohu i tētahi pūtake ihirangi kē (hei tauira .vp-doc).

Plugins

Ingoa	Kāwai	Whakarāpopototanga
logos	.logos	Ngā tohu ingoa hua Instructure hei token whakaahua CSS: kei roto i --instui-logo-<product>-<layout>-<mode> te SVG data-URI, nō reira ka peitahia tētahi tohu mā te whakamahi pērā i background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Ngā kara ā-utu kōwhiri mō te papamuri taketake mata: .instui-bg-/fg-/border-primitive-color-<name> ka peita i tētahi tae mai i ngā token tae taketake, me ngā taputapu font-family/font-weight mō ngā token momotuhi taketake. Kua waiho hē ō rātou ki waho i ngā taputapu aronga kia noho anake hei whakakapi aronga ki reira.
visual-debug	.-with-visual-debug	Tētahi anga whakamātau tatauranga: whakapirihia te .-with-visual-debug ki runga i tētahi tūemi kia whakaatu ai i te pouaka me ōna tamariki tonu, kia kitea te hanganga whakatakotoranga i runga i te titiro.

layout

Ingoa	Kāwai	Whakarāpopototanga
callout	div[class~="instui-callout"]	He pānui mōhiohio ā-ipurangi hei whakamahara poto, hei tuhipoka rānei.
hero	div[class~="instui-hero"]	Wāhanga upoko whānui-whānui me te taitara, tāpiri haurua-taitara, me te whakaahua papamuri kōwhiringa.
page-layout	div[class~="instui-page-layout"]	Hoahoanga whārangi paerewa-toru-column me te upoko, taha taha, me te tūāpapa matua.
rubric-note	div[class~="instui-rubric-note"]	Tuhinga ā-tuhituhi kua whakaraupapahia me ngā kāwai rubrica me ngā tohu tohu.
testimonial	div[class~="instui-testimonial"]	Whakaaturanga whakatairanga, kīanga rānei me te tohua me te whakaahua kōwhiringa.
two-column	div[class~="instui-two-column"]	Hoahoanga rua-koluma me ngā rohe ihirangi mauī me matau.
wrapper	body[class~="instui-display-flex"]	Rārangi anga taupānga: tahuhu taha, ipu me te upoko, me tētahi panui kōwhiringa.