介绍
@nlabs/storybook-addon-options 是一个 Storybook 的插件，它允许你通过 UI 来编辑和展示在组件中用到的属性。它提供了一个界面，可以让开发人员轻松修改组件属性的值，而不需要在代码中手动更改。这个插件非常适合用于开发带有大量属性的组件。
安装
你可以使用 NPM 来安装 @nlabs/storybook-addon-options。
npm install --save-dev @nlabs/storybook-addon-options
或者你也可以使用 Yarn：
yarn add --dev @nlabs/storybook-addon-options
快速开始
现在，我们来看看如何在你的 Storybook 中使用 @nlabs/storybook-addon-options。
首先，我们需要在 Storybook 中注册这个插件。在你的 .storybook/config.js 文件中，添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- ------ - ------------ - ---- ------------------- ------ - ----------- - ---- --------------------------- -------------------------- ----- ----- --------- ------- ------ ---- --------------------------- ------------------ ---- ---- -------- ------------- - ------------------------------- -- --- --- ------- -- ---- ------- -- --- ----- - ---------------------- --------
在注册插件之后，我们可以编写我们的组件示例，并在属性面板中添加需要的属性，并设置它们的默认值。下面是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------ - -- ----- -------- ----- -------- -- -- -
-------
-----------------
-----------
-------------------
-
------
---------
--
---------------- - -
--- --- ------ ---- --
----- ----------------------------
--- --- -------- -- --- ---- --- ------ -- ------- --
-------- --------------------------
--- --- ---- -- ------ --
----- -------------------------- -----------
--- ------- --- ------ ------ -- -------- -- --- --
--------- --------------
--
------------------- - -
----- ---------
--------- -----
--
------ ------- -------然后，我们在 Storybook 中编写使用 Button 组件的示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- - ------ -------- --
------ ----- -------- - -- -- -
-------
----------- ---
----------- -- ------------- ----------
--
--
------ ----- ------------ - -- -- -
-------
-------------- -------
---------------
--
--
------ ----- -------- - -- -- -
-------
------------ -------
-------------
--
--现在，我们可以打开 Storybook 并访问所编写的示例。当我们点击 Properties 选项卡时，我们可以看到所有我们为组件定义的属性和默认值。
我们可以通过单击属性的值来更改属性的值。当您更改属性值时，按钮将会重新渲染以反映更新后的属性值。
高级特性
我们已经了解了如何使用 @nlabs/storybook-addon-options 插件来更改属性的值。但是，这个插件还有很多高级特性，可以帮助您更快、更方便地使用 Storybook。下面是一些更高级的特性示例。
配置组件库名称和网站链接
您可以在插件中设置您的组件库名称和网站链接，这将会自动添加到 Storybook 的顶部导航栏中。
addDecorator(withOptions({
name: 'Your component library name',
url: 'https://your-company.com',
addonPanelInRight: true
}));隐藏属性
您可以使用 hidden 属性将某些属性隐藏在属性面板上。这对于当您需要隐藏一些不需要让 UI 人员看到的属性时非常有用。
Button.propTypes = {
text: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
type: PropTypes.oneOf(['button', 'submit']),
disabled: PropTypes.bool,
/** @ignore */
hiddenProp: PropTypes.bool,
};搜索和筛选属性
当您有很多属性时，您可能需要搜索或筛选属性。@nlabs/storybook-addon-options 插件可以帮助您轻松完成这项工作。
addDecorator(withOptions({
showSearchBox: true,
showAddonPanel: true,
addonPanelInRight: true,
selectedAddonPanel: 'storybooks/storybook-addon-options/options-panel'
}));可配置区域
如果您正在支持多个语言，并且需要在 Storybook 中显示不同的语言属性（例如中文），则可以使用本地化功能。
Button.propTypes = {
text: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
type: PropTypes.oneOf(['button', 'submit']),
disabled: PropTypes.bool,
/** 中文属性 */
chineseProp: PropTypes.string,
};addDecorator(withOptions({
localization: {
formatValue: (value) => `"${value}"`, // Add quotes around string values
separator: ' / ',
locale: 'zh-CN'
}
}));使用插件主题
您可以使用插件主题来显示您的属性面板。只需使用一个其他的主题包即可：
npm install --save-dev storybook-addon-theme
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------ - --------- - ---- ------------------------
------------------------
----- -------- -- --- --- ------- -----
------- -
- ----- -------- ------ ---------- ------ ------------- --
- ----- ------- ------ ---------- ------ ------------ --
-
----结论
在这篇文章中，我们介绍了 @nlabs/storybook-addon-options 的基本内容，并通过示例演示了如何使用它来帮助您更快、更方便地使用 Storybook。我们还介绍了一些高级特性，例如隐藏属性和区域配置。希望这篇文章可以帮助您充分利用 Storybook，并改进您的前端工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e67dc