ดาวน์โหลด ui neumorphism - ui neumorphism Source Source Download

ui neumorphism

ข้อมูลเว็บไซต์

v1.1.3

ดาวน์โหลด

Ui-neumorphism

REACE COMPONENT LIBRARY ที่ออกแบบมาจาก "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 UI การจัดเรียงเป็นเรื่องง่าย มันทำได้โดยการใช้และแก้ไขตัวแปรรูท CSS สำหรับสี

ในการเปลี่ยนธีมคุณจะปรับเปลี่ยนตัวแปร Root 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'
    } )
  }

  ...
}