@eugle/oneui

A simple based on the react and styled-components senior style ui library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@eugle/oneui
000.3.78 months ago3 years agoMinified + gzip package size for @eugle/oneui in KB

Readme

NPM version
Basic UI
One UI is a fully customized front-end UI library based on the Styled-Components framework and React component thinking. Use Flex layout and CSS3 style to write specifications.
Feature
With One UI, you can build any front-end UI interface you want. Flexible, customize any of your UI interface. Follow the All in js idea, let CSS styles pass parameters like React components, and compile front-end CSS styles through Styled-Components. One UI has now released the official version, but you can still fix some problems in complex usage scenarios through pull request.
Why?
Why invented One UI? Alright... (note, this part contains some of my personal opinions!) Before inventing One UI, I tried many different front-end UI libraries. I found that although they are basically no problem when writing simple examples, once you want to build some complex and beautiful pages with a high degree of freedom, you will find some deep-seated problems. For example, the UI library hard-codes the document structure specification , Difficult to customize. Similar layout structures can be used out of the box, but in many cases you can't customize them for personal needs.
Principle
One UI tries to solve the problem of arbitrary customization through some principles:
  • Based on Styled-Components. Use Styled-Components consistent construction method to compile CSS styles
  • Flex Box layout mode
  • Flexible native HTML tag switching. Reconstruct native HTML tags such as div to Div, React components starting with capital letters
  • When you don’t want to use One UI, you can use native tags directly
  • Concise parameter transfer. Reduce the native CSS style to one letter as much as possible
  • Usage
    use npm
    npm i -s @eugle/oneui
    use yarn
    yarn add @eugle/oneui
    ES6
    import {Div} from '@eugle/oneui'
    API
    GlobalColor
    Customize the default color
    GlobalColor({  
    	primary: '#35b8e0',  
    	primaryRGB: '53,184,224',  
    	primaryG: '#0081ee',  
    	success: '#10c469',  
    	successRGB: '16,196,105',  
    	successG: '#009f5a',   
    	danger: '#ff5b5b',  
    	dangerRGB: '255,93,93',
    	dangerG: '#e02e2e',
    	warning: '#f9c851',
    	warningRGB: '249,200,81',
    	warningG: '#ff8a00',
    	info: '#002fa7',
    	infoRGB: '0,47,167',
    	infoG: '#002687',
    }); 

    RGB at the end represents the format of '255,255,255' for transparency G at the end is used to set the color at the end of the gradient
    Reference
    Styled-Components. Official document
    HTML5. Guide
    CSS3. Guide
    JavaScript. Web development technology
    React. Official document
    If this is not enough, you can also read the heavily annotated source code of One UI at any time.
    Contribution
    Contributions in all forms are welcome!