ui neumorphism

ui-neumorphism

「New Skeuomorphism」または「Neumorphism」UI/UXトレンドで設計されたReactコンポーネントライブラリ。

すべてのコンポーネントは、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