Giter VIP home page Giter VIP logo

bigbear-ui's Introduction

bigbear-ui

bigbear-ui是个人制作的拟物化小型轻量级ui库

npm npm bundle size npm Build Status Coverage Status

✨ 特性

  • 📕 详细的文档与介绍
  • 🎨 使用富有特色的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/#/


制作初衷

制作一个属于自己的组件库应该是每个前端人员都有的梦想,有时候自己写出某些好的组件也想记录下来。


设计理念

新拟物风格早就存在,但是这种风格受限性很强,特别是对于背景色的要求,因为只有通过背景色制造的高光和加深才能制作出完美的凸起和凹下。

最初想法可能是做个浅色的风格和一个深色的风格,但是后来觉得,这样定制化过强,大部分时候,场景都是比较复杂的,也并不需要特别完美的定制效果,于是我将阴影效果进行改造,做出个比较通用的效果。

这种风格最适合做小工具,同时组件库体积又小,避免占太多空间。

bigbear-ui's People

Contributors

code-factor avatar yehuozhili avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.