تنزيل ui neumorphism - تنزيل رمز المصدر ui neumorphism

ui neumorphism

بيانات الموقع

v1.1.3

تنزيل

Ui-Numorphism

مكتبة React Component التي تم تصميمها على "Skeuomorphism" أو "Neumorphism" UI/UX.

تم تصميم جميع المكونات وفقًا لاتجاه التصميم neumorphic.

تتميز المكتبة بأكثر من 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'
    } )
  }

  ...
}