Storybook Addon Knobs 安装与使用指南

Storybook Addon Knobs 安装与使用指南

storybook-addon-knobsREPO/PACKAGE MOVED - Edit React props dynamically using the Storybook UI项目地址:https://gitcode.com/gh_mirrors/st/storybook-addon-knobs

---

项目介绍

Storybook Addon Knobs 是一个为 Storybook 设计的插件，它允许开发者在 Storybook 环境中通过交互式“旋钮”来动态地调整组件的属性值。然而，请注意，此插件已被标记为废弃（End-of-Life, EOL），并且社区推荐迁移至 Args/Controls。尽管如此，对于那些依然需要使用 Knobs 功能或研究其历史实现场景的用户来说，我们提供以下基于其旧版本的信息。

项目快速启动

要在一个现有的 Storybook 项目中快速集成已被废弃的 storybook-addon-knobs，你需要执行以下步骤：

首先，确保你的项目已经安装了 Storybook。然后，尝试添加该插件（虽然这个步骤应理解为回顾性质，实际开发中建议采用最新推荐的替代方案）:

npm install --save-dev @storybook/addon-knobs
# 或者，如果你使用 yarn:
yarn add --dev @storybook/addon-knobs

接着，在 .storybook/main.js 文件中添加配置：

module.exports = {
  addons: ['@storybook/addon-knobs'],
};

在一个故事文件中使用 Knobs：

import { select, number, text } from '@storybook/addon-knobs';
// 假设你有一个 Button 组件
import Button from './Button';

export default {
  title: 'Addon/Knobs',
};

export const WithKnobs = () => {
  const buttonType = select('Button Type', ['primary', 'secondary'], 'primary');
  const buttonSize = number('Button Size', 14);
  const buttonText = text('Text', 'Click me');

  return <Button type={buttonType} size={buttonSize}>{buttonText}</Button>;
};

应用案例和最佳实践

应用案例: 使用 Knobs 可以让开发者在不重新编译的情况下即时修改组件属性，这对于设计系统中的组件迭代尤为有用。例如，通过选择不同的颜色或大小选项，设计师和开发者可以迅速预览组件的不同状态。

最佳实践:

• 尽可能使用自动生成的 Args 而非 Knobs，除非特定场景下 Knobs 提供了不可替代的功能。
• 对于新项目，遵循 Storybook 的官方推荐，使用 Args/Controls 功能。
• 文档化你的 Knobs 设置，以便团队成员了解哪些属性是可调节的及其作用。

典型生态项目

由于 Knobs 已被废弃，关于典型的生态项目使用 Knobs 的参考变得有限。现代 Storybook 用户应当关注迁移到 Args/Controls 生态的例子，比如如何在项目中实现类似 Knobs 动态调整的能力但通过 Args 实现。官方 Storybook 示例库提供了大量基于 Args/Controls 的使用案例，这些成为了新的学习资源点。

---

请注意，考虑到 Knobs 已经不再维护，上述内容主要是为了满足教学或查阅历史资料的需要。在实际开发过程中，强烈推荐采用最新的官方推荐做法，即使用 Args 和 Controls 来达到相似甚至更优的交互式组件测试体验。

storybook-addon-knobsREPO/PACKAGE MOVED - Edit React props dynamically using the Storybook UI项目地址:https://gitcode.com/gh_mirrors/st/storybook-addon-knobs