react lite uiダウンロードreact lite uiソースコードダウンロード

react lite ui

サードパーティ製コンポーネント

v1.0.1

ダウンロード

React 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プロップを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 >
        ) ;
      }
    }
    
 . . .