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