使用 @Storybook/addon-docs 显示模板的代码

Posted 2023-02-19

技术标签:

【中文标题】使用 @Storybook/addon-docs 显示模板的代码【英文标题】：Show template's code with @Storybook/addon-docs 【发布时间】：2020-11-02 22:43:18 【问题描述】：

我正在 Storybook 中记录我的组件。我添加了@storybook/addon-docs 并在 *.stories.ts 中定义了这样的故事：

export const Button = () => (
  template: '<button class="button">Delete</button>',
);

带有样式的按钮显示正确，但是当有人点击“显示代码”时，它会显示故事的代码，而不仅仅是模板。

() => (
  template: '<button class="button button-danger">Delete</button>'
)

是否可以配置，“显示代码”显示模板，而不是整个故事？

【问题讨论】：

【参考方案1】：

尝试评论，文档来源

//Connect below line from .stories.js
parameters: 
 docs: 
  source: 
    type: 'code'

【讨论】：

以上是关于使用 @Storybook/addon-docs 显示模板的代码的主要内容，如果未能解决你的问题，请参考以下文章