ui neumorphism

ui-neumorfismo

React Biblioteca de componentes diseñada en la tendencia de UI/UX "New Skeuomorfismo" o "Neumorfismo".

Todos los componentes están diseñados de acuerdo con la tendencia de diseño neumórfico.

La biblioteca presenta más de 50 componentes individuales.

Manifestación

Ver ejemplos aquí.

Documentación

Cada componente, y su API están bien documentados, con varios ejemplos junto con su código y vista previa.

Mira la documentación aquí.

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 />
  }
} 

Tema

En la interfaz de usuario de neumorfismo, el tema es completamente simple. Se logra utilizando y modificando las variables CSS raíz para colores.

Para cambiar el tema, modifica las variables de CSS raíz directamente o con la ayuda de la función overrideThemeVariables() , como esta.

 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'
    } )
  }

  ...
}

Aquí --light-bg y --dark-bg son variables CSS que contienen valores específicos de color.

Usando este poder de las variables CSS, puede cambiar el tema de la aplicación desde cualquier lugar de toda la aplicación.

Toda la definición de variable CSS está presente en la etiqueta raíz de index.css. Estas variables se utilizan para asumir la biblioteca y está disponible para que pueda modificar.

Licencia

MIT © Akaspanion