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

  ...
}