ui neumorphism

ui-oreumorphism

"새로운 skeuomorphism"또는 "neumorphism"ui/ux 트렌드에 설계된 반응 구성 요소 라이브러리.

모든 구성 요소는 Neumorphic Design Trend에 따라 설계되었습니다.

라이브러리에는 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 UI에서 테마는 단순합니다. 색상의 루트 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'
    } )
  }

  ...
}

여기에서 --light-bg 및 --dark-bg 특정 색상 값을 보유하는 CSS 변수입니다.

이 CSS 변수의 성능을 사용하면 전체 애플리케이션의 어느 곳에서나 앱 테마를 변경할 수 있습니다.

모든 CSS 변수 정의는 index.css의 루트 태그에 있습니다. 이 변수는 라이브러리를 테마로 사용하고 수정할 수있는 사용 가능합니다.

특허

MIT © Akaspanion