ui neumorphism

UI-neumorfisme

Perpustakaan Komponen Bereaksi yang dirancang pada tren "skeuomorfisme baru" atau "neumorfisme" UI/UX.

Semua komponen dirancang sesuai dengan tren desain neumorfik.

Fitur perpustakaan lebih dari 50 komponen individu.

Demo

Lihat contoh di sini.

Dokumentasi

Setiap komponen, dan API -nya didokumentasikan dengan baik, dengan berbagai contoh bersama dengan kode dan pratinjau mereka.

Lihat dokumentasi di sini.

Memasang

npm install --save ui-neumorphism

Penggunaan

 import React , { Component } from 'react'

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

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

Tema

Dalam UI Neumorfisme, Tema mati sederhana. Ini dicapai dengan menggunakan dan memodifikasi variabel CSS root untuk warna.

Untuk mengubah tema, Anda memodifikasi variabel CSS root secara langsung atau dengan bantuan fungsi overrideThemeVariables() , seperti ini.

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

  ...
}

Di sini --light-bg dan --dark-bg adalah variabel CSS yang memiliki nilai warna tertentu.

Dengan menggunakan kekuatan variabel CSS ini, Anda dapat mengubah tema aplikasi dari mana saja di seluruh aplikasi.

Semua definisi variabel CSS hadir dalam tag root index.css. Variabel -variabel ini digunakan untuk bertema perpustakaan dan tersedia untuk Anda modifikasi.

Lisensi

MIT © Akaspanion