ComponentHiển thị dữ liệu
Bắt đầu nhanh
Import Grid từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Grid } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Grid thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Grid
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
columns | Number of columns or full template string. Default: 12 (1fr each). | number | string | — |
rows | Number of rows or full template string. | number | string | — |
gap | Overall gap (shorthand). | number | string | — |
gapX | Horizontal gap. | number | string | — |
gapY | Vertical gap. | number | string | — |
autoRows | Auto rows value (e.g. 'minmax(100px, auto)'). | string | — |
autoColumns | Auto columns value (e.g. 'minmax(100px, 1fr)'). | string | — |
autoFlow | Grid auto-flow direction and density. | GridAutoFlow | — |
minColumnWidth | Use auto-fit with a min width to create responsive columns. | number | string | — |
areas | CSS grid-template-areas. Provide full string or joined lines. | string | string[] | — |
alignItems | Item alignment within cells. | React.CSSProperties["alignItems"] | — |
justifyItems | Căn phần tử theo trục ngang trong ô lưới. | React.CSSProperties["justifyItems"] | — |
alignContent | Grid content alignment. | React.CSSProperties["alignContent"] | — |
justifyContent | Căn toàn bộ nội dung lưới theo trục ngang. | React.CSSProperties["justifyContent"] | — |
responsive | Responsive overrides by breakpoint (Tailwind defaults). | Partial<Record<Breakpoint, ResponsiveConfig>> | — |
variant | Visual variant style. | GridVariant | — |
animated | Enable smooth animations for grid layout changes. | boolean | — |
outlined | Apply Card-like outline (rounded + border + bg-card). | boolean | — |
GridItem
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
colSpan | Column span (e.g., 3 => span 3). | number | string | — |
rowSpan | Row span. | number | string | — |
colStart | Column start line. | number | string | — |
colEnd | Column end line. | number | string | — |
rowStart | Row start line. | number | string | — |
rowEnd | Row end line. | number | string | — |
area | Named area (must match container areas). | string | — |
alignSelf | Item alignment override. | React.CSSProperties["alignSelf"] | — |
justifySelf | Mã nguồn chưa cung cấp mô tả bổ sung. | React.CSSProperties["justifySelf"] | — |
order | Order of the item in the grid. | number | — |
hoverable | Add hover effect. | boolean | false |
animationDelay | Add animation delay (in ms). | number | — |
Hướng dẫn sử dụng
Dùng Grid để trình bày dữ liệu có cấu trúc dễ quét. Cần tiêu đề có nghĩa, thứ tự ổn định và hành vi responsive phù hợp với dữ liệu dày.
Trợ năng
Khi dùng Grid, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.