CSS Tham khảo API

Tài liệu API CSS bao quát lớp component dựa trên lớp của pantoken: components, utilities, luật toàn cục, và declarations được xây dựng trên hệ thống token.

Các thành phần

Tên	Lớp	Tóm tắt
agent-shell	.instui-agent-shell	Một vùng bề mặt chứa cho các tác nhân AI.
alert	.instui-alert	Một thông báo nội tuyến với thanh màu trạng thái và một biểu tượng trạng thái che mặt từ bộ biểu tượng chia sẻ.
avatar	.instui-avatar	Một avatar người dùng hiển thị chữ viết tắt hoặc hình ảnh, mặc định là hình tròn.
badge	.instui-badge	Một chấm nhỏ biểu thị số lượng hoặc trạng thái đặt trên góc của mục tiêu.
banner	.instui-banner	Một bề mặt thông báo có thể đóng, có biểu tượng, cho thông báo cấp trang hoặc trong ngữ cảnh.
billboard	.instui-billboard	Một khối trạng thái rỗng lớn hoặc kêu gọi hành động: một biểu tượng/ảnh lớn, tiêu đề và thông điệp.
breadcrumb	.instui-breadcrumb	Một đường dẫn breadcrumb có các phân cách; mẩu cuối cùng là trang hiện tại.
breadcrumb.link	li	Một mẩu (InstUI Breadcrumb.Link), một <li> trong <ol> của cha; mẩu cuối cùng là trang hiện tại.
button	.instui-button	Một điều khiển hành động truy cập được, được kiểu hóa từ bảng màu token; mặc định là primary.
byline	.instui-byline	Một đối tượng media: một hình lớn bên cạnh tiêu đề và mô tả.
calendar	.instui-calendar	Một lưới tháng tĩnh với điều hướng, tiêu đề thứ trong tuần, và ô ngày.
calendar.day	.day	Một ô ngày (InstUI Calendar.Day); -today, -selected, và -outside-month đánh dấu trạng thái của nó.
card	.instui-card	Một vùng bề mặt chứa chấp nhận nội dung tùy ý.
checkbox	.instui-checkbox	Một checkbox gốc và nhãn của nó, hoặc một switch thông qua -variant-toggle.
close-button	.instui-close-button	Một nút icon trong suốt vẽ glyph × của riêng nó, có ba kích thước cộng với biến thể trên nền màu.
context-view	.instui-context-view	Một callout nâng lên có mũi tên (caret), có thể định vị ở bất kỳ cạnh nào; hoạt động như một [popover] gốc.
drawer-layout	.instui-drawer-layout	Một bố cục chia đôi với khay bên có thể thu gọn và vùng nội dung chính có thể cuộn.
drawer-layout.content	.content	Vùng nội dung chính chiếm không gian còn lại bên cạnh khay.
drawer-layout.tray	.tray	Bảng điều khiển bên cạnh nội dung chính, với tuỳ chọn overlay và modifiers bề mặt giống khay.
file-drop	.instui-file-drop	Một vùng thả tệp với trạng thái hover, accepted và rejected.
form-field	.instui-form-field	Một wrapper trường mẫu: một nhãn, các điều khiển của nó, và bố cục inline, required, hoặc readonly.
form-field-group	.instui-form-field-group	Một nhóm <fieldset> với legend, bố cục cột hoặc inline, và khoảng cách có thể cấu hình.
form-field-messages	.instui-form-field-messages	Trợ giúp trường và thông điệp xác thực — hint, error, success, và chỉ dành cho trình đọc màn hình — có biểu tượng khi lỗi và thành công.
heading	.instui-heading	Kiểu chữ tiêu đề từ -level-h1 đến -level-h6.
img	.instui-img	Một <img> được kiểu hóa với các modifier display, crop, và effect xếp chồng.
in-place-edit	.instui-in-place-edit	Một [contenteditable] hiển thị như văn bản cho đến khi được focus, sau đó hiển thị chrome nhập liệu.
input-group	.instui-input-group	Một facade quanh input văn bản với các slot icon dẫn và cuối.
link	.instui-link	Một liên kết được kiểu hóa với các kích thước, biến thể ngược cho nền tối, và dạng inline hoặc không kiểu.
list	.instui-list	Một danh sách với khoảng cách mục do token điều khiển.
list.item	.instui-list	Một mục danh sách (InstUI List.Item).
mask	.instui-mask	Một overlay trong dòng chiếm đầy phần tử cha đã định vị và căn giữa nội dung — ví dụ: spinner trên một card. Đối với modal, ưu tiên <dialog> gốc ( ::backdrop của nó là mask). Mỗi modifier này cũng có sẵn toàn cục (trần, hoặc xâu vào bất kỳ component nào khác) — xem utility toàn cục mask.
menu	.instui-menu	Một bề mặt dropdown gồm các mục, nhóm, và phân cách.
menu.group	.group	Một tiêu đề nhóm có nhãn (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Một mục menu (InstUI Menu.Item); thêm -disabled, -highlighted, hoặc -active/[aria-checked].
menu.separator	.separator	Một đường phân chia giữa các mục (InstUI Menu.Separator).
metric	.instui-metric	Một thống kê có nhãn — một giá trị lớn trên một chú thích.
modal	.instui-modal	Một bề mặt dialog (hoạt động trên native <dialog>); gồm phần header/body/footer.
modal.body	.body	Vùng nội dung (InstUI Modal.Body); một <img> đơn lẻ sẽ trải full-bleed.
modal.footer	.footer	Hàng hành động (InstUI Modal.Footer).
modal.header	.header	Hàng tiêu đề (InstUI Modal.Header).
number-input	.instui-number-input	Một facade input số với cột spinner +/-.
pagination	.instui-pagination	Điều hướng trang: các trang đánh số, mũi tên first, previous, next, last, và dấu chấm lửng cho khoảng trống.
pagination.page	.page	Một liên kết trang hoặc nút (InstUI Pagination.Page); trang hiện tại mang [aria-current].
pill	.instui-pill	Một nhãn trạng thái nhỏ gọn; thêm biểu tượng dẫn bằng dạng -icon-<name> chia sẻ.
popover	.instui-popover	Một bề mặt nâng cho một [popover] gốc, định vị bằng CSS anchor positioning.
progress	.instui-progress	Thanh tiến trình có giá trị xác định với meter màu, các kích thước, và nhãn giá trị tùy chọn.
progress-circle	.instui-progress-circle	Một vòng tiến trình tròn vận hành bằng các thuộc tính tùy chỉnh --value và --value-max.
radio	.instui-radio	Một radio button gốc và nhãn của nó.
radio-input-group	.instui-radio-input-group	Một <fieldset> radio đơn chọn, dạng plain hoặc như toggle phân đoạn kết nối.
range-input	.instui-range-input	Một slider range được kiểu hóa với bong bóng giá trị đảo.
rating	.instui-rating	Một xếp hạng sao với ký hiệu đầy và rỗng và nhãn số tùy chọn.
side-nav-bar	.instui-side-nav-bar	Một thanh điều hướng dọc gồm các mục biểu tượng-trên-nhãn, với chế độ thu nhỏ chỉ còn biểu tượng.
side-nav-bar.item	.item	Một mục điều hướng (InstUI SideNavBar.Item); -selected đánh dấu mục đang hoạt động.
simple-select	.instui-simple-select	Một <select> gốc được định kiểu với mũi tên caret, khớp với trạng thái và kích thước của ô nhập văn bản.
spinner	.instui-spinner	Một vòng tải động; gán role="status" và một aria-label.
table	.instui-table	Một bảng dữ liệu được định kiểu cho th và td kèm chú thích tùy chọn, với các bố cục hover, cố định và thẻ xếp chồng.
table.body	tbody	Nhóm các hàng dữ liệu của bảng (InstUI Table.Body).
table.cell	td	Một ô dữ liệu (InstUI Table.Cell).
table.col-header	th	Một ô tiêu đề cột (InstUI Table.ColHeader); kiểu mặc định th bị ghi đè bởi table.row-header cho th[scope="row"].
table.head	thead	Nhóm hàng tiêu đề của bảng (InstUI Table.Head).
table.row	tr	Một hàng bảng (InstUI Table.Row).
table.row-header	th[scope="row"]	Một ô tiêu đề hàng (InstUI Table.RowHeader); được định kiểu từ token tiêu đề-hàng, không phải token tiêu đề-cột.
tabs	.instui-tabs	Một tập hợp bảng điều khiển theo thẻ: danh sách thẻ, các thẻ có thể chọn, và các bảng nội dung tương ứng.
tabs.panel	.panel	Bảng nội dung cho một thẻ (InstUI Tabs.Panel).
tabs.tab	.tab	Một nút thẻ đơn (InstUI Tabs.Tab, được cấu hình qua danh sách thẻ của cha Tabs); -selected đánh dấu thẻ đang hoạt động.
tag	.instui-tag	Một chip nội tuyến cho từ khóa hoặc bộ lọc.
text	.instui-text	Kiểu chữ phần thân với các biến thể kích thước, độ đậm, màu sắc và kiểu.
text-area	.instui-text-area	Một <textarea> gốc được định kiểu, có thể thay đổi kích thước, với cùng trạng thái và kích thước như ô nhập văn bản.
text-input	.instui-text-input	Một <input> gốc được định kiểu — bao gồm date, time, và datetime-local, nơi trình duyệt cung cấp bộ chọn — với trạng thái xác thực và kích thước.
toggle-details	.instui-toggle-details	Một disclosure gốc <details> được định kiểu với mũi tên chevron xoay.
toggle-group	.instui-toggle-group	Một disclosure có viền xây dựng trên <details>: một hàng tóm tắt với chevron và phần nội dung có thể thu gọn.
tooltip	.instui-tooltip	Một bong bóng tooltip cho hover và focus bằng CSS, có thể định vị ở bất kỳ phía nào.
tray	.instui-tray	Một panel ghim mép trượt vào từ bất kỳ phía nào; một [popover] hoặc <dialog> gốc.
tree-browser	.instui-tree-browser	Một cây disclosure gồm các tập hợp lồng nhau và mục lá, với chevron xoay.
view	.instui-view	Nguyên thủy View: một hộp trung lập với các modifier key-value cho nền, viền, bán kính, đổ bóng, hiển thị, vị trí, overflow và con trỏ. Mỗi modifier này cũng có sẵn toàn cục (trơ, hoặc nối chuỗi lên bất kỳ thành phần nào) — xem các tiện ích background/border/shadow/display/position/overflow/cursor.

Tiện ích

Tên	Lớp	Tóm tắt
color	.--text-danger	Tiện ích màu ngữ nghĩa: .--bg-<name>, .--text-<name> (bí danh là .--color-<name>), và .--border-<name> cho bảng màu ngữ nghĩa được tuyển chọn. Mỗi cái này cũng có một biến thể alias gắn với thành phần (ví dụ -bg-danger trên bất kỳ .instui-<component> nào).
cursor	.--cursor-pointer	cursor như một lớp toàn cục có thể kết hợp — .--cursor-<value> — dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào (.instui-button.--cursor-pointer).
gap	.--gap-md	Các tiện ích flex/grid gap trên thang khoảng cách, viết tắt (--gap-sm) hoặc viết đầy (--gap-small). Dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào (.instui-view.--gap-sm) — các thành phần đã đặt gap của riêng chúng từ token thành phần có thể bị ghi đè.
icon	.instui-icon	Hệ thống biểu tượng: kích thước .instui-icon cộng bộ vẽ chung -icon-<name> che phủ glyph (trong currentColor) trước bất kỳ phần tử nào.
layout	.--display-flex	Tiện ích hiển thị và canh lề chữ — .--display-<value> và .--text-align-<value> — như các lớp toàn cục có thể kết hợp, dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào.
maskglobal	.--mask-overlay	Bản sao toàn cục, đôi của các modifier overlay của thành phần mask — --mask-overlay, --mask-fullscreen, --mask-blur — dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào, mà không cần bọc trong phần tử .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y như các lớp toàn cục có thể kết hợp — .--overflow-x-<value> / .--overflow-y-<value> — dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào.
position	.--position-relative	position như một lớp toàn cục có thể kết hợp — .--position-<value> — dùng trơ hoặc nối chuỗi lên bất kỳ thành phần nào (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Các lớp ẩn/hiện theo chiều rộng cổng nhìn (viewport) hoặc chứa (container) trên thang breakpoint có chủ đề.
screen-reader-content	.instui-screen-reader-content	Ẩn nội dung theo trực quan nhưng giữ cho công nghệ hỗ trợ tiếp cận có thể truy cập (mẫu cắt tiêu chuẩn).
spacing	.--p-md	Tiện ích margin và padding — .--m<side>-<step> / .--margin-<side>-<step> và .--p<side>-<step> / .--padding-<side>-<step> trên thang khoảng cách (các cạnh t/b/s/e/x/y hoặc không có, viết tắt hoặc viết đầy đủ — ví dụ --mb-sm và --margin-bottom-small là cùng một quy tắc; margin cũng nhận auto). Có thể dùng độc lập hoặc ghép vào bất kỳ component nào (ví dụ class="instui-view --mb-sm").
stacking	.--stack-topmost	Tiện ích độ sâu z-index — .--stack-<level> (deepest, below, above, topmost) — có thể dùng độc lập hoặc ghép vào bất kỳ component nào, để các lớp xếp chồng có thể dự đoán thay vì dùng số điều chỉnh thủ công.
transition	.instui-transition.-transition-fade-entering	Lớp trạng thái hoạt hình cho component Transition — .instui-transition và các lớp trạng thái (-transition-fade-entering, -transition-scale-exited, v.v.) — có thể dùng độc lập hoặc ghép vào bất kỳ component nào.
truncate	.--truncate	Cắt bớt văn bản với dấu chấm lửng và giới hạn dòng được điều khiển bởi --lines — có thể dùng độc lập hoặc ghép vào bất kỳ component nào (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Đường viền gỡ lỗi layout: ghép hợp thành .-with-visual-debug lên bất kỳ phần tử nào để khoanh vùng hộp và các con trực tiếp của nó, giúp cấu trúc layout hiển thị ngay lập tức.

Quy tắc

Tên	Lớp	Tóm tắt
base	*	Reset toàn cục theo tùy chọn: box-sizing, bề mặt trang, màu chữ và font cơ bản, color-scheme, và các mặc định liên kết.
prose	:where(body)	Các mặc định kiểu chữ cho HTML thô — tiêu đề, đoạn văn, danh sách, liên kết và code — được áp dụng tự động ở nơi import (mặc định :where(body)); truyền options.scope để nhắm vào gốc nội dung khác nếu cần (ví dụ .vp-doc).

Plugins

Tên	Lớp	Tóm tắt
logos	.logos	Logo sản phẩm Instructure dưới dạng token ảnh CSS: --instui-logo-<product>-<layout>-<mode> chứa data-URI SVG, vì vậy logo có thể hiển thị bằng ví dụ background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Lớp tiện ích tùy chọn cho bảng màu primitive: .instui-bg-/fg-/border-primitive-color-<name> tô màu từ các token màu primitive, cộng với tiện ích font-family/font-weight cho token font primitive. Để riêng khỏi các tiện ích ngữ nghĩa để ghi đè ở đó vẫn chỉ mang tính ngữ nghĩa.
visual-debug	.-with-visual-debug	Đường viền gỡ lỗi layout: ghép hợp thành .-with-visual-debug lên bất kỳ phần tử nào để khoanh vùng hộp và các con trực tiếp của nó, giúp cấu trúc layout hiển thị ngay lập tức.

layout

Tên	Lớp	Tóm tắt
callout	div[class~="instui-callout"]	Cảnh báo thông tin nội tuyến cho lời nhắc hoặc ghi chú ngắn.
hero	div[class~="instui-hero"]	Phần tiêu đề bề rộng đầy đủ với tiêu đề, phụ đề và tùy chọn hình nền.
page-layout	div[class~="instui-page-layout"]	Bố cục trang chuẩn ba cột với header, sidebar và nội dung chính.
rubric-note	div[class~="instui-rubric-note"]	Ghi chú có cấu trúc với các hạng mục rubric và chỉ báo điểm.
testimonial	div[class~="instui-testimonial"]	Hiển thị trích dẫn hoặc lời chứng thực kèm nguồn và hình ảnh tùy chọn.
two-column	div[class~="instui-two-column"]	Bố cục hai cột với vùng nội dung trái và phải.
wrapper	body[class~="instui-display-flex"]	App-shell hàng: điều hướng bên, container có header, và panel tùy chọn.