react lite ui

ตอบสนอง lite ui

ชุดของส่วนประกอบปฏิกิริยาน้ำหนักเบาซึ่งปรับแต่งได้ง่ายและสามารถบูตในโครงการของคุณได้

คุณสมบัติที่สำคัญ•การติดตั้ง•การใช้งาน•เอกสารประกอบ•การสาธิต

คุณสมบัติที่สำคัญ:

• องค์ประกอบ DOM ใด ๆ สามารถปรับแต่งได้ผ่านไฟล์ SASS อย่างง่าย -

• คุณสามารถนำเข้าส่วนประกอบแต่ละตัวซึ่งไม่ส่งผลกระทบต่อขนาดชุดของแอพของคุณ -

• การออกแบบที่สะอาดด้วยการใช้งานน้อยที่สุดลดรหัสที่ส่งไปยังแอพของคุณด้วย UI ที่น่าพอใจ -

• แต่ละองค์ประกอบทำน้ำหนักเบา - ประมาณครึ่งหนึ่งของส่วนประกอบ (และแม้แต่น้อย!) จากห้องสมุดยอดนิยมอื่น ๆ -

- การติดตั้ง:

 npm install --save react-lite-ui

การใช้งาน:

ใน App.js ของคุณ:

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;

class App extends React . Component {
      render ( ) {
        return (
          < Card
            header = "Card header"
          >
            Card content
          </ Card >
        ) ;
      }
    }

ReactDOM . render (
    < App /> ,
    document . getElementById ( 'root' )
) ;

- การปรับแต่ง:

ลองใช้ไฟล์ App.js ของเราและเพิ่มส่วนประกอบการ์ดลงไป:

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;

class App extends React . Component {
      render ( ) {
        return (
          < Card
            header = "Am I Cute?"
            footer = {
              < Button href = "https://github.com/Codebrahma/react-lite-ui" type = "primary" bordered > view more </ Button >
            }
            elevation = "medium"
          >
            < div className = "col card-content" >
              < img src = "https://placeimg.com/300/300/animals" alt = "animals" />
            </ div >
          </ Card >
        ) ;
      }
    }

ReactDOM . render (
    < App /> ,
    document . getElementById ( 'root' )
) ;

สร้างไฟล์ชื่อ theme.scss :

:local( .card ) {
      z-index : 2 ;
      height : fit-content ;
      width : 100 % ;
      transition : margin 0.2 s ease-in-out ;
}
    
:local( .cardHeader ) {
      color : #0c549c ;
      text-align : center ;
}
    
:local( .cardFooter ) {
      justify-content : center ;
      align-self : baseline ;
}

ไม่ต้องกังวลหากสิ่งนี้ไม่สมเหตุสมผลสำหรับคุณ สำหรับตอนนี้เราจะเพิ่มสไตล์เหล่านี้และเดินสายสไตล์ของเราให้สมบูรณ์ในส่วนประกอบการ์ด

ตอนนี้ในไฟล์ App.js ของเราเราจะผ่านชุด theme prop ไปยังส่วนประกอบ Card เช่นนี้:

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;
import theme from 'theme.scss' ;  // Import the styles from theme.scss

class App extends React . Component {
      render ( ) {
        return (
          < Card
            theme = { theme }       // Pass the theme as a prop to the card component here.
            header = "Am I Cute?"
            footer = {
              < Button href = "https://github.com/Codebrahma/react-lite-ui" type = "primary" bordered > view more </ Button >
            }
            elevation = "medium"
          >
            < div className = "col card-content" >
              < img src = "https://placeimg.com/300/300/animals" alt = "animals" />
            </ div >
          </ Card >
        ) ;
      }
    }
    
 . . .

ลองมาดูสิ่งที่เราทำที่นี่:

• cardFooter กำหนดสไตล์ของเราเองซึ่งเราต้องการปรับแต่งสำหรับส่วนประกอบโดยใช้คลาส card และ cardHeader

• จากนั้นเราส่งสไตล์ไปยังส่วนประกอบผ่านชุด theme ที่นำไปใช้กับโครงสร้างของส่วนประกอบ

สไตล์ที่คุณผ่านจะถูกรวมเข้ากับรูปแบบเริ่มต้นของส่วนประกอบเพื่อแสดงส่วนประกอบที่คุณกำหนดเอง! สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการปรับแต่งและอุปกรณ์ประกอบฉากต่าง ๆ ที่คุณสามารถส่งผ่านไปยังส่วนประกอบของคุณได้โปรดไปที่หน้าเอกสาร

นั่นคือทั้งหมดที่คุณต้องทำ! และนี่คือองค์ประกอบการ์ดที่กำหนดเองของเรา:

ค่อนข้างง่ายใช่มั้ย ต้องการลองใช้ส่วนประกอบเพิ่มเติมหรือไม่?

เพียงไปที่หน้าสนามเด็กเล่นของเราเพื่อลองใช้ส่วนประกอบก่อนที่จะใช้และสนุกกับการเล่นกับพวกเขา!

มีส่วนร่วม:

หากคุณต้องการมีส่วนร่วมโปรดดูแนวทางการบริจาคของเราและเพิ่มการประชาสัมพันธ์! เราจะรักการมีส่วนร่วม!

หากคุณพบปัญหาหรือมีคำถามโปรดเปิดปัญหาที่นี่และเรายินดีที่จะช่วยคุณและปรับปรุงห้องสมุดนี้ต่อไป! -

ขอบคุณ!

ผู้มีส่วนร่วม: