@eugle/oneui

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

Usage no npm install needed!

<script type="module">
  import eugleOneui from 'https://cdn.skypack.dev/@eugle/oneui';
</script>

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!