ui neumorphism скачать - загрузка исходного кода ui neumorphism

ui neumorphism

Данные веб-сайта

v1.1.3

Скачать

ui-neumorphism

Библиотека компонентов реагирует, разработанную на «Новом скеуморфизме» или «Нейморфизм» UI/UX.

Все компоненты спроектированы в соответствии с тенденцией Neumorphic Design.

Библиотека имеет более 50 отдельных компонентов.

Демо

Просмотреть примеры здесь.

Документация

Каждый компонент и его API хорошо задокументированы, с различными примерами вместе с их кодом и предварительным просмотром.

Проверьте документацию здесь.

Установить

npm install --save ui-neumorphism

Использование

 import React , { Component } from 'react'

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

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

Тематическое

В пользовательском интерфейсе neumorphism тематическая тема мертва. Это достигается с использованием и изменением переменных корневых CSS для цветов.

Чтобы изменить тему, вы изменяете переменные корневого CSS напрямую или с помощью функции overrideThemeVariables() , как это.

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

  ...
}