在故事书 6 中禁用每个故事的画布

2023-12-31

我正在尝试找到一种在新故事书 6 的故事级别禁用画布的方法。我正在制作一个组件库,根据故事的不同,其中一些组件只有画布,而其他组件只有文档。

我尝试过使用

myStory.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
};

or

myStory.parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: false,
    },
  },
};

取决于故事。但是,这会导致不显示选项卡名称。结果,会发生以下情况:

  1. 我有故事 1 - 只有画布可见
  2. 我有故事 2 - 只有文档可见
  3. 我单击故事 1 - 正如预期的那样,我看到了画布
  4. 我点击故事 2 - 我也看到了画布,尽管它是隐藏的(我想是因为该选项卡已从上一个故事中保留下来)。好像这还不够糟糕,我什至无法单击文档,因为没有可见的选项卡名称。
  5. 反之亦然(如果我从故事 2 开始)

作为文档的解决方法,我发现了这个(感谢Benjamin https://stackoverflow.com/users/722367/benjamin,在这篇文章中here https://stackoverflow.com/questions/63499683/hide-docs-tab-in-storybook):

myStory.parameters = {
  docs: { page: null },
};

这样,我仍然可以看到画布和文档选项卡,但对于已设置此参数的故事,文档选项卡现在为空。

我正在寻找对画布做类似的事情,并且已经尝试过

myStory.parameters = {
  canvas: { page: null },
};

myStory.parameters = {
  canvas: { disabled: true },
};

但还没有工作。


我不知道这个解决方案是否适合您的需求,但我发现的解决方法是将我的故事写在.mdx并禁用画布Meta:

import { Meta } from '@storybook/addon-docs/blocks';
import { MyComponent } from './MyComponent';

<Meta
  title="Section/MyComponent"
  parameters={{
    viewMode: 'docs',
    previewTabs: { 
      canvas: { hidden: true } 
     },
  }}
/>

# My markdown title

<Canvas>
  <Story name="mycomponent">
    <MyComponent />
  </Story>
</Canvas>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在故事书 6 中禁用每个故事的画布 的相关文章

随机推荐

  • ASP.Net Core Blazor:如何根据标头值加载不同的 _Host.cshtml 文件

    我想加载一个 Host cshtml基于请求中的标头的 ASP NET Core Blazor 项目 服务器端 Blazor 中的文件 例如 客户端连接到example com并被重定向到 Host cshtml特定于租户 A 的文件 另一
  • 在Python中关闭窗口并打开文本编辑器时保持脚本运行[重复]

    这个问题在这里已经有答案了 众所周知 愚人节即将到来 所以我想我应该写一个很好的脚本来恶作剧某人 这是众所周知且令人恐惧的 MEMZ 病毒的无害版本 我目前拥有的脚本 import webbrowser import time def pr
  • AngularJS 幻灯片过渡在 Safari ios 9 上损坏

    我有以下 css 类 用于在路线更改开始时左右滑动我的 ng view 这些在大多数浏览器 手机等上都工作得很好 直到现在 在ios 9下动画不太工作 它不再从左到右滑动 但视图在滑动时从小尺寸增长到全尺寸 效果相当不愉快 欢迎任何帮助 C
  • 如何创建按月份分组的年度条形图

    我在尝试使用 和 创建条形图时遇到了困难DataFrame按年份和月份分组 使用以下代码 我尝试在创建的图像中绘制数据 而不是返回第二个图像 我还尝试将图例移至右侧并将其值更改为相应的月份 我开始感受到通过groupby命令 虽然没有得到我
  • 如何抑制“缺乏具体实施”的警告?

    我该怎么做才能防止编译器抛出以下警告 缺少 setter MyClass field 和 getter 的具体实现 我的班级 field 在下面的代码上 import package mock mock dart class MyClass
  • Django IntegrityError - NOT NULL 约束失败

    我遇到的错误表明我正在尝试提交一个必填字段为空的表单 Error django db utils IntegrityError NOT NULL constraint failed bug report bug project id 我的代
  • C# 枚举 - 如何比较值

    我如何比较这个枚举的值 public enum AccountType Retailer 1 Customer 2 Manager 3 Employee 4 我试图在 MVC4 控制器中比较此枚举的值 如下所示 if userProfile
  • 如何避免多次 if null 检查[重复]

    这个问题在这里已经有答案了 可能的重复 Deep Null 检查 有更好的方法吗 https stackoverflow com questions 2080647 deep null checking is there a better
  • laravel Rest api 中的身份验证和用户管理

    我正在为移动应用程序编写一个 REST API 我不知道如何在我的应用程序中对用户和管理员进行身份验证 我有一张名为 users 并且有一个名为 的字段isAdmin 那是0 or 1 现在当管理员发送帖子时 用户可以看到帖子 您如何推荐a
  • 在android中创建从上到下到状态栏和工具栏的线性渐变

    I want to add a Linear gradient color to Status Bar and Toolbar I am able to add gradient to status bar and toolbar with
  • 通过使用不同条件运行相同查询创建多个平面文件

    我的数据库表中有 1000 万个客户号码 我想每次为前 100 万客户运行查询并将该数据保存在 csv 文件中 我如何使用 SSIS 包做到这一点 前任 第一次 选择名字 姓氏 客户 ID 来自客户 其中客户 ID 介于 1 到 1 000
  • Spring 3 简单的无扩展 url 映射与基于注释的映射 - 不可能吗?

    我正在使用 Spring 3 并尝试使用注释来定义控制器映射来设置一个简单的 Web 应用程序 如果不使用 form 或 do 填充所有网址 这似乎非常困难 由于网站的部分内容需要密码保护 因此这些网址均位于 secure 下 有一个
  • 按时间间隔创建月平均值

    抱歉 如果这已经发布了 但我真的很努力 找不到任何东西 我从事每月温度观测工作已有 30 年 从 1960 年 1 月到 1989 年 12 月 它看起来像这样 gt head df date temp 1 1960 01 01 22 92
  • Bootstrap:手风琴不会自动折叠之前打开的面板

    我需要创建一个引导手风琴 下面的标记工作正常 但它不会自动折叠先前打开的元素 例如 打开 panel1 然后单击 panel2 然后 panel1 应该自动关闭 但事实并非如此 我尝试从引导站点 http twitter github co
  • java.lang.VerifyError:在分支目标 73 处期望堆栈图帧

    我使用jdk 1 7 jekins maven 当我构建项目时 单元测试失败 错误是 java lang VerifyError 在分支目标 73 处期望堆栈图帧 异常详细信息 位置 com DataDictDao save Lcom Da
  • 有没有办法在nodejs中停止执行异步系列的下一个函数?

    async map list function object callback async series function callback console log 1 var booltest false assuming some lo
  • 为什么使用双重间接?或者为什么使用指向指针的指针?

    什么时候应该在 C 中使用双重间接寻址 谁能用例子解释一下吗 我所知道的是 双重间接是指向指针的指针 为什么我需要一个指向指针的指针 如果你想要一个字符列表 一个单词 你可以使用char word 如果你想要一个单词列表 一个句子 你可以使
  • jquery根据行数、列数生成表

    如何根据给定的行数和列数在 jQuery 中生成表格 您可以使用嵌套的 for 循环 创建元素并将它们相互附加 这是一个非常简单的示例 演示了如何创建 DOM 元素并附加它们 你会注意到
  • JavaScript 聊天客户端的服务器轮询间隔

    我正在为我的网站构建一个基本的小型 AJAX 聊天室 聊天室 但我不确定如何实现服务器轮询 这是我正在考虑的基本程序流程 用户进入页面并显示最近 10 条消息 为了获取其他人发送的消息 客户端 JavaScript 将请求带有时间戳参数的
  • 在故事书 6 中禁用每个故事的画布

    我正在尝试找到一种在新故事书 6 的故事级别禁用画布的方法 我正在制作一个组件库 根据故事的不同 其中一些组件只有画布 而其他组件只有文档 我尝试过使用 myStory parameters previewTabs canvas hidde