Storybook

Storybook 是一個用於在隔離環境中建構 UI 元件和頁面的前端工作坊。數以千計的團隊將其用於 UI 開發、測試和文件。它是開源且免費的。

自 7.0 版起，Storybook 原生支援 Vite，這意味著它也對 Qwik 提供一流的支援。

使用方法

您可以將 Storybook 添加到您現有的應用程式或程式庫中

npm run qwik add storybook

先前的指令會安裝必要的依賴關係，並添加範例元件和 stories

現在您可以啟動 Storybook 儀表板了

npm run storybook

範例

簡單元件

以下範例展示了一個使用 qwik 元件的簡單 story

src/components/button.tsx

import { component$ } from "@builder.io/qwik";
 
export interface ButtonProps {
  label: string;
}
 
export const Button = component$<ButtonProps>(({label}) => {
  return (
    <button>
      {label}
    </button>
  );
});

src/components/button.stories.tsx

import type { Meta, StoryObj } from "storybook-framework-qwik";
import {Button, type ButtonProps} from "./button";
 
const meta: Meta<ButtonProps>  = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<ButtonProps>; 
 
export const Primary: Story = {
  args: {
    label: "Hello World", 
  }
};

使用 QwikCity 的元件

使用 Qwikcity 時，您必須使用 <QwikCityMockProvider> 將上下文傳遞給 story

src/components/with-link.tsx

import { component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";
 
export const WithLink = component$(() => {
  return (
    <Link href="https://google.com">Google Link</Link>
  );
});

src/components/with-link.stories.tsx

import type { Meta, StoryObj } from "storybook-framework-qwik";
import { QwikCityMockProvider } from "@builder.io/qwik-city";
 
import { WithLink } from "./with-link";
 
const meta: Meta = {
  component: WithLink,
};
 
type Story = StoryObj;
export default meta;
 
export const Primary: Story = {
  render: () =>
    <QwikCityMockProvider>
      <WithLink />
    </QwikCityMockProvider>
};

如需更多資訊，請參閱 storybook 文件。

貢獻者

感謝所有幫助改進此文件的貢獻者！