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