CSS API referansı

CSS API referansı, pantoken'in sınıf tabanlı bileşen katmanını kapsar: token sistemi üzerine inşa edilmiş bileşenler, yardımcılar, global kurallar ve bildirimler.

Bileşenler

Ad	Sınıf	Özet
agent-shell	.instui-agent-shell	AI ajanları için bir yüzey konteyneri.
alert	.instui-alert	Durum renk çubuğu ve ortak ikon setinden maskelenmiş bir durum simgesi içeren satır içi bir mesaj.
avatar	.instui-avatar	Varsayılan olarak dairesel olan, baş harfleri veya bir görüntü gösteren kullanıcı avatarı.
badge	.instui-badge	Hedefin köşesine yerleştirilen küçük bir sayı veya durum noktası.
banner	.instui-banner	Sayfa düzeyinde veya bağlam içi duyurular için kapatılabilir, ikonlu bir mesaj yüzeyi.
billboard	.instui-billboard	Büyük boş durum veya harekete geçirici çağrı bloğu: bir kahraman ikonu veya görüntü, bir başlık ve bir mesaj.
breadcrumb	.instui-breadcrumb	Ayraçlı bir breadcrumb izi; son kırıntı mevcut sayfadır.
breadcrumb.link	li	Bir kırıntı (InstUI Breadcrumb.Link), üst öğenin <ol> içindeki bir <li>; sonuncusu mevcut sayfadır.
button	.instui-button	Erişilebilir bir eylem denetimi, token paletiyle stillendirilmiş; varsayılan olarak birincil.
byline	.instui-byline	Bir medya nesnesi: başlık ve açıklamanın yanında bir kahraman figürü.
calendar	.instui-calendar	Gezinmeli, hafta günü başlıkları ve gün hücreleri içeren statik bir aylık ızgara.
calendar.day	.day	Bir gün hücresi (InstUI Calendar.Day); durumunu işaretlemek için -today, -selected ve -outside-month kullanılır.
card	.instui-card	Her türlü içeriği kabul eden bir yüzey konteyneri.
checkbox	.instui-checkbox	Yerel bir onay kutusu ve etiketi veya -variant-toggle ile bir anahtar (switch).
close-button	.instui-close-button	Kendi × simgesini çizen şeffaf bir ikon düğmesi; üç boyutta ve bir 'on-color' varyantında.
context-view	.instui-context-view	Kareti olan, her yöne konumlandırılabilen yükseltilmiş bir çağrı kutusu; yerel bir [popover] olarak çalışır.
drawer-layout	.instui-drawer-layout	Daraltılabilir bir yan tepsi ve birincil kaydırılabilir içerik paneli olan bölünmüş düzen.
drawer-layout.content	.content	Tepsinin yanında kalan alanı dolduran birincil içerik paneli.
drawer-layout.tray	.tray	Ana içeriğin yanındaki yan panel; isteğe bağlı örtü ve tepsi benzeri yüzey değiştiricilere sahiptir.
file-drop	.instui-file-drop	Üzerinde hover, kabul ve reddetme durumları olan bir dosya bırakma alanı.
form-field	.instui-form-field	Bir form alanı sarmalayıcısı: bir etiket, onun denetimleri ve satır içi, gerekli veya salt okunur düzenler.
form-field-group	.instui-form-field-group	Bir <fieldset> grubu; bir legend, sütun veya satır içi düzen ve yapılandırılabilir boşluklara sahip.
form-field-messages	.instui-form-field-messages	Alan yardım ve doğrulama mesajları — ipucu, hata, başarı ve sadece ekran okuyucu için metin — hata ve başarıda bir simge ile.
heading	.instui-heading	Başlık tipografisi -level-h1'dan -level-h6'e kadar.
img	.instui-img	Görüntü, kırpma ve efekt değiştiricileri üst üste konabilen stillendirilmiş bir <img>.
in-place-edit	.instui-in-place-edit	Odaklanana kadar metin olarak okunan, odaklanınca giriş kabuğu gösteren bir [contenteditable].
input-group	.instui-input-group	Önde ve arkada ikon yuvalarına sahip bir metin girişi yüzeyi.
link	.instui-link	Boyutları, koyu zeminler için ters varyantı ve satır içi veya stylesiz formları olan stillendirilmiş bir bağlantı.
list	.instui-list	Token-odaklı öğe boşluklaması olan bir liste.
list.item	.instui-list	Bir liste öğesi (InstUI List.Item).
mask	.instui-mask	Yerleştirilmiş ebeveynini dolduran ve içeriğini ortalayan, akış içi bir üst üste binen yüzey — ör. bir kartın üzerindeki spinner. Bir modal için yerel bir <dialog> tercih edin (onun ::backdrop maskedir). Bu değiştiricilerin her biri global olarak da kullanılabilir (yalın veya herhangi bir bileşene zincirlenmiş) — bkz. mask global yardımcı.
menu	.instui-menu	Öğeler, gruplar ve ayraçlar içeren bir açılır yüzey.
menu.group	.group	Etiketli bir grup başlığı (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Bir menü girdisi (InstUI Menu.Item); -disabled, -highlighted veya -active/[aria-checked] ekleyin.
menu.separator	.separator	Öğeler arasındaki bir ayırıcı kural (InstUI Menu.Separator).
metric	.instui-metric	Etiketli bir istatistik — başlık üzerinde büyük bir değer.
modal	.instui-modal	Bir dialog yüzeyi (yerel <dialog> üzerinde çalışır); başlık/gövde/altbilgi bölümleri.
modal.body	.body	İçerik bölgesi (InstUI Modal.Body); tek bir <img> tam-bleed olur.
modal.footer	.footer	Eylemler satırı (InstUI Modal.Footer).
modal.header	.header	Başlık satırı (InstUI Modal.Header).
number-input	.instui-number-input	± bir spinner sütunu içeren sayı girişi yüzeyi.
pagination	.instui-pagination	Sayfalama: numaralandırılmış sayfalar, ilk, önceki, sonraki ve son okları ve boşluklar için bir üç nokta.
pagination.page	.page	Bir sayfa bağlantısı veya düğmesi (InstUI Pagination.Page); mevcut sayfa [aria-current] taşır.
pill	.instui-pill	Kompakt bir durum etiketi; ortak -icon-<name> formuyla önde bir simge ekleyin.
popover	.instui-popover	Yerel bir [popover] için yükseltilmiş bir yüzey, CSS anchor konumlandırmasıyla yerleştirilir.
progress	.instui-progress	Renkli bir ölçer, boyutlar ve isteğe bağlı bir değer etiketi içeren belirlenmiş bir ilerleme çubuğu.
progress-circle	.instui-progress-circle	--value ve --value-max özel özellikleri tarafından sürülen dairesel bir ilerleme halkası.
radio	.instui-radio	Yerel bir radyo düğmesi ve etiketi.
radio-input-group	.instui-radio-input-group	Tek seçimli bir radyo <fieldset>, sade veya bağlı segmentli bir geçiş olarak.
range-input	.instui-range-input	Ters değer balonu olan stillendirilmiş bir aralık (range) kaydırıcı.
rating	.instui-rating	Doldurulmuş ve boş simgelerle yıldız derecelendirmesi ve isteğe bağlı sayısal etiket.
side-nav-bar	.instui-side-nav-bar	Simge-üstü-etiket öğelerinden oluşan dikey bir gezinme rayı; simgelerle sınırlı küçültülmüş bir modu var.
side-nav-bar.item	.item	Bir gezinme girişidir (InstUI SideNavBar.Item); aktif olanı -selected işaretler.
simple-select	.instui-simple-select	İmleçli, stillendirilmiş yerel bir <select>; metin-girdi durumları ve boyutlarıyla eşleşir.
spinner	.instui-spinner	Animasyonlu bir yükleme halkası; role="status" ve aria-label verin.
table	.instui-table	Hover, sabit ve kart-yığılmış düzenleri olan; th ve td için isteğe bağlı başlıkla stillendirilmiş bir veri tablosu.
table.body	tbody	Tablonun veri satırı grubu (InstUI Table.Body).
table.cell	td	Bir veri hücresi (InstUI Table.Cell).
table.col-header	th	Bir sütun-başlık hücresi (InstUI Table.ColHeader); varsayılan th stili, th[scope="row"] için table.row-header tarafından geçersiz kılınır.
table.head	thead	Tablonun başlık satırı grubu (InstUI Table.Head).
table.row	tr	Bir tablo satırı (InstUI Table.Row).
table.row-header	th[scope="row"]	Bir satır-başlık hücresi (InstUI Table.RowHeader); satır-başlığı token'larından stil alır, sütun-başlığı token'larından değil.
tabs	.instui-tabs	Sekmeli panel seti: bir sekme listesi, seçilebilir sekmeler ve bunların panelleri.
tabs.panel	.panel	Bir sekme için içerik paneli (InstUI Tabs.Panel).
tabs.tab	.tab	Tek bir sekme düğmesi (InstUI Tabs.Tab, ebeveyn Tabs'in sekme listesiyle yapılandırılır); aktif olanı -selected işaretler.
tag	.instui-tag	Bir anahtar sözcük veya filtre için satır içi bir chip.
text	.instui-text	Boyut, ağırlık, renk ve stil değiştiricileriyle gövde metni tipografisi.
text-area	.instui-text-area	Metin girişiyle aynı durum ve boyutlara sahip, stillendirilmiş yeniden boyutlandırılabilir yerel bir <textarea>.
text-input	.instui-text-input	Tarayıcının seçim sağladığı date, time ve datetime-local dahil olmak üzere doğrulama durumları ve boyutlarıyla stillendirilmiş bir yerel <input>.
toggle-details	.instui-toggle-details	Dönen bir chevronlu stillendirilmiş yerel bir <details> açılır/kapanır kontrolü.
toggle-group	.instui-toggle-group	<details> üzerine kurulu kenarlıklı bir disclosure: bir chevron özet satırı ve katlanabilir içerik.
tooltip	.instui-tooltip	Herhangi bir tarafa konumlandırılabilen CSS hover ve odak balonu (tooltip).
tray	.instui-tray	Herhangi bir taraftan kayan kenar-pinli bir panel; yerel bir [popover] veya <dialog>.
tree-browser	.instui-tree-browser	Dönen chevron'larla iç içe koleksiyonlar ve yaprak öğelerinden oluşan bir disclosure ağacı.
view	.instui-view	Görünüm (View) ilkel öğesi: arka plan, kenarlık, yarıçap, gölge, gösterim, konum, taşma ve imleç için anahtar-değer değiştiricileri olan nötr bir kutu. Bu değiştiricilerin her biri global olarak da kullanılabilir (tek başına veya herhangi bir bileşene zincirlenmiş) — bkz. background/border/shadow/display/position/overflow/cursor yardımcıları.

Yardımcılar

Ad	Sınıf	Özet
color	.--text-danger	Semantik renk yardımcıları: .--bg-<name>, .--text-<name> (alias olarak .--color-<name>), ve küratörlü semantik palet için .--border-<name>. Bunların her birinin ayrıca bir bileşene eklenmiş alias değiştiricisi vardır (ör. herhangi bir .instui-<component> üzerinde -bg-danger).
cursor	.--cursor-pointer	cursor bileşeni olarak kompozit, global bir sınıf — .--cursor-<value> — tek başına veya herhangi bir bileşene zincirlenmiş olarak kullanılabilir (.instui-button.--cursor-pointer).
gap	.--gap-md	Boşluk ölçeğinde kısa (--gap-sm) veya uzun (--gap-small) yazımla flex/grid gap yardımcıları. Tek başına veya herhangi bir bileşene zincirlenmiş olarak kullanılabilir (.instui-view.--gap-sm) — kendi bileşen-özgü token'ından gap atayan bileşenlerde bu üzerine yazılabilir.
icon	.instui-icon	Simge sistemi: .instui-icon boyutlandırma ve herhangi bir öğeden önce bir glifi maskeler hale getiren paylaşılan -icon-<name> çizer (içinde currentColor).
layout	.--display-flex	Görüntüleme ve metin-hizalama yardımcıları — .--display-<value> ve .--text-align-<value> — kompozit, global sınıflar olarak, tek başına veya herhangi bir bileşene zincirlenmiş olarak kullanılabilir.
maskglobal	.--mask-overlay	mask bileşeninin örtü değiştiricilerinin küresel, ikili bir kopyası — --mask-overlay, --mask-fullscreen, --mask-blur — tek başına veya herhangi bir bileşene zincirlenmiş olarak, .instui-mask öğesinde sarmalamaya gerek olmadan kullanılabilir.
overflow	.--overflow-x-hidden	overflow-x/overflow-y olarak kompozit, global sınıflar — .--overflow-x-<value> / .--overflow-y-<value> — tek başına veya herhangi bir bileşene zincirlenmiş olarak kullanılabilir.
position	.--position-relative	position bileşeni olarak kompozit, global bir sınıf — .--position-<value> — tek başına veya herhangi bir bileşene zincirlenmiş olarak kullanılabilir (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Temalı kırılma noktası ölçeği boyunca görünüm penceresi (viewport) veya konteyner genişliğine göre göster/gizle sınıfları.
screen-reader-content	.instui-screen-reader-content	Erişilebilir teknolojiye açık tutarak görsel olarak içeriği gizler (standart clip deseni).
spacing	.--p-md	Margin ve padding yardımcı sınıfları — .--m<side>-<step> / .--margin-<side>-<step> ve .--p<side>-<step> / .--padding-<side>-<step> boşluk ölçeğinde (kenarlar t/b/s/e/x/y veya yok, kısaltılmış veya tam uzun yazım — örneğin --mb-sm ve --margin-bottom-small aynı kuraldır; margin ayrıca auto alır). Herhangi bir bileşen üzerinde tek başına veya zincirlenmiş olarak kullanılabilir (örneğin class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index derinlik yardımcı sınıfları — .--stack-<level> (deepest, below, above, topmost) — tek başına veya herhangi bir bileşen üzerine zincirlenmiş olarak kullanılabilir; böylece katmanlar elle ayarlanmış sayılara göre değil, öngörülebilir bir şekilde yığılır.
transition	.instui-transition.-transition-fade-entering	Transition bileşeni için animasyon durum sınıfları — .instui-transition ve durum sınıfları (-transition-fade-entering, -transition-scale-exited, vb.) — tek başına veya herhangi bir bileşen üzerine zincirlenmiş olarak kullanılabilir.
truncate	.--truncate	Satır sınırlamasıyla birlikte elipsis kısaltma, --lines ile kontrol edilir — tek başına veya herhangi bir bileşen üzerine zincirlenmiş olarak kullanılabilir (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Yerleşimi hata ayıklamak için bir kontur: herhangi bir elemana bileşik .-with-visual-debug ekleyerek kutuyu ve onun hemen alt öğelerini çerçeveleyin, böylece yerleşimin yapısı bir bakışta görülebilir.

Kurallar

Ad	Sınıf	Özet
base	*	Tercihe dayalı küresel sıfırlama: box-sizing, sayfa yüzeyi, temel metin rengi ve yazı tipi, color-scheme ve bağlantı varsayılanları.
prose	:where(body)	Ham HTML için tipografik varsayılanlar — başlıklar, paragraflar, listeler, bağlantılar ve kod — içe aktarıldığı her yerde otomatik uygulanır (varsayılan :where(body)); farklı bir içerik kökünü hedeflemek için options.scope iletilir (ör. .vp-doc).

Plugins

Ad	Sınıf	Özet
logos	.logos	Instructure ürün logoları CSS resim token'ları olarak: --instui-logo-<product>-<layout>-<mode> bir data-URI SVG içerir, bu yüzden bir logo örn. background-image: var(--instui-logo-canvas-horizontal-color) ile çizilir.
primitives	.instui-bg-primitive-color-white	Ham ilkel palet için tercihli yardımcı sınıflar: .instui-bg-/fg-/border-primitive-color-<name> ilkel renk token'larından bir renk uygular, ayrıca ilkel yazı tipi token'ları için font-family/font-weight yardımcıları vardır. Bunlar semantik yardımcı sınıfların dışında tutulur, böylece oradaki geçersiz kılmalar sadece semantik kalır.
visual-debug	.-with-visual-debug	Yerleşimi hata ayıklamak için bir kontur: herhangi bir elemana bileşik .-with-visual-debug ekleyerek kutuyu ve onun hemen alt öğelerini çerçeveleyin, böylece yerleşimin yapısı bir bakışta görülebilir.

layout

Ad	Sınıf	Özet
callout	div[class~="instui-callout"]	Kısa bir hatırlatma veya not için satır içi bilgi uyarısı.
hero	div[class~="instui-hero"]	Başlık, alt başlık ve isteğe bağlı arka plan görseli içeren tam genişlikte başlık bölümü.
page-layout	div[class~="instui-page-layout"]	Başlık, yan menü ve ana içerik ile standart üç sütunlu sayfa düzeni.
rubric-note	div[class~="instui-rubric-note"]	Rubrik kategorileri ve puanlama göstergeleriyle yapılandırılmış not.
testimonial	div[class~="instui-testimonial"]	Atıf ve isteğe bağlı görsellerle alıntı veya referans gösterimi.
two-column	div[class~="instui-two-column"]	Sol ve sağ içerik bölgelerine sahip iki sütunlu düzen.
wrapper	body[class~="instui-display-flex"]	Uygulama kabuğu satırı: yan gezinme, başlıklı konteyner ve isteğe bağlı panel.