反应颜色
-
14个不同的拾取者 - Sketch,相片店,克罗姆,谷歌等等
-
让你自己去 - 利用构件组件制作自己的
叉子发展
这棵树被维持为现代化的分叉. 源版式、 npm 导出名称和面向代理人的常规记录如下: AGENTS.md不编辑已生成 es/ ; 使用来自 package.json。 。 。 .
兼容性注释 : 已公布的API在实用之处有意保持稳定,但存储器内部已经现代化。 特别是,运行时间 propTypes 因此 JavaScript 消费者应该依赖 Docs 和 TypeScript 输入而不是 prop-types 开发过程中的警告.
发展工作流程
现代化分支现在使用基于TypeScript的无害环境管理,用于软件包构建,用于测试,用于组件工作的Vitest,用于GitHub Pages文档网站的Vite site/。 。 。 .
| 命令 | 目的 |
|---|---|
npm run build | 建立已公布的无害环境管理产出 es/。 。 。 . |
npm run test:unit | 通过Vitest运行单元/UI测试套件. |
npm run test:site | 运行导航和共享颜色状态的专用站点交互测试. |
npm run test:esm-consumption | 建立包和烟检节点无害环境管理和捆绑消费路径. |
npm run test:watch | 以监视模式启动 Vitest . |
npm run eslint | 林特 src, (中文(简体) ), site, (中文(简体) ), scripts, (中文(简体) ), test,并用 ESLint 重播工具源. |
npm run storybook | 在端口启动故事本 6006。 。 。 . |
npm run build-storybook | 发送静态故事书网站 .out/。 。 。 . |
npm run site:dev | 启动 GitHub 页面文档站点 http://localhost:4173/。 。 。 . |
npm run site:build | 将 GitHub 页面文档站点构建为 site/dist/。 。 。 . |
npm run site:verify | 运行站点交互测试,构建Pages应用程序,并验证元数据/输出. |
npm run typecheck | 运行类型脚本检查 src, (中文(简体) ), site, (中文(简体) ), scripts,以及 test。 。 。 . |
已公布的成套文物仅限无害环境管理。 包裹暴露 main 财务报告和审定财务报表 module 通过 es/index.js 并显示根打字通过 index.d.ts。 。 。 .
包装互接符
包件只装有无害环境管理 main编号 :module 合同和合同 exports 绘制 root 条目和共同组件的映射。 生成的组件-当地CSS的文物按下列格式出版: es/components 并被需要的组件模块拉入.
- Bundlers 和 TypeScript 工具链应该使用根名导入, 如
import { SketchPicker } from '@antonlimar/react-color'。 。 。 . - 本地节点无害环境管理可以通过软件包解决根入
exports映射; 平原 节点执行仍需要CSS-意识加载器,因为取取取器组件模块会导入CSS副作用. - 常见JS
require('@antonlimar/react-color')财务报告和审定财务报表require('@antonlimar/react-color/lib/...')不再支持.
演示
安装和使用
npm install @antonlimar/react-color
包含组件
import { SketchPicker } from '@antonlimar/react-color';
function Component() {
return <SketchPicker />;
}
您可以导入 AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker GooglePicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker 页:1.
样式
现代化的分叉船组件范围CSS 自动带有每个组件的切入点,而不是依赖内置的默认拾取器UI reactcss 样式.
取根和共享原始进口包括它们需要的CSS.
所有公众选手都接受 className 在根节点上,并仍然支持 styles 运行时间内线覆盖的道具 。 他们现在也支持 theme, (中文(简体) ), classNames,以及用于样式的 CSS 自定义属性;新定制更可取 classNames, CSS 变量,并发布 rc-* BEM钩可能时.