@pluralsight/ps-design-system-storybook-addon-center 是一个 Storybook 插件，可以帮助你在 Storybook 中轻松将组件居中。这个工具非常适用于开发者在开发过程中需要评估组件的布局与样式时。
安装
要使用 @pluralsight/ps-design-system-storybook-addon-center，需要先安装 Storybook。之后，在你的项目目录下，打开终端，输入以下命令来安装 @pluralsight/ps-design-system-storybook-addon-center：
npm install --save-dev @pluralsight/ps-design-system-storybook-addon-center
配置
一旦安装了 @pluralsight/ps-design-system-storybook-addon-center，你需要将它添加到 Storybook 的配置文件中。在 .storybook/main.js 中添加：
module.exports = {
stories: [
// ...
],
addons: [
'@pluralsight/ps-design-system-storybook-addon-center'
]
}此外，你还需要在你使用这个插件的任意组件的 .stories.js 文件中导入这个插件：
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------------------------------ ------ ------- - ------ --- ----------- -- ------- ----------- -------------- -
使用
使用本插件非常简单。在你的 Storybook 中，你可以找到一个新的 “CENTER” 标签页。通过点击它，选择你想要查看并居中的组件即可轻松将组件居中。
下面是一个例子：
-- -------------------- ---- ------- -- ----------------------- ------ ----- ---- ------- ------ ----------- ---- --------------- ------ ------- - ------ --- ----------- - ------ ----- ------- - -- -- ------------ --
页面中默认这个组件是在页面的左上角，不方便我们居中查看。然后，我们在这个文件中添加 centerAddon 插件：
import centerAddon from '@pluralsight/ps-design-system-storybook-addon-center'
export default {
title: 'My Component',
// 在这里添加插件
decorators: [centerAddon],
}接着，我们返回 Storybook，在 CENTER 标签页中可以看到如下的效果：
我们可以轻松地查看、评估这个组件在居中的情况下的布局和样式。这极大地提高了我们评估组件的效率和精度。
总结
@pluralsight/ps-design-system-storybook-addon-center 这个插件让我们能够轻松地将组件在 Storybook 中居中。非常适用于我们评估组件的布局和样式。 在我们的工作流程中，具有重要的地位和作用。希望这篇教程能帮助你使用本插件更加顺利，同时提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7940917116197505561b23