ui neumorphism

Ui-neumorfismo

A biblioteca de componentes do React projetada na tendência da UI/UX do novo skeuomorfismo "ou" neumorfismo ".

Todos os componentes são projetados de acordo com a tendência do design neumórfico.

A biblioteca apresenta mais de 50 componentes individuais.

Demonstração

Ver exemplos aqui.

Documentação

Cada componente e sua API está bem documentada, com vários exemplos junto com seu código e visualização.

Confira a documentação aqui.

Instalar

npm install --save ui-neumorphism

Uso

 import React , { Component } from 'react'

import { Button } from 'ui-neumorphism'
import 'ui-neumorphism/dist/index.css'

class Example extends Component {
  render ( ) {
    return < Button />
  }
} 

Temas

Na interface do usuário do neumorfismo, o tema é morto simples. É realizado usando e modificando as variáveis ​​de CSS raiz para cores.

Para alterar o tema, você modifica as variáveis ​​ROOT CSS diretamente ou com a ajuda de função overrideThemeVariables() , assim.

 import React , { Component } from 'react'

import { overrideThemeVariables } from 'ui-neumorphism'
import 'ui-neumorphism/dist/index.css'

class App extends Component {
  componentDidMount ( ) {
    // takes an object of css variable key-value pairs
    overrideThemeVariables ( {
      '--light-bg' : '#E9B7B9' ,
      '--light-bg-dark-shadow' : '#ba9294' ,
      '--light-bg-light-shadow' : '#ffdcde' ,
      '--dark-bg' : '#292E35' ,
      '--dark-bg-dark-shadow' : '#21252a' ,
      '--dark-bg-light-shadow' : '#313740' ,
      '--primary' : '#8672FB' ,
      '--primary-dark' : '#4526f9' ,
      '--primary-light' : '#c7befd'
    } )
  }

  ...
}

Aqui --light-bg e --dark-bg são variáveis ​​CSS que contêm valores específicos de cor.

Usando esse poder das variáveis ​​CSS, você pode alterar o tema do aplicativo de qualquer lugar de todo o aplicativo.

Toda a definição da variável CSS está presente na etiqueta raiz do index.css. Essas variáveis ​​são usadas para tema a biblioteca e estão disponíveis para você modificar.

Licença

MIT © Akaspanion