app-template/packages/ui/stories/card.stories.tsx

40 lines
1.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { Meta, StoryObj } from "@storybook/react";
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "../src/index.js";
const meta = {
title: "Basic/Card",
component: Card,
tags: ["autodocs"],
} satisfies Meta<typeof Card>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => (
<Card className="w-[360px]">
<CardHeader>
<CardTitle>卡片标题</CardTitle>
<CardDescription>一句描述说明这个卡片的用途。</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">正文内容区域,可放表单、列表或摘要。</p>
</CardContent>
<CardFooter className="gap-2">
<Button size="sm">主要操作</Button>
<Button size="sm" variant="ghost">
次要操作
</Button>
</CardFooter>
</Card>
),
};