# @ergosign/storybook-addon-pseudo-states-react 中文文档 规范地址：https://npmcn.com/package/%40ergosign/storybook-addon-pseudo-states-react/ 版本：0\.0\.1-alpha\.61 npm 元数据更新时间：2023-07-25T11:18:45.752Z 中文译文更新时间：2026-11-13T20:49:49.993Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ergosign/storybook-addon-pseudo-states-react 原文对照：https://npmcn.com/package/%40ergosign/storybook-addon-pseudo-states-react/?lang=original 项目主页：https://github.com/Ergosign/storybook-addon-pseudo-states#readme 源码仓库：https://github.com/Ergosign/storybook-addon-pseudo-states ## 关键信息（来自 npm 元数据） - 包体积（解压后）：92.6 kB，47 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：@storybook/addons \>=5\.3\.8，@storybook/api \>=5\.3\.8，@storybook/components \>=5\.3\.8，@storybook/core-events \>=5\.3\.8，@storybook/node-logger \>=5\.3\.8，react \>=16\.12\.0 - 首次发布：2020-03-12T16:31:48.176Z - 最新版本发布：2023-07-25T11:18:45.432Z - 近 30 天下载量：12602（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：36（近 12 个月 0 个） ## 中文简介 故事书装饰器可以自动生成和显示组件的CSS伪态. ## 安装 ```sh npm install @ergosign/storybook-addon-pseudo-states-react ``` 也可以使用：`pnpm add @ergosign/storybook-addon-pseudo-states-react`、`yarn add @ergosign/storybook-addon-pseudo-states-react`、`bun add @ergosign/storybook-addon-pseudo-states-react` ## README # 故事手册 Addon Pseudo州 Storybook Addon Pseudo States允许您在 Storybook的预览区域中自动显示一个组件的伪状态(和属性状态). - [现场直播](https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/) - [实例Repo( CRA)](https://github.com/philippone/create-react-app-storybook-addon-pseuo-states) ![example](https://npmcn.com/package/addon-example.png) ## 框架支助 | 框架 | 显示国家 | 显示/隐藏的工具按钮 | | --- | :-: | :-: | | 角质 | \+ 键 | \+ 键 | | 反应 | \+ 键 | \+ 键 | | 升 | \+ 键 | \+ 键 | | HTML 语言 | \+ 键 | \+ 键 | | 阴道 | \+ 键 | \+ 键 | ## 开始 首先,您需要将 Pseudo 状态安装到您的项目中, 作为 dev 依赖 . ```sh npm install @ergosign/storybook-addon-pseudo-states-react --save-dev ``` 使用时 _创建- 反应- 应用程序_ 和相关预设,将其配置为附加 用于您的故事书环境(位于故事书配置目录中). 版本 < 5.3.x 导入您的加词 _附加说明.js_ 文件 : ```js import "@ergosign/storybook-addon-pseudo-states-react/preset-postcss"; ``` \>= 5.3.x版本 把它加进 _加词_ 区域 _主语.js_ 文档. ```js module.exports = { "addons": [ '@ergosign/storybook-addon-pseudo-states-react/preset-postcss' ] } ``` 如果您有其它项目配置, 请检查 [高级设置](https://npmcn.com/package/%40ergosign/storybook-addon-pseudo-states-react/#readme-advanced-settup) ,以查看如何使其在不同的设置下工作. 看用假加子需要什么,看看那个 [使用量](https://npmcn.com/package/%40ergosign/storybook-addon-pseudo-states-react/#readme-usage) 节. ### 高级设置 #### 带有 PostCSS 预设 > 这个项目是附属于 [邮递级](https://github.com/giuseppeg/postcss-pseudo-classes) 软件包. 不幸的是,最新版本只是被贴上标签而没有发布. 我们提供 _预设员额_ 添加的预设 [邮箱装入器](https://github.com/postcss/postcss-loader) 到故事书的自定义网络包配置. 将此预设添加到您的配置( 位于 Storybook 配置目录中) 版本 < 5.3.x 导入您的加词 _附加说明.js_ 文件 : ```js import "@ergosign/storybook-addon-pseudo-states-react/preset-postcss"; ``` \>= 5.3.x版本 把它加进 _加词_ 区域 _主语.js_ 文档. ```js module.exports = { "addons": [ '@ergosign/storybook-addon-pseudo-states-react/preset-postcss' ] } ``` 这为每个 Cs 伪类创造了等同的普通 Cs 类( 例如) `:hover` 改为 `\:hover`),这样 您可以在元素的类属性中使用它 (`
Element in hover state
`) (中文(简体) ). 您可以修改 ass 加载器选项( 请参见类型定义 ) [预选方案](https://npmcn.com/package/%40ergosign/share/preset-utils.ts): ```js module.exports = { presets: [ { name:"@ergosign/storybook-addon-pseudo-states-react/preset-postcss", options: { rules: [/\.scss$|\.sass$/, ".sass", ...], cssLoaderOptions: CssLoaderOptions, postCssLoaderPseudoClassesPluginOptions: { prefix: 'pseudo-states--', // default for angular blacklist: [':nth-child', ':nth-of-type'] } } } ] } ``` 如果您设置了另一个前缀, 您也必须为加通设置相同的前缀 . 因此,请在下表中添加以下内容: `.storybook/preview.js`数字 : ```js addParameters({ withPseudo: { prefix: "still-pseudo-states--", }, }); ``` #### 拥有 Webpack 配置( 但随 PostCs 自动生成) 当您已经配置了自己的网页包配置, 但仍想要使用此附加 加上 PostCSS, 添加 [邮箱装入器](https://github.com/postcss/postcss-loader) 给您 网络包配置. > **注意事项**数字 : 当使用 CSS- Modules 时, 你必须小心不要 `[hash]` 用作 _本地标识Name_ 在你身边 _装弹机_ 选项. ```js module.exports = { module: { rules: [ { test: /\.(scss|css)$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { // ATTENTION when using css modules modules: { // !!! must not use [hash]' localIdentName: '[path][name]__[local]', }, }, }, // Add loader here { loader: 'postcss-loader', }, { loader: 'sass-loader', }, ], }, ], }, }; ``` 值得一提的是,您必须启用 Postcs-peudo 类模块 `postcss.config.js` ```js module.exports = { plugins: { 'postcss-pseudo-classes': { // prefix: 'pseudoclass--', }, }, }; ``` 当使用自定义的“ 前缀” 参数时, Postcs- pseudo- class 使用同样的参数 ```js module.exports = { plugins: { 'postcss-pseudo-classes': { prefix: 'pseudoclass-example-prefix', }, }, }; ``` #### 手动 当您不想为您创建假课时,您可以提供 您自己的规则, 插件用于您的 css 类. 默认情况下,加词中用于查找 cs 类的前缀是 `\:`。 。 。 . 要添加所需的样式, 您必须添加包含 `prefix` + 键 `pseudostate` 一个人. 例如: 当你想要时 _盘旋_ 财务报告和审定财务报表 _焦点_ 状态由插件显示,您 必须添加 `\:hover` 财务报告和审定财务报表 `\:focus` 自己来上课. 对于默认的前缀, 这可能看起来是这样 : ```scss .element { //element styling &:hover, &\:hover { // hover styling } } ``` 带有自定义前缀 如果你想指定自己的前缀,请设置为 _前缀_ 附加值中的值 _参数_ 对象. 将前缀更改为 `.pseudoclass--` 您必须像这样调整参数 : ```js // in your story parameters: { withPseudo: { selector: "element", prefix: "pseudoclass--" } } ``` 在样式定义中使用指定的前缀 : ```scss .element { //element styling &:hover, &.pseudoclass--hover { // hover styling } } ``` #### 带有 Elenti.js 的 Bail 插件 如果您使用 [情绪. js](https://emotion.sh/) 样式,您可能会考虑使用 [贝亚尔-插图-故事手册-addon-pseudo-states-emotion](https://www.npmjs.com/package/babel-plugin-storybook-addon-pseudo-states-emotion)这将为您的组件创建伪类. 以贝贝勒-插孔-故事书-addon-pseudo-states-emotion 这个贝贝勒插座就是为这个确切的用途而制造的. 有问题请看 [文档](https://github.com/dekk-app/babel-plugin-storybook-addon-pseudo-states-emotion) 或联系寄存器所有者. **配置 :** 请查看故事书中bail或webpack配置的选项 : 1. [https://storybook.js.org/docs/react/confect/babel (中文(简体) )](https://storybook.js.org/docs/react/configure/babel) 2. [https://storybook.js.org/docs/react/confect/webpack#exting-storybooks-webpack-config 互联网档案馆的存檔,存档日期2013-12-02](https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config) 以下是插件配置的例子. (请提及 [原始文件](https://github.com/dekk-app/babel-plugin-storybook-addon-pseudo-states-emotion)(中文(简体) ) **基本融合** ```json { "plugins": ["babel-plugin-storybook-addon-pseudo-states-emotion"] } ``` **添加附加件支持的自定义前缀** ```json { "plugins": [ [ "babel-plugin-storybook-addon-pseudo-states-emotion", {"prefix": "pseudoclass--" } ] ] } ``` ### 显示/ 隐藏工具栏按钮 您可以启用一个工具栏按钮来切换预览区域的 Pseudo 状态 . 见 [框架支助](https://npmcn.com/package/%40ergosign/storybook-addon-pseudo-states-react/#readme-framework-support) 哪个框架支持此特性. 启用按钮, 将它添加到您的附加配置文件( 位于 Storybook 配置目录中) 版本 < 5.3.x 导入您的加词 _附加说明.js_ 文件 : ```js import "@ergosign/storybook-addon-pseudo-states-react/register"; ``` \>= 5.3.x版本 把它加进 _加词_ 区域 _主语.js_ 文档. ```js module.exports = { "addons": [ '@ergosign/storybook-addon-pseudo-states-react/register' ] } ``` ### 使用量 > **警告**数字 : `withPseudo` 应始终是您 `decorators` 数组,因为它改变故事的模板. #### 常规 ##### 组件故事格式( CSF, 建议) ```js import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-react'; const section = { title: 'Button', decorators: [withPseudo], parameters: { withPseudo: { selector: 'button' }, }, }; export default section; export const Story = () => { return { component: ButtonComponent, }; }; ``` ##### 格式的故事 ```js import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-react'; storiesOf('Button', module) .addDecorator(withPseudo) .addParameters({ withPseudo: { selector: 'button', // css selector of pseudo state's host element pseudos: ['focus', 'hover', 'hover & focus', 'active'], attributes: ['disabled', 'readonly', 'error'], }, }) .add('Icon Button', () =>