如何为Storybook添加标签页以展示纯HTML/CSS组件版本

一、添加标签页展示纯HTML/CSS组件（无需额外插件/第三个Storybook） #

你不需要维护独立的纯HTML/CSS Storybook，直接利用Storybook原生功能就能在现有Angular/Web Component页面中添加切换标签：

方法1：用MDX文档实现多版本标签切换 #

MDX是Storybook官方推荐的文档格式，支持直接嵌入组件、纯HTML和自定义标签页：

import { Meta, Story, Tabs, TabItem } from '@storybook/addon-docs';
import { MyAngularComponent } from './my-angular.component';
import { MyWebComponent } from './my-web-component';

<Meta title="Components/MyComponent" component={MyAngularComponent} />

# MyComponent

<Tabs>
  <TabItem value="angular" label="Angular">
    <Story name="Angular Version">
      {() => ({ component: MyAngularComponent, props: { text: 'Click Me' } })}
    </Story>
  </TabItem>
  <TabItem value="web-component" label="Web Component">
    <Story name="Web Component Version">
      {() => ({
        template: `<my-web-component text="Click Me"></my-web-component>`
      })}
    </Story>
  </TabItem>
  <TabItem value="html-css" label="Pure HTML/CSS">
    <div className="my-component-demo">
      <!-- 直接写纯HTML结构 -->
      <button class="btn-primary">Click Me</button>
    </div>
    <!-- 内嵌CSS样式 -->
    <style>
      .btn-primary {
        padding: 8px 16px;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn-primary:hover {
        background: #0056b3;
      }
    </style>
  </TabItem>
</Tabs>

这种方式能让三个版本共享同一个组件页面上下文，逻辑连贯，无需额外维护成本。

方法2：用CSF+自定义装饰器实现全局标签切换 #

如果偏好CSF（Component Story Format）写法，可以在全局预览配置中添加装饰器，自动给所有Story加上纯HTML/CSS切换标签：

// .storybook/preview.js（Angular版本示例）
import { addDecorator } from '@storybook/angular';

addDecorator((storyFn, context) => {
  const originalStory = storyFn();
  // 定义纯HTML/CSS内容（可根据context动态匹配对应组件的HTML）
  const htmlCssContent = `
    <div class="html-css-demo">
      <button class="btn-primary">${context.args?.text || 'Click Me'}</button>
    </div>
    <style>
      .btn-primary { /* 样式代码 */ }
    </style>
  `;

  return {
    template: `
      <div class="story-tab-container">
        <button (click)="activeTab='original'">${context.parameters.framework || 'Angular'}</button>
        <button (click)="activeTab='html'">Pure HTML/CSS</button>
        <div *ngIf="activeTab === 'original'">${originalStory.template}</div>
        <div *ngIf="activeTab === 'html'" [innerHTML]="htmlContent"></div>
      </div>
    `,
    props: {
      ...originalStory.props,
      activeTab: 'original',
      htmlContent: htmlCssContent
    }
  };
});

二、添加更多页面详情内容 #

不用新增Story，直接在现有组件页面中扩展详情：

1. MDX文档中直接添加详情 #

在MDX里除了标签页，还可以自由添加组件说明、API文档、使用示例等：

<!-- 接上面的MDX代码 -->
## 组件详情
这是一个用于触发核心操作的按钮组件，支持三种使用形态：Angular组件、Web Component、纯HTML/CSS。

### API 参数说明
| 参数名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| text | string | "Click Me" | 按钮显示文本 |
| size | "sm" / "md" / "lg" | "md" | 按钮尺寸 |

### 纯HTML使用示例
```html
<button class="btn-primary btn-lg">提交表单</button>

### 2. CSF中通过参数添加详情
如果用CSF，可以通过`parameters.docs`配置添加组件描述和详情：
```javascript
export default {
  title: 'Components/MyComponent',
  component: MyAngularComponent,
  parameters: {
    docs: {
      description: {
        component: '核心操作按钮，支持Angular、Web Component和纯HTML三种使用方式，可自定义文本和尺寸。',
      },
      // 还可以添加自定义文档片段
      page: () => `<div>额外的组件详情内容...</div>`
    }
  },
  args: { text: 'Click Me' }
};

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