如何显示故事书UI中使用的代码？

Question

我有 FooComponent 的 Angular 故事书文件。

在故事书用户界面中，我似乎找不到

<foo />

的代码片段。我该如何解决这个问题？

是否有显示使用的代码的配置？我在故事书文档或 github 中的任何故事书示例中找不到这一点。

const meta: Meta<FooComponent> = {
  component: FooComponent,
  title: 'FooComponent',
};

export default meta;
type Story = StoryObj<FooComponent>;

export const Primary: Story = {
  args: { ... },
};

在

main.ts

：

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-angular-router'],
  framework: {
    name: '@storybook/angular',
    options: { },
  },
};

export default config;

// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/recipes/storybook/custom-builder-configs

Answer 1

本文档可能对您有帮助https://storybook.js.org/docs/writing-docs/autodocs

默认情况下，Storybook 提供对文档的零配置支持，并自动为通过标签配置属性启用的每个故事设置文档页面。

因此，如果您希望为您的故事显示带有代码片段的文档，您需要向其添加

autodocs

标签。

// Button.stories.ts|tsx

const meta: Meta<typeof Button> = {
  component: Button,
  //👇 Enables auto-generated documentation for the component story
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

但是，如果您希望文档自动添加到所有故事中，则需要相应地更改文档配置

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  docs: {
    //👇 See the table below for the list of supported options
    autodocs: true,
    defaultName: 'Documentation',
  },
};

请注意，此配置适用于 Storybook v8。如果您有其他版本的 Storybook，请告诉我，我会尽力帮助您。