什么是 @storybook/addon-centered?
@storybook/addon-centered 是一个应用在 Storybook 中的 addon,它可以让你很方便的展示你的组件,并使其居中显示。
开始使用 @storybook/addon-centered
我们首先需要确保一个准备好的 React 项目,然后依次执行以下命令:
- 首先,我们需要安装 Storybook:
--- ------- -- --------------
- 然后,我们需要将 Storybook 添加到我们的项目中:
------------
- 如果你还没使用
npm
初始化你的项目,则需要安装npm
:
--- ----
- 在你的项目中安装 @storybook/addon-centered:
--- ------- ---------- -------------------------
- 在
.storybook/config.js
文件中添加如下内容:
------ - ---------- ------------ - ---- ------------------- ------ -------- ---- ---------------------------------- -- -- -------- ----------------------- -- --------- ------------ -- --------------------- --------
- 在您的组件故事中添加中心化参数:
---------------- ------------ ------- ----------------------- --------------- -- -- - -- --- ------- ---
示例代码
让我们来一个例子:
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ -------- ---- ---------------------------------- ------ ------ ---- ----------- ------------------- ------- ----------------------- ---------- ------ -- -- ------------- ---------------- ---------- ---- ------- -- -- - -------- ----- ---------- -------------- ------ -- -- -- ------- --------- ---
总结
@storybook/addon-centered
可以让您快速将组件居中,这对于开发测试非常有用。它易于安装和使用,并且可以与许多其他 Storybook addons 配合使用。希望这个教程可以帮助你更好地使用 Storybook 和 @storybook/addon-centered
。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/storybook-addon-centered