如何在Angular的Storybook文档预览页隐藏Stories板块？

要隐藏Autodocs页面中的Stories板块，仅保留文档内容，你可以通过以下两种方式实现：

单个组件配置修改 #

直接在组件的meta配置的parameters.docs中添加story: false参数，即可隐藏当前组件文档页的Stories板块：

const meta: Meta<BtnComponent> = {
    title: 'Buttons/button',
    component: BtnComponent,
    tags: ['autodocs'],
    parameters: {
        docs: {
          description: {
            component: 'Description...',
          },
          story: false // 新增该行，隐藏Stories板块
        }
    },
    argTypes: {
        type: {
            options: [CTypesButtonOption.PRIMARY, CTypesButtonOption.SECONDARY],
            control: { type: 'select' },
            description: "the type is for only determinate the style to use",
            table: {
              defaultValue: { summary: 'primary' }
            }
        },
        buttonText: {
          control: 'text',
          description: 'Label for button',
        },      
    },

    render: (args: BtnComponent) => ({
      props: {
        ...args,
      },
    }),
};

添加后，该组件的文档预览页将不再显示Stories列表，仅保留组件描述、参数说明等文档内容，单个故事仍可通过页面顶部的下拉菜单切换。

全局配置（可选） #

如果希望所有组件的Autodocs页面都默认隐藏Stories板块，可在.storybook/preview.js中设置全局参数：

export const parameters = {
  docs: {
    story: false
  }
};

该配置会覆盖单个组件的局部设置，一次性完成全局范围内的Stories板块隐藏。

内容的提问来源于stack exchange，提问作者RaimbowCD