react lite ui

react lite ui

Componentes de terceros

v1.0.1

Descargar

Un conjunto de componentes reactos de peso ligero, que son fácilmente personalizables y se pueden arrancar en su proyecto.

Características clave • Instalación • Uso • Documentación • Demo

Características clave:

Cualquier elemento DOM se puede personalizar a través de un archivo SASS simple. ?
Puede importar componentes individuales que no afecten el tamaño del paquete de su aplicación. ?
Diseño limpio con una implementación mínima que reduce el código que se envía a su aplicación con una interfaz de usuario agradable. ?
Cada componente se hace ligero, alrededor de la mitad del tamaño de los componentes (¡y aún menos!) De otras bibliotecas populares. ?

? Instalación:

 npm install --save react-lite-ui

Uso:

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

? Personalización:

Tomemos nuestro archivo App.js y le agregemos un componente de tarjeta:

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

Cree un archivo llamado 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 ;
}

No se preocupe si esto no tiene sentido para usted. Por ahora, agregaremos estos estilos y completaremos el cableado en nuestros estilos al componente de la tarjeta.

Ahora, en nuestro archivo App.js pasaremos un accesorio theme al 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 >
        ) ;
      }
    }
    
 . . .

Entonces, echemos un vistazo a lo que hicimos aquí:

Definimos nuestros propios estilos que queríamos personalizar para el componente usando las clases de card , cardHeader y cardFooter .
Luego pasamos los estilos al componente a través del accesorio theme que se aplica a la estructura del componente.

¡Los estilos que pasó se combinan con los estilos predeterminados del componente para representar su componente personalizado! Para obtener más información sobre cómo personalizar y varios accesorios que puede pasar a sus componentes, visite la página de documentación.

¡Eso es todo lo que necesitas hacer! Y aquí está nuestro componente de tarjeta personalizado:

Bastante fácil, ¿verdad? ¿Quieres probar más componentes?

¡Simplemente visite nuestra página de juegos para probar los componentes antes de usar y divertirse jugando con ellos!