https://github.com/yehuozhili/bigbear-ui
Neumorphic component library for React 基于React制作的拟物风格组件库
https://github.com/yehuozhili/bigbear-ui
bigbear bigbear-ui neumorphic-ui neumorphism react react-ui
Last synced: 6 months ago
JSON representation
Neumorphic component library for React 基于React制作的拟物风格组件库
- Host: GitHub
- URL: https://github.com/yehuozhili/bigbear-ui
- Owner: yehuozhili
- Created: 2020-05-12T14:21:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T22:27:13.000Z (over 3 years ago)
- Last Synced: 2025-04-11T18:42:13.518Z (6 months ago)
- Topics: bigbear, bigbear-ui, neumorphic-ui, neumorphism, react, react-ui
- Language: TypeScript
- Homepage: https://yehuozhili.github.io/bigbear-ui/
- Size: 6.08 MB
- Stars: 40
- Watchers: 1
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# bigbear-ui
bigbear-ui是个人制作的拟物化小型轻量级ui库
[](https://travis-ci.com/yehuozhili/bigbear-ui)
[](https://coveralls.io/github/yehuozhili/bigbear-ui?branch=master)
✨ 特性
- 📕 详细的文档与介绍
- 🎨 使用富有特色的Neumorphism拟物化风格
- 📦 开箱即用的高质量 React 组件
- 🔥 使用 TypeScript 开发，提供完整的类型定义文件
## 安装
使用 npm 或 yarn 安装
```
$ npm install bigbear-ui --save
```
## 引入样式
```
import 'bigbear-ui/dist/index.css';
```
## 导入组件
```
import {componentName} from 'bigbear-ui';
```
## 在线文档
https://yehuozhili.github.io/bigbear-ui/
## 本地文档
下载代码，npm安装，使用`npm run storybook`即可获得本地文档。
```
git clone https://github.com/yehuozhili/bigbear-ui.git
npm install
npm run storybook
```
## 使用scss
scss放入bigbear-ui/dist/esm/styles/index.scss。
```
@import "bigbear-ui/dist/esm/styles/index.scss";
```
## 使用bigbear-ui-cli
目前暂时只制作了一个模板供下载。如果需要react-router+redux+thunk以及mock数据可以使用此模板快速开发。
https://www.npmjs.com/package/bigbear-ui-cli
```
npm i bigbear-ui-cli -g
```
## 项目demo
http://94.191.80.37:6698/#/
## 制作初衷
制作一个属于自己的组件库应该是每个前端人员都有的梦想，有时候自己写出某些好的组件也想记录下来。
## 设计理念
新拟物风格早就存在，但是这种风格受限性很强，特别是对于背景色的要求，因为只有通过背景色制造的高光和加深才能制作出完美的凸起和凹下。
最初想法可能是做个浅色的风格和一个深色的风格，但是后来觉得，这样定制化过强，大部分时候，场景都是比较复杂的，也并不需要特别完美的定制效果，于是我将阴影效果进行改造，做出个比较通用的效果。
这种风格最适合做小工具，同时组件库体积又小，避免占太多空间。