CSS Riferimento API

La documentazione dell'API CSS copre il livello di componenti basato su classi di pantoken: componenti, utility, regole globali e dichiarazioni costruite sul sistema di token.

Componenti

Nome	Classe	Sommario
agent-shell	.instui-agent-shell	Un contenitore di superficie per agenti AI.
alert	.instui-alert	Un messaggio in linea con una barra colore di stato e un glifo di stato mascherato preso dall'insieme di icone condiviso.
avatar	.instui-avatar	Un avatar utente che mostra iniziali o un'immagine, circolare per impostazione predefinita.
badge	.instui-badge	Un piccolo punto di conteggio o di stato posizionato sull'angolo di un target.
banner	.instui-banner	Una superficie messaggio con icona e chiudibile per annunci a livello di pagina o contestuali.
billboard	.instui-billboard	Un grande blocco di stato vuoto o call-to-action: un'icona o immagine eroica, un'intestazione e un messaggio.
breadcrumb	.instui-breadcrumb	Un percorso breadcrumb con separatori; l'ultima crumb è la pagina corrente.
breadcrumb.link	li	Una crumb (InstUI Breadcrumb.Link), un <li> nel <ol> del genitore; l'ultima è la pagina corrente.
button	.instui-button	Un controllo di azione accessibile, stilizzato dalla tavolozza di token; primario per impostazione predefinita.
byline	.instui-byline	Un oggetto media: una figura eroica accanto a un titolo e una descrizione.
calendar	.instui-calendar	Una griglia mensile statica con navigazione, intestazioni dei giorni della settimana e celle dei giorni.
calendar.day	.day	Una cella giorno (InstUI Calendar.Day); -today, -selected e -outside-month ne segnano lo stato.
card	.instui-card	Un contenitore di superficie che accetta contenuto arbitrario.
checkbox	.instui-checkbox	Una checkbox nativa e la sua etichetta, o un interruttore tramite -variant-toggle.
close-button	.instui-close-button	Un pulsante icona trasparente che disegna il proprio glifo ×, in tre dimensioni più una variante on-color.
context-view	.instui-context-view	Un callout elevato con caret, posizionabile su qualsiasi lato; funziona come un [popover] nativo.
drawer-layout	.instui-drawer-layout	Un layout diviso con un vassoio laterale collassabile e un pannello di contenuto principale scorrevole.
drawer-layout.content	.content	Il pannello di contenuto principale che occupa lo spazio rimanente accanto al vassoio.
drawer-layout.tray	.tray	Il pannello laterale accanto al contenuto principale, con overlay opzionale e modificatori di superficie tipo tray.
file-drop	.instui-file-drop	Una zona di rilascio file con stati hover, accettato e rifiutato.
form-field	.instui-form-field	Un wrapper per campo modulo: un'etichetta, i suoi controlli e layout inline, richiesti o in sola lettura.
form-field-group	.instui-form-field-group	Un gruppo <fieldset> con legend, un layout a colonne o inline e spaziatura configurabile.
form-field-messages	.instui-form-field-messages	Aiuti campo e messaggi di validazione — hint, errore, successo e solo per screen reader — con un glifo in errore e successo.
heading	.instui-heading	Tipografia delle intestazioni da -level-h1 a -level-h6.
img	.instui-img	Un <img> stilizzato con modificatori di display, crop ed effetto che si sovrappongono.
in-place-edit	.instui-in-place-edit	Un [contenteditable] che viene letto come testo fino a quando non riceve il focus, quindi mostra la chrome dell'input.
input-group	.instui-input-group	Una facciata attorno a un input di testo con slot icona iniziale e finale.
link	.instui-link	Un hyperlink stilizzato con dimensioni, una variante inverse per sfondi scuri e forme inline o non stilizzate.
list	.instui-list	Una lista con spaziatura degli elementi guidata da token.
list.item	.instui-list	Un elemento di lista (InstUI List.Item).
mask	.instui-mask	Un overlay in-flow che riempie il genitore posizionato e centra il suo contenuto — es. un spinner sopra una card. Per una modal, preferire un <dialog> nativo (la sua ::backdrop è la mask). Ognuno di questi modificatori è anche disponibile globalmente (nudo, o concatenato a qualsiasi altro componente) — vedere l'utility globale mask.
menu	.instui-menu	Una superficie dropdown di elementi, gruppi e separatori.
menu.group	.group	Un'intestazione di gruppo etichettata (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Una voce di menu (InstUI Menu.Item); aggiungere -disabled, -highlighted o -active/[aria-checked].
menu.separator	.separator	Una regola divisoria tra elementi (InstUI Menu.Separator).
metric	.instui-metric	Una statistica etichettata — un grande valore sopra una didascalia.
modal	.instui-modal	Una superficie dialogo (funziona su un <dialog> nativo); parti header/body/footer.
modal.body	.body	La regione di contenuto (InstUI Modal.Body); un singolo <img> diventa full-bleed.
modal.footer	.footer	La riga delle azioni (InstUI Modal.Footer).
modal.header	.header	La riga del titolo (InstUI Modal.Header).
number-input	.instui-number-input	Una facciata per input numerico con una colonna spinner +/-.
pagination	.instui-pagination	Navigazione di pagina: pagine numerate, frecce primo, precedente, successivo e ultimo, e un'ellissi per i gap.
pagination.page	.page	Un link o pulsante di pagina (InstUI Pagination.Page); la pagina corrente porta [aria-current].
pill	.instui-pill	Un'etichetta di stato compatta; aggiungere un glifo iniziale con la forma condivisa -icon-<name>.
popover	.instui-popover	Una superficie elevata per un [popover] nativo, posizionata con CSS anchor positioning.
progress	.instui-progress	Una barra di progresso determinata con un indicatore colorato, dimensioni e un'etichetta valore opzionale.
progress-circle	.instui-progress-circle	Un anello di progresso circolare guidato da proprietà custom --value e --value-max.
radio	.instui-radio	Un radio button nativo e la sua etichetta.
radio-input-group	.instui-radio-input-group	Un singolo radio selezionabile <fieldset>, semplice o come toggle segmentato connesso.
range-input	.instui-range-input	Un range slider stilizzato con una bolla del valore inversa.
rating	.instui-rating	Una valutazione a stelle con glifi pieni e vuoti e un'etichetta numerica opzionale.
side-nav-bar	.instui-side-nav-bar	Una barra di navigazione verticale con elementi icona-sopra-etichetta, con una modalità ridotta solo-icone.
side-nav-bar.item	.item	Una voce di navigazione (InstUI SideNavBar.Item); -selected indica quella attiva.
simple-select	.instui-simple-select	Un <select> nativo stilizzato con caret, che rispecchia gli stati e le dimensioni dell'input di testo.
spinner	.instui-spinner	Un anello di caricamento animato; assegnare role="status" e un aria-label.
table	.instui-table	Una tabella dati stilizzata per th e td più una didascalia opzionale, con layout a hover, fisso e a schede sovrapposte.
table.body	tbody	Il gruppo di righe dati della tabella (InstUI Table.Body).
table.cell	td	Una cella di dati (InstUI Table.Cell).
table.col-header	th	Una cella di intestazione di colonna (InstUI Table.ColHeader); lo stile predefinito th è sovrascritto da table.row-header per th[scope="row"].
table.head	thead	Il gruppo di righe header della tabella (InstUI Table.Head).
table.row	tr	Una riga della tabella (InstUI Table.Row).
table.row-header	th[scope="row"]	Una cella header di riga (InstUI Table.RowHeader); stilizzata dai token dell'header di riga, non da quelli dell'header di colonna.
tabs	.instui-tabs	Un set di pannelli a schede: una lista di tab, tab selezionabili e i loro pannelli.
tabs.panel	.panel	Il pannello di contenuto per una scheda (InstUI Tabs.Panel).
tabs.tab	.tab	Un singolo pulsante di scheda (InstUI Tabs.Tab, configurato tramite la lista di tab del genitore Tabs); -selected indica quella attiva.
tag	.instui-tag	Una chip inline per una parola chiave o un filtro.
text	.instui-text	Tipografia per il testo del corpo con modificatori di dimensione, peso, colore e stile.
text-area	.instui-text-area	Un <textarea> nativo stilizzato e ridimensionabile con gli stessi stati e dimensioni dell'input di testo.
text-input	.instui-text-input	Un <input> nativo stilizzato — inclusi date, time e datetime-local, dove il browser fornisce il selettore — con stati di validazione e dimensioni.
toggle-details	.instui-toggle-details	Un disclosure nativo <details> stilizzato con una chevron rotante.
toggle-group	.instui-toggle-group	Un disclosure con bordo costruito su <details>: una riga sommario con chevron e contenuto collassabile.
tooltip	.instui-tooltip	Una tooltip CSS per hover e focus, posizionabile su qualsiasi lato.
tray	.instui-tray	Un pannello incollato al bordo che scivola da qualsiasi lato; un [popover] o <dialog> nativo.
tree-browser	.instui-tree-browser	Un albero di disclosure di raccolte nidificate e elementi foglia, con chevron rotanti.
view	.instui-view	Il primitivo View: una scatola neutra con modificatori chiave-valore per sfondo, bordo, raggio, ombra, display, posizione, overflow e cursore. Ognuno di questi modificatori è disponibile anche globalmente (da solo o concatenato a qualsiasi altro componente) — vedere le utility background/border/shadow/display/position/overflow/cursor.

Utility

Nome	Classe	Sommario
color	.--text-danger	Utility di colore semantico: .--bg-<name>, .--text-<name> (alias di .--color-<name>) e .--border-<name> per la palette semantica curata. Ognuna di queste ha anche un alias modificatore attaccato al componente (per esempio -bg-danger su qualsiasi .instui-<component>).
cursor	.--cursor-pointer	cursor come classe globale componibile — .--cursor-<value> — utilizzabile da sola o concatenata a qualsiasi componente (.instui-button.--cursor-pointer).
gap	.--gap-md	Utility Flex/grid gap sulla scala di spaziatura, ortografia corta (--gap-sm) o lunga (--gap-small). Utilizzabile da sola o concatenata a qualsiasi componente (.instui-view.--gap-sm) — i componenti che già impostano il proprio gap da un token specifico del componente possono vederlo sovrascritto.
icon	.instui-icon	Il sistema di icone: dimensionamento .instui-icon più il pittore condiviso -icon-<name> che maschera un glifo (in currentColor) davanti a qualsiasi elemento.
layout	.--display-flex	Utility di display e allineamento testo — .--display-<value> e .--text-align-<value> — come classi globali componibili, utilizzabili da sole o concatenate a qualsiasi componente.
maskglobal	.--mask-overlay	Una copia globale e duplice dei modificatori di overlay del componente mask — --mask-overlay, --mask-fullscreen, --mask-blur — utilizzabili da soli o concatenati a qualsiasi componente, senza avvolgere in un elemento .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y come classi globali componibili — .--overflow-x-<value> / .--overflow-y-<value> — utilizzabili da sole o concatenate a qualsiasi componente.
position	.--position-relative	position come classe globale componibile — .--position-<value> — utilizzabile da sola o concatenata a qualsiasi componente (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Classi show/hide basate sulla larghezza della viewport o del contenitore su una scala di breakpoint tematizzata.
screen-reader-content	.instui-screen-reader-content	Nasconde visivamente il contenuto mantenendolo accessibile alle tecnologie assistive (pattern standard clip).
spacing	.--p-md	Utility per margin e padding — .--m<side>-<step> / .--margin-<side>-<step> e .--p<side>-<step> / .--padding-<side>-<step> sulla scala degli spazi (lati t/b/s/e/x/y o nessuno, scritti in forma breve o completa — per esempio --mb-sm e --margin-bottom-small sono la stessa regola; margin accetta anche auto). Utilizzabili da soli o concatenati a qualsiasi componente (per esempio class="instui-view --mb-sm").
stacking	.--stack-topmost	Utility di profondità z-index — .--stack-<level> (deepest, below, above, topmost) — utilizzabili da soli o concatenati a qualsiasi componente, così gli strati si impilano in modo prevedibile invece di usare numeri tarati a mano.
transition	.instui-transition.-transition-fade-entering	Classi di stato di animazione per il componente Transition — .instui-transition e classi di stato (-transition-fade-entering, -transition-scale-exited, ecc.) — utilizzabili da soli o concatenati a qualsiasi componente.
truncate	.--truncate	Troncamento con ellissi e clamp di righe controllato da --lines — utilizzabile da solo o concatenato a qualsiasi componente (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Una outline per il debug del layout: comporre .-with-visual-debug su qualsiasi elemento per evidenziare il box e i suoi figli immediati, così la struttura del layout è visibile a colpo d'occhio.

Regole

Nome	Classe	Sommario
base	*	Reset globale opt-in: box-sizing, la superficie della pagina, colore e font base del testo, color-scheme, e i valori predefiniti per i link.
prose	:where(body)	Predefiniti tipografici per HTML grezzo — intestazioni, paragrafi, liste, link e codice — applicati automaticamente ovunque vengano importati (predefinito :where(body)); passare options.scope per mirare a una root di contenuto diversa (es. .vp-doc).

Plugins

Nome	Classe	Sommario
logos	.logos	Loghi dei prodotti Instructure come token immagine CSS: --instui-logo-<product>-<layout>-<mode> contiene una SVG in data-URI, quindi un logo viene renderizzato via es. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Classi utility opt-in per la palette primitiva grezza: .instui-bg-/fg-/border-primitive-color-<name> colorano con un colore preso dai token di colore primitivo, oltre a utility font-family/font-weight per i token tipografici primitivi. Tenute fuori dalle utility semantiche così gli override lì restano solo semantici.
visual-debug	.-with-visual-debug	Una outline per il debug del layout: comporre .-with-visual-debug su qualsiasi elemento per evidenziare il box e i suoi figli immediati, così la struttura del layout è visibile a colpo d'occhio.

layout

Nome	Classe	Sommario
callout	div[class~="instui-callout"]	Avviso informativo inline per un breve promemoria o nota.
hero	div[class~="instui-hero"]	Sezione header a tutta larghezza con titolo, sottotitolo e immagine di sfondo opzionale.
page-layout	div[class~="instui-page-layout"]	Layout di pagina standard a tre colonne con header, sidebar e contenuto principale.
rubric-note	div[class~="instui-rubric-note"]	Nota strutturata con categorie rubric e indicatori di punteggio.
testimonial	div[class~="instui-testimonial"]	Visualizzazione di citazione o testimonianza con attribuzione e immagini opzionali.
two-column	div[class~="instui-two-column"]	Layout a due colonne con regioni di contenuto sinistra e destra.
wrapper	body[class~="instui-display-flex"]	App-shell a riga: nav laterale, contenitore con header e pannello opzionale.