禁用 Canvas 故事书中的“显示代码”按钮

Question

我使用故事书中的 Canvas 标签：

<Canvas>
  <Story name="Hello">
    {MyStory.bind({})}
  </Story>
</Canvas>

如果我在我的

.mdx

文件中添加此代码，则会出现代码源，但我想禁用负责显示源代码的按钮。
问题：如何实现我所描述的？

Answer 1

我认为您需要删除 Canvas 标签，它很可能应该删除

show code

按钮。

Answer 2

Canvas

元素通过添加“显示代码”功能增强了故事。 移除画布应该将其移除。

此外，如果您通过 CSF 创建故事，将

parameters.docs.canvas.sourceState

设置为

none

应该会在自动生成的情况下隐藏“显示代码”按钮：

export const Foobar = {
    // the name below will render as the name of the story instead of "Foobar"
    name: "A name other than Foobar",
    parameters: {
        docs: {
            canvas: {
                // This will remove the "show code" button
                // https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
                sourceState: "none"
            }
        }
    }
}