@fish-kit/fish

An enterprise-class UI design language and React components implementation

Usage no npm install needed!

<script type="module">
  import fishKitFish from 'https://cdn.skypack.dev/@fish-kit/fish';
</script>

README


order: -2 title: Fish of React

+

浏览器支持

兼容 IE9+浏览器,兼容相关细节参见:兼容须知

安装

使用 npm 安装

我们推荐使用 npm 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

$ npm install @sdp.nd/fish --save

如果你未配置内网镜像,推荐执行如下命令进行配置:

$ npm config set registry="http://registry.npm.sdp.nd/"

建议为@sdp.nd/fish 配置别名 fish, 下面的描述中,都以配置了别名为例

浏览器引入

在浏览器中使用 scriptlink 标签直接引入文件,并使用全局变量 fish

我们在 npm 发布包内的 fish/dist 目录下提供了 fish.js fish.css 以及 fish.min.js fish.min.css

强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。

示例

import { DatePicker } from 'fish';
ReactDOM.render(<DatePicker />, mountNode);

未使用按需加载,需要引入如下样式:

import 'fish/dist/fish.min.css';

按需加载

下面两种方式都可以只加载用到的组件。

  • 使用 babel-plugin-import(推荐)。

    统一使用别名:from 'fish'(禁止混合使用fish和@sdp.nd/fish,否则会整包引入fish所有组件)
     // .babelrc or babel-loader option
     {
       "plugins": [
         ["import", {"libraryName": "fish", "libraryDirectory": "lib", "style": true}] // `style: true` 会加载 less 文件
       ]
     }
    

    然后只需从 fish 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。

    // babel-plugin-import 会帮助你加载 JS 和 CSS
    import { DatePicker } from 'fish';
    
  • 手动引入

    import DatePicker from 'fish/lib/date-picker'; // 加载 JS
    import 'fish/lib/date-picker/style'; // 加载 LESS
    

自定义 fish 样式

fish 的样式满足不了业务需求的时候,需要覆盖样式时,可以采用如下两个方案。

方案一

  1. 项目增加 less 变量文件,参见脚手架 less 文件
  2. 修改 style-loader,参见脚手架构建代码

方案二

  1. html 入口文件最外层增加 id
  2. style 采用如下方式提升优先级,增加权重:
#app {
  .fish-row {
    margin-left: 10px;
  }
}