react lite ui 다운로드 react lite ui 소스 코드 다운로드

react lite ui

타사 구성 요소

v1.0.1

다운로드

리이트 UI를 반응합니다

가벼운 무게 반응 구성 요소 세트는 쉽게 사용자 정의 할 수 있고 프로젝트에서 부트 스트랩 될 수 있습니다.

주요 기능 • 설치 • 사용법 • 문서 • 데모

주요 기능 :

모든 DOM 요소는 간단한 SASS 파일을 통해 사용자 정의 할 수 있습니다. ?
앱의 번들 크기에 영향을 미치지 않는 개별 구성 요소를 가져올 수 있습니다. ?
최소한의 구현으로 클린 디자인은 Pleasant 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 소품을 다음과 같이 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 >
        ) ;
      }
    }
    
 . . .