ui neumorphism

Ui-Neumorphismus

React -Komponentenbibliothek, die auf dem UI/UX -Trend "neuer Skeuomorphismus" oder "Neumorphismus" entwickelt wurde.

Alle Komponenten sind nach dem neumorphen Konstruktionstrend ausgelegt.

Die Bibliothek verfügt über mehr als 50 einzelne Komponenten.

Demo

Beispiele hier anzeigen.

Dokumentation

Jede Komponente und ihre API sind gut dokumentiert, mit verschiedenen Beispielen zusammen mit ihrem Code und ihrer Vorschau.

Schauen Sie sich die Dokumentation hier an.

Installieren

npm install --save ui-neumorphism

Verwendung

 import React , { Component } from 'react'

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

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

Themen

In der UI von Neumorphism ist das Thema tot. Es wird durch Verwendung und Modifizierung von Root -CSS -Variablen für Farben erreicht.

Um das Thema zu ändern, ändern Sie die Stamm -CSS -Variablen direkt oder mit Hilfe der Funktion overrideThemeVariables() wie diese.

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

  ...
}

Hier --light-bg und --dark-bg sind CSS-Variablen, die spezifische Farbwerte enthalten.

Mit dieser Kraft von CSS -Variablen können Sie das App -Thema von überall in der gesamten Anwendung ändern.

Alle CSS -Variablendefinition ist in Root Tag von index.css vorhanden. Diese Variablen werden verwendet, um die Bibliothek zu thematisieren und sie zur Änderung zur Verfügung zu stellen.

Lizenz

MIT © Akaspanion