Bo cuc

Card

Xem trước Card, sao chép snippet setup, xem ví dụ và kiểm tra export API cho @tuturuuu/ui/card.

Preview trực tiếp@tuturuuu/ui/cardXem tài liệu

Xem trước

Preview gọn dùng cùng primitive dùng chung được export bởi package.

Cài đặt

Cài package UI dùng chung, import global styles một lần, sau đó import thành phần từ subpath công khai.

terminal

bun add @tuturuuu/ui

bước thủ công

import '@tuturuuu/ui/globals.css';

bước thủ công

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tuturuuu/ui/card';

Cách dùng

Sao chép snippet mặc định và điều chỉnh nhãn, trạng thái, handler theo bề mặt sản phẩm.

usage.tsx

import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';

<Card>
  <CardHeader><CardTitle>Workspace</CardTitle></CardHeader>
  <CardContent>Summary content</CardContent>
</Card>

Ví dụ

Ví dụ dùng lại snippet registry để tài liệu luôn khớp với catalog thành phần.

Mặc định

Một cách dùng tối thiểu dựa trên snippet registry hiện tại.

card.tsx

import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';

<Card>
  <CardHeader><CardTitle>Workspace</CardTitle></CardHeader>
  <CardContent>Summary content</CardContent>
</Card>

Kết hợp

Dùng các export nhóm khi primitive có slot, trigger, vùng nội dung hoặc provider.

card.tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@tuturuuu/ui/card';

Import package

Import qua đường dẫn package công khai để app workspace và app ngoài dùng chung một contract.

card.tsx

// Public package import
import { Card } from '@tuturuuu/ui/card';

// Workspace apps should keep importing through the package boundary.

Tham chiếu API

Các export công khai hiện có từ entry thành phần này.

Tên	Loại	Mô tả
`Card`	Thành phần	Card được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.
`CardHeader`	Thành phần	CardHeader được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.
`CardTitle`	Thành phần	CardTitle được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.
`CardDescription`	Thành phần	CardDescription được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.
`CardContent`	Thành phần	CardContent được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.
`CardFooter`	Thành phần	CardFooter được export từ @tuturuuu/ui/card. Xem source để biết props và chi tiết kết hợp riêng của thành phần.

Tùy biến

Các prop, trạng thái và điểm kết hợp cần xem trước khi dùng thành phần.

HeaderContentFooter

Xem trước

Cài đặt

Cách dùng

Ví dụ

Mặc định

Kết hợp

Import package

Tham chiếu API

Tùy biến

Thành phần liên quan

Accordion

Aspect Ratio

Carousel

Tìm kiếm thành phần