@dazl/ 组件- 邮件

A 类 达兹 让您浏览和预览您的项目反应组件的集成 .

安装

在您的反应路由器项目中 :

npm install @dazl/component-gallery

设置

1. 增加图片库路线

在您的 React 路由器项目中创建一个只开发的路由 :

// app/dev/components.tsx
import '@dazl/component-gallery/styles.css';
export { default } from '@dazl/component-gallery/route';
export function clientLoader() {}
export function HydrateFallback() {}

注册路线 :

// app/routes.ts
import { route, type RouteConfig } from '@react-router/dev/routes';

export default [
  // ... your other routes
  route('dev/components', 'dev/components.tsx'),
] satisfies RouteConfig;

2. 创建组件实例

定义组件示例为 .example.tsx 导出 React 组件为默认导出的文件 :

// app/components/button/button.example.tsx
import { Button } from './button';

export default function ButtonExample() {
  return <Button>Click me</Button>;
}

当您在 Dazl 中打开工程时, 它会自动发现这些文件并提供一个列出所有示例的菜单, 允许您预览它们 .

使用量

将实例与章节组织起来

使用 Section 在单个文件中分组相关示例的组件 :

// app/components/button/button.example.tsx
import { Section } from '@dazl/component-gallery';
import { Button } from './button';

export default function ButtonExample() {
  return (
    <>
      <Section layout="row">
        <Section.Title>Sizes</Section.Title>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
      </Section>

      <Section layout="column">
        <Section.Title>States</Section.Title>
        <Button disabled>Disabled</Button>
        <Button loading>Loading</Button>
      </Section>
    </>
  );
}