Download de react lite ui - react lite ui código fonte

react lite ui

Componentes de terceiros

v1.0.1

Baixar

Reaja Lite Ui

Um conjunto de componentes de reação leve, que são facilmente personalizáveis e podem ser inicializados em seu projeto.

Principais recursos • Instalação • Uso • Documentação • Demonstração

Principais recursos:

Qualquer elemento DOM pode ser personalizado através de um arquivo SASS simples. ?
Você pode importar componentes individuais que não afetam o tamanho do pacote do seu aplicativo. ?
Design limpo com implementação mínima, reduzindo o código enviado para o seu aplicativo com interface do usuário agradável. ?
Cada componente é feito leve - cerca de metade do tamanho dos componentes (e ainda menos!) De outras bibliotecas populares. ?

? Instalação:

 npm install --save react-lite-ui

Uso:

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

? Personalização:

Vamos pegar nosso arquivo App.js e adicionar um componente de cartão:

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

Crie um arquivo chamado 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 ;
}

Não se preocupe se isso não fizer sentido para você. Por enquanto, adicionaremos esses estilos e completaremos a fiação de nossos estilos ao componente do cartão.

Agora, em nosso arquivo App.js passaremos um suporte theme para o componente Card , como este:

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

Então, vamos dar uma olhada no que fizemos aqui:

Definimos nossos próprios estilos que queríamos personalizar para o componente usando as classes card , cardHeader e cardFooter .
Em seguida, passamos os estilos para o componente através do suporte theme que é aplicado à estrutura do componente.

Os estilos que você passou são então combinados com os estilos padrão do componente para renderizar seu componente personalizado! Para obter mais informações sobre como personalizar e vários adereços que você pode passar para seus componentes, visite a página de documentação.

É tudo o que você precisa fazer! E aqui está o nosso componente de cartão personalizado:

Muito fácil, certo? Quer experimentar mais componentes?

Basta visitar nossa página de playground para experimentar os componentes antes de usar e se divertir brincando com eles!