ui neumorphism下载 - ui neumorphism源代码下载

ui neumorphism

网站数据

v1.1.3

下载

UI神经病

反应组件库是在“新的skeuomormormormis”或“ neumormorlism” UI/UX趋势上设计的。

所有组件均根据新态设计趋势设计。

图书馆具有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 />
  }
}

主题

在Neumorthism UI中，主题很简单。它是通过使用和修改颜色的根CSS变量来完成的。

要更改主题，您可以直接或借助于overrideThemeVariables() root css变量或借助于这样的函数。

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

  ...
}