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的一个强大插件，允许开发者在UI故事中交互式地调整组件参数（如字符串、数字、布尔值等），从而实现对组件外观和行为的实时调整。随着Knobs的废弃并迁移到了EOL（生命周期结束）状态，请注意，以下信息基于其最后稳定版本的指导。如果你寻求最新功能，建议探索Storybook官方推荐的替代方案。

1. 项目目录结构及介绍

典型的storybook-addon-knobs集成并不会直接增加庞大的项目结构变化。但了解核心文件及其所在位置对于正确配置和使用该插件至关重要。

• .storybook: 这个目录存放Storybook的所有配置文件和额外设置。

  • main.js 或 config.js: 是主要配置文件，用于设置Storybook的全局选项，包括添加插件。
  • addons.js (可能存在于较旧的版本): 如果存在，它也是用来注册addon的地方，尽管现在通常在主配置文件中完成。

• stories: 包含所有组件的故事文件。每个.stories.js或.mdx文件可以包含一个或多个故事，并可能使用Knobs来动态改变组件的呈现。

2. 项目的启动文件介绍

• 启动Storybook: 不直接属于storybook-addon-knobs的文件，但它通常是通过运行命令npm run storybook或yarn storybook来启动的。这个命令基于你的包管理器和配置文件（通常是package.json中的脚本部分）来执行。

• 若要集成Knobs: 主要在.storybook/main.js或类似配置文件中引入插件，示例代码如下：

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

3. 项目的配置文件介绍

.storybook/main.js

这是关键的配置文件，用于定义Storybook如何运行以及它将加载哪些addon。要启用knobs，需在此处将其添加到addons数组中。如果需要进一步定制，例如指定特定的Knob类型显示方式，可能还需要其他配置，但基本配置足够大部分使用场景。

.storybook/preview.js

在这个文件中，你可以进行更细粒度的配置，例如全局默认Knobs设定或是自定义Knobs的行为。例如，导入Knobs装饰器并全局应用它:

import { addDecorator } from '@storybook/client-api';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

确保当你的故事被渲染时，Knobs addon已经准备就绪。

使用Knobs in Stories

在具体的story文件中，比如.stories.js或.mdx，你会这样使用Knobs:

import { boolean, text, number } from '@storybook/addon-knobs';

// 假设我们有一个Button组件
function Button() {
  const disabled = boolean('Disabled', false); // 控制按钮是否禁用
  const label = text('Label', 'Click me'); // 组件标签文本
  const size = number('Size', 16, { range: true, min: 8, max: 72, step: 4 });

  return <button disabled={disabled} style={{ fontSize: `${size}px` }}>{label}</button>;
}

export default {
  title: 'Example/Button',
};

export const NormalButton = () => <Button />;

以上就是关于集成和使用storybook-addon-knobs的基本指南。记住，虽然此addon已达到EOL，但在许多现有项目中仍能工作，对于新项目则应考虑迁移到更现代且支持的解决方案。

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