react lite ui

Bereaksi lite ui

Satu set komponen bereaksi ringan, yang mudah disesuaikan dan dapat dibooting dalam proyek Anda.

Fitur Utama • Instalasi • Penggunaan • Dokumentasi • Demo

Fitur Utama:

• Elemen DOM apa pun dapat disesuaikan melalui file SASS sederhana. ?

• Anda dapat mengimpor komponen individual yang tidak mempengaruhi ukuran bundel aplikasi Anda. ?

• Desain bersih dengan implementasi minimal mengurangi kode yang dikirim ke aplikasi Anda dengan UI yang menyenangkan. ?

• Setiap komponen dibuat ringan - sekitar setengah ukuran komponen (dan bahkan lebih sedikit!) Dari perpustakaan populer lainnya. ?

? Instalasi:

 npm install --save react-lite-ui

Penggunaan :

Di App.js Anda:

 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' )
) ;

? Kustomisasi:

Mari kita ambil file App.js kami, dan tambahkan komponen kartu ke dalamnya:

 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' )
) ;

Buat file bernama 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 ;
}

Jangan khawatir jika ini tidak masuk akal bagi Anda. Untuk saat ini, kami akan menambahkan gaya ini dan melengkapi kabel gaya kami ke komponen kartu.

Sekarang, di file App.js kami, kami akan meneruskan prop theme ke komponen Card , seperti ini:

 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 >
        ) ;
      }
    }
    
 . . .

Jadi, mari kita lihat apa yang kami lakukan di sini:

• Kami mendefinisikan gaya kami sendiri yang ingin kami sesuaikan untuk komponen menggunakan card , cardHeader dan cardFooter .

• Kemudian kami meneruskan gaya ke komponen melalui prop theme yang diterapkan pada struktur komponen.

Gaya yang Anda lewati kemudian dikombinasikan dengan gaya default komponen untuk membuat komponen khusus Anda! Untuk info lebih lanjut tentang cara menyesuaikan dan berbagai alat peraga yang dapat Anda lewati ke komponen Anda, silakan kunjungi halaman dokumentasi.

Hanya itu yang perlu Anda lakukan! Dan inilah komponen kartu khusus kami:

Cukup mudah, bukan? Ingin mencoba lebih banyak komponen?

Cukup kunjungi halaman taman bermain kami untuk mencoba komponen sebelum menggunakan dan bersenang -senang bermain dengan mereka!

Berkontribusi:

Jika Anda ingin berkontribusi, silakan lihat pedoman kontribusi kami dan angkat PR! Kami akan menyukai kontribusi!

Jika Anda menemukan masalah atau memiliki pertanyaan, buka masalah di sini dan kami akan senang membantu Anda dan terus meningkatkan perpustakaan ini! ?

Terima kasih!

Kontributor: