cuke-ui / Cuke Ui
Licence: mit
🥒 黄瓜ui:一个即插即用的React UI 库
Stars: ✭ 402
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Cuke Ui
elements
Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
Stars: ✭ 42 (-89.55%)
Mutual labels: components, storybook
React Storybook Addon Chapters
📒 Showcase multiple React components within a story
Stars: ✭ 149 (-62.94%)
Mutual labels: components, storybook
Wp Storybook
📔 Storybook for WordPress Reusable React Components
Stars: ✭ 95 (-76.37%)
Mutual labels: components, storybook
Componentdriven.org
Static site and content for Component Driven
Stars: ✭ 237 (-41.04%)
Mutual labels: components, storybook
storybook-talk
Storybook, the playground you need for your UI components! 🎨
Stars: ✭ 11 (-97.26%)
Mutual labels: components, storybook
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+16677.36%)
Mutual labels: components, storybook
components
Reusable React components used by HospitalRun
Stars: ✭ 109 (-72.89%)
Mutual labels: components, storybook
Story2sketch
Convert Storybook into Sketch symbols 💎
Stars: ✭ 391 (-2.74%)
Mutual labels: components, storybook
Handycontrols
Contains some simple and commonly used WPF controls based on HandyControl
Stars: ✭ 347 (-13.68%)
Mutual labels: components
Windmill React Ui
🧩 The component library for fast and accessible development of gorgeous interfaces.
Stars: ✭ 373 (-7.21%)
Mutual labels: components
Open Sauced
🍕 This is a project to identify your next open source contribution.
Stars: ✭ 352 (-12.44%)
Mutual labels: storybook
Figma Html
Convert Figma designs to HTML, React, Vue, Angular, and more!
Stars: ✭ 382 (-4.98%)
Mutual labels: storybook
Shards Vue
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
Stars: ✭ 390 (-2.99%)
Mutual labels: components
Malvid
UI to help you build and document web components.
Stars: ✭ 347 (-13.68%)
Mutual labels: components
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (-14.18%)
Mutual labels: components
Stackoverflow Clone
This project is a simplified a full stack clone of Stackoverflow.
Stars: ✭ 395 (-1.74%)
Mutual labels: storybook
Mosaic
🎨 A front-end JavaScript library for building user interfaces!
Stars: ✭ 390 (-2.99%)
Mutual labels: components
cuke-ui
黄瓜 UI : 一个即插即用的 React UI 库
🎸 名字由来
cuke(黄瓜), 常见的一种蔬菜, 希望这个项目也成为常见的一个依赖(虽然这是不可能的), 其中黄瓜也符合 这个组件库的 宗旨 : 即插即用 其次 cuke 谐音 (cool ke) 很酷的李金珂的 意思 主题色 采用 黄瓜绿, 清新又可爱, 组件借鉴(抄袭)了 有牌面的 Ant Design, 抱着学习的目的,开发了这个组件库
🤘 在线演示
https://cuke-ui.github.io/cuke-ui/
⚡️ 安装
使用 npm
npm i cuke-ui --save
使用 yarn
yarn add cuke-ui
使用 cdn
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/cuke-ui.min.css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/cuke-ui.min.js"></script>
📖 如何使用
- 全部引入
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';
// .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'],
]
}
📝 更新日志
💖 感谢
😒 设计规范
高仿 Ant-Design
👯 谁在使用
- 勇敢的人
- 我自己
- 李金珂的小屋
📦 参考轮子
🔧 本地开发
请首先安装 npm i -g yarn
- 安装依赖
如果无法科学上网 可 使用 淘宝镜像 yarn config set registry https://registry.npm.taobao.org
git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn
- 启动开发服务器
基于 storybook 什么是storybook?
yarn dev
-
开发组件
参考
components/button
在 components
新建一个组件(组件名与文件名对应) 以 button
组件目录结构为例
- components
- button //组件文件夹
-
__tests__
//单元测试-
__snapshots__
// ui 快照 -
index.test.js
//测试文件
-
-
index.js
//组件逻辑 -style.js
// 按需加载需要用到 -
styles.less
//组件样式
-
- button //组件文件夹
然后 在 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].