Storybook: 能够隐藏画布选项卡

作为addon-docs一部分，我们以相当硬编码的方式执行此操作。 @ndelangen我想知道我们是否应该让它更可配置。

我们可以“隐藏”它，但它必须存在才能让故事书立即运行，至少在 #4169 之前。

通过某些选项隐藏它是可能的。

嗨，大家好！ 最近这个问题好像没什么大不了的。 如果还有问题、意见或错误，请随时继续讨论。 不幸的是，我们没有时间处理每一个问题。 我们始终对贡献持开放态度，因此如果您愿意提供帮助，请向我们发送请求请求。 非活动问题将在 30 天后关闭。 谢谢！

我目前面临同样的问题。 理想情况下，我们可以选择根据需要重新排序选项卡，例如在我的情况下，Notes 可以先出现，Canvas 再出现。

@eduina @B3Kay仅供参考您目前可以使用--docs标志隐藏所有非文档选项卡，例如yarn storybook --docs或yarn build-storybook --docs

是否有更改顺序和/或默认选择的选项？ 我们希望主要将 Storybook 用于 Docs 功能，但仍然可以查看画布。 但是，由于 Canvas 处于第一个位置并被默认选中，新用户有时会错过 MDX 文件中包含的实际文档。

@bmayen我想说这与隐藏画布选项卡进入相同的功能桶。

我很想看到能够隐藏特定故事的画布选项卡以及能够隐藏故事，这样你就有了组件的高级文档选项卡，就是这样

我目前对此的解决方法是在文档中没有任何“故事”标签，但是我失去了“显示代码”按钮的功能。 有没有办法在没有故事的情况下获得预览+代码？ 谢谢

@sanchez见https://github.com/storybookjs/storybook/pull/7966

嗨，大家好！ 最近这个问题好像没什么大不了的。 如果还有问题、意见或错误，请随时继续讨论。 不幸的是，我们没有时间处理每一个问题。 我们始终对贡献持开放态度，因此如果您愿意提供帮助，请向我们发送请求请求。 非活动问题将在 30 天后关闭。 谢谢！

不，我要这个！

2019 年 10 月 24 日星期四凌晨 3:44 stale[bot] [email protected]写道：

嗨，大家好！ 似乎这个问题没有太多进展
最近。 如果仍有问题、意见或错误，请随时
继续讨论。 不幸的是，我们没有时间去
每一个问题。 我们始终对贡献持开放态度，因此请向我们发送请求
如果您想提供帮助，请提出请求。 非活动问题将在 30 后关闭
天。 谢谢！

—
您收到此消息是因为您订阅了此线程。
直接回复本邮件，在GitHub上查看
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LODMX5K8ZGOZGO-COMMANV500000000000000001
或取消订阅
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

在我的公司，故事书有两个主要用途

1. 记录我们的设计系统- 此用例面向设计和产品部门
2. 记录我们的Web 组件- 此用例面向工程部门

在前一种情况下，我们更愿意仅展示具有典型内容和组件属性的“真实世界示例”。 然而，在后一种情况下，我们更愿意使用最少的占位符内容详尽地记录所有组件属性，保留默认值。

面向设计的案例非常适合文档模式，而我们仍然希望保留画布供工程师根据需要使用。

然而，我们都同意为了“尽我们所能”，应该更突出地显示漂亮的文档模式。

为此，我们希望能够将故事书配置为在最左侧显示“文档”选项卡，在右侧显示“画布”。

在这里和聊天中都有很多请求。 这可能是一个通用的 SB UI 问题，而不是特定于文档的问题，但我们会以一种或另一种方式找出解决方案。 抄送@ndelangen

@eduina @B3Kay仅供参考您目前可以使用--docs标志隐藏所有非文档选项卡，例如yarn storybook --docs或yarn build-storybook --docs

如果我们这样做插件消失了，有什么方法可以显示插件吗？

@matiasmenker目前不是https://github.com/storybookjs/storybook/issues/6700

我自己也遇到了这个问题。 任何可以开始在 PR 上工作的指针？

拉斯这并不容易。 preview.js工作方式： https :

标签被注入那里。

我们必须从 iframe 的渲染中分离添加选项卡。

我们不能不注入 iframe，因为 iframe 还呈现文档并实际上告诉经理要在资源管理器中显示哪些故事。

@LarsDenBakker - 它实际实施并等待#9095，竖起大拇指以加快审查和合并过程:)

艾玛格德！！ 我刚刚发布了包含引用此问题的 PR #9095 的https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 。 立即升级试用！

您可以在@next NPM 标签上找到此预发行版。

关闭这个问题。 如果您认为还有更多工作要做，请重新打开。

PR #9005 很好，但我仍然缺少设置默认选项卡的功能：即使 - 例如 - 文档选项卡放在第一个位置，打开故事时画布选项卡处于活动状态。

@eduina @B3Kay仅供参考您目前可以使用--docs标志隐藏所有非文档选项卡，例如yarn storybook --docs或yarn build-storybook --docs

@希尔曼
在 5.3.7 和 5.3.14 上验证不工作。 画布选项卡仍然可见

现在绝望地等待这个版本。 在长时间持有此更新后，我几乎完成了升级。 @shilman可能知道我用addon-info引发的错误历史。 它来自我的项目。
成功更新。 CSF和docspage美丽用法。 爱它！

如果可能，请加快此版本的发布。 依赖它。

并感谢您对 GitHub 问题或中等文章的所有支持。 非常感激。

您可以在此处跟踪发布状态https://github.com/storybookjs/storybook/issues/9311

@B3Kay我有同样的问题。 您可以将故事书 url /?path=/story/替换/?path=/docs/以在故事书打开时选择文档。

要隐藏按钮（根本不是理想的修复），我只是将以下 CSS 添加到注入 CSS 的浏览器扩展程序中（当然这仅适用于您，您的其他公司成员仍会看到它）：

#root > div > div.css-sqdry3 > div > div.css-sqdry3 > div:nth-child(1) > div > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div.css-11sh1n2 > div.css-1tgscux > a:nth-child(1) > button {
    display: none;   
}

不理想，但也许对某人有用。

如果有人感兴趣，我有一个适合我的解决方案。

我用这个创建了一个超级简单的插件。 这是register.js是这样的：

import { addons } from '@storybook/addons';
import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';

const ADDON_ID = 'YOUR_PLUGIN_ID';

addons.register(ADDON_ID, api => {

    // Check whether we are on a docsOnly page and add a corresponding body class for styling
    const setBodyClass = () => {

        // Needs animation frame to make sure story component has been mounted
        window.requestAnimationFrame(() => {

            // You can change the logic of when to hide the canvas button of course.
            // you have full access to the storybook API, so you can also configure it per-story etc.
            const isDocsOnly = api.getCurrentStoryData().parameters.docsOnly === true;

            if (isDocsOnly) {
                document.body.classList.add('is-docs-only');
            } else {
                document.body.classList.remove('is-docs-only');
            }
        });
    };

    api.on(STORY_RENDERED, setBodyClass);
    api.on(DOCS_RENDERED, setBodyClass);
});

在我的manager-head.html

.is-docs-only .os-content a:not([id])[href*="?path=/story"] {
    display: none !important;
}

在我的docsOnly页面上，我设置了viewMode: 'docs'以确保导航正常工作。