NSFI / Ppfish Components
Licence: mit
Fish Design: 面向B端设计的企业级UI组件库
Stars: ✭ 163
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ppfish Components
Collectionviewslantedlayout
A CollectionView Layout displaying a slanted cells
Stars: ✭ 2,029 (+1144.79%)
Mutual labels: ui-design, ui-kit
Citrus.avalonia
Modern styles for Avalonia controls.
Stars: ✭ 161 (-1.23%)
Mutual labels: ui-design, ui-kit
Citrus.Avalonia
Modern styles for Avalonia controls.
Stars: ✭ 326 (+100%)
Mutual labels: ui-design, ui-kit
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+20197.55%)
Mutual labels: ui-design, ui-kit
Anchor-Bootstrap-UI-Kit
Anchor is a free Bootstrap UI Kit with flexible, ready to use UI components which will hep you build websites faster.
Stars: ✭ 69 (-57.67%)
Mutual labels: ui-design, ui-kit
Iview
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+14580.98%)
Mutual labels: ui-design, ui-kit
Viewui
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+1425.77%)
Mutual labels: ui-design, ui-kit
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-88.96%)
Mutual labels: ui-design, ui-kit
Ui Libraries
A collection of UI Frameworks and their platform implementations.
Stars: ✭ 769 (+371.78%)
Mutual labels: ui-design, ui-kit
Instagramactivityindicator
Activity Indicator similar to Instagram's.
Stars: ✭ 138 (-15.34%)
Mutual labels: ui-design, ui-kit
Metroset Ui
Windows Forms Metro Skin Style, Make The Applications With Metro Styles. see more https://n-a-r-w-i-n.github.io/MetroSet-UI/
Stars: ✭ 228 (+39.88%)
Mutual labels: ui-design, ui-kit
Css Mint
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
Stars: ✭ 209 (+28.22%)
Mutual labels: ui-design, ui-kit
My flutter challenges
Flutter project containing all my flutter UI challenges
Stars: ✭ 563 (+245.4%)
Mutual labels: ui-design, ui-kit
Vue Beauty
Beautiful UI components build with vue and ant design
Stars: ✭ 2,109 (+1193.87%)
Mutual labels: ui-design, ui-kit
Web Toolkit
A web UI framework based on GTK's Adwaita theme
Stars: ✭ 80 (-50.92%)
Mutual labels: ui-design, ui-kit
React Virgin
The react-native UI Kit you've been looking for.
Stars: ✭ 1,523 (+834.36%)
Mutual labels: ui-design, ui-kit
Fish Design
Introduction
Fish Design is an enterprise-class UI component library which based on React, helps designers and developers quickly build systems.
Features
- Babel with ES6
- Hot reloading
- Testing
- Linting
- Working example app
- Server side rendering
Browsers Support
- Modern browsers and Internet Explorer 11+
IE / Edge | Firefox | Chrome | Safari | Opera | Electron |
---|---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Initial Machine Setup
-
Install Node.js
-
(Optional)Install taobao NPM image
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Install
npm install ppfish --save
Usage
Browser
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'ppfish';
ReactDOM.render(
<Button type="primary">Primary</Button>, document.getElementById('app')
);
Node.js SSR
const { renderToString } = require('react-dom/server');
const Button = require('ppfish/node/components/Button');
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/') {
res.writeHead(200, {
'Content-Type': 'text/html'
});
const html = renderToString(<Button type="primary">Primary</Button>);
res.end(html);
}
}).listen(8080);
Development
Install npm(or cnpm) package
$ npm install
Start development in your default browser
$ npm start
Open your browser and visit http://127.0.0.1:5000
Build
Build scripts and css etc.
$ npm run build
Build site
$ npm run build:site
Links
The directory structure
.
├── /coverage/ # 运行npm run test:cover输出的测试覆盖率文件
├── /dist/ # 构建输出的文件,使用全局变量方式引用,可用于发布到CDN
├── /docs # 文档
├── /es/ # 构建输出的文件,使用ES Module规范引用,可用于tree shaking优化
├── /lib/ # 构建输出的文件,使用commonjs规范引用
├── /node/ # 构建输出的文件,适合node环境运行
├── /node_modules/ # 第三方类库和工具
├── /site/ # 页面入口文件
| ├── /assets # css、images等资源
| ├── /componentsPage # 组件库官网页面
| ├── /docs # 组件库官网文档
| ├── /locales # 组件库官网本地化文案
| ├── /pages # 组件库官网页面入口
| ├── /static # 组件库官网Demo使用的icon
| ├── /styles # 组件库官网页面样式
| ├── /index.html # 组件库官网html模板
| └── /index.js # 组件库官网入口文件
├── /source/ # 应用源码
│ ├── /assets/ # 可编译静态资源文件
│ ├── /components/ # React components
│ ├── /typings / # 常量配置文件
│ └── /utils/ # 工具函数
├── /tools/ # 项目运行脚本
├── .babelrc #
├── .editorconfig #
├── .eslintignore #
├── .eslintrc #
├── .gitignore #
├── .npmignore #
├── .stylelintignore #
├── .stylelintrc #
├── .travis.yml #
├── jets.config.js #
├── package.json #
├── postcss.config.js #
├── README.md #
├── tsconfig.json #
├── webpack.config.dev.site.js # 文档网站本地开发编译配置
├── webpack.config.prod.components.js # 组件源码生产环境编译配置
└── webpack.config.prod.site.js # 文档网站生产环境编译配置
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].