Skip to content
🥒 黄瓜ui:一个即插即用的React UI 库
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook fix: removed repeated imports from package.json Mar 28, 2019
components fix(drawer): 修复Drawer 组件 box-shadow 丢失的问题 Jun 3, 2019
scripts chore(core): es 和 lib 增加 css 文件 Jan 8, 2019
stories fix(modal): 优化弹框内容超长时不能滚动的 Bug May 31, 2019
tests feat: 新增 Card 组件 Dec 1, 2018
.babelrc.js chore(build): 优化打包输出, 增加 es 模块 Jan 8, 2019
.editorconfig [Cara][Update]: format doc & tab change to space & add no-console eslint Oct 26, 2018
.eslintignore
.eslintrc.js chore(test): 优化测试 Jan 14, 2019
.gitignore chore(build): 优化打包输出, 增加 es 模块 Jan 8, 2019
.npmignore
.stylelintrc feat:增加Affix 组件,fix:修复Alert 组件对齐问题, 修复stylelint Sep 5, 2018
.travis.yml chore(test): 优化测试 Jan 14, 2019
CHANGELOG.md chore: changelog Jun 3, 2019
LICENSE chore(Copyright): 2018 => 2019 Jan 4, 2019
README.md docs: 更新按需引入文档 May 28, 2019
jest.config.js fix(table): 增加 rowSelection.getCheckboxProps 属性 Feb 7, 2019
package.json chore(release): 1.10.3 Jun 3, 2019
postcss.config.js docs: 更新文档 Nov 16, 2018
yarn.lock chore: upgrade yarn.lock Jun 3, 2019

README.md

cuke-ui

黄瓜 UI : 一个即插即用的 React UI 库

npm npm version

travis Coverage Status

🎸 名字由来

cuke(黄瓜), 常见的一种蔬菜, 希望这个项目也成为常见的一个依赖(虽然这是不可能的), 其中黄瓜也符合 这个组件库的 宗旨 : 即插即用 其次 cuke 谐音 (cool ke) 很酷的李金珂的 意思 主题色 采用 黄瓜绿, 清新又可爱, 组件借鉴(抄袭)了 有牌面的 Ant Design, 抱着学习的目的,开发了这个组件库

🤘 在线演示

https://cuke-ui.github.io/cuke-ui/

Edit nn6yr2m94

⚡️ 安装

使用 npm

npm i cuke-ui --save

使用 yarn

yarn add cuke-ui

使用 cdn

<link rel="stylesheet" href="https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.css">
<script type="text/javascript" src="https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.js"></script>

📖 如何使用

  1. 全部引入
import React from "react"
import { Button } from "cuke-ui"
import "cuke-ui/dist/cuke-ui.min.css"

class Page extends React.Component {
  render(){
    return (
      <Button type="primary">黄瓜ui</Button>
    )
 }
}

2 .按需引入

import Button from 'cuke-ui/lib/button';
import 'cuke-ui/lib/button/style';
  1. 使用 babel-plugin-import
// .babelrc.js
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "cuke-ui",
      "libraryDirectory": "es",
      "style": true
    },'cuke-ui'], 
  ]
}

// 多个组件库
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "cuke-ui",
      "libraryDirectory": "es",
      "style": true
    },'cuke-ui'], 
    
    ["babel-plugin-import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    },'antd'], 
  ]
}

📝 更新日志

CHANGELOG

💖 感谢

😒 设计规范

高仿 Ant-Design

👯 谁在使用

📦 参考轮子

🔧 本地开发

请首先安装 npm i -g yarn

  1. 安装依赖

如果无法科学上网 可 使用 淘宝镜像 yarn config set registry https://registry.npm.taobao.org

git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn
  1. 启动开发服务器

基于 storybook 什么是storybook?

yarn dev
  1. 访问 http://localhost:8080

  2. 开发组件

参考 components/button

components 新建一个组件(组件名与文件名对应) 以 button 组件目录结构为例

  • components
    • button //组件文件夹
      • __tests__ //单元测试
        • __snapshots__ // ui 快照
        • index.test.js //测试文件
      • index.js //组件逻辑 - style.js // 按需加载需要用到
      • styles.less //组件样式

然后 在 stories 目录下 新建一个 button.js

  • stories
    • button.js // storybook 的文档文件
//button.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/button';          //引入你的组件
import { withInfo } from '@storybook/addon-info';

storiesOf('示例标题', module)
 .add('Button 按钮', withInfo()(() => (         // 添加到页面上
   <Button type="primary">获取文字</Button>   // 这里写jsx
 )))

最后 将 写好的 storybook 文件 添加到 配置里面

.storybook > config.js

import { configure } from '@storybook/react';
function loadStories() {
  require('../stories/button');     //刚才写好的文件
}

configure(loadStories, module);

这样就完成了 storybook 会将你写好的组件 添加到页面上, 并且会自动生成说明文档 (其实本质上就是一个 webpack 的 dev-server)

最后的最后, 在 components/index.js 导出组件,以便于发布

export { default as Button } from "./button";

📄 License

MIT

You can’t perform that action at this time.