react lite ui

React lite ui

Un ensemble de composants réactifs légers, qui sont facilement personnalisables et peuvent être enracés dans votre projet.

Caractéristiques clés • Installation • Utilisation • Documentation • Demo

Caractéristiques clés:

• Tout élément DOM peut être personnalisé via un fichier SASS simple. ?

• Vous pouvez importer des composants individuels qui n'affectent pas la taille du bundle de votre application. ?

• Design propre avec une implémentation minimale réduisant le code expédié à votre application avec une ui agréable. ?

• Chaque composant est fait de poids léger - environ la moitié de la taille des composants (et encore moins!) D'autres bibliothèques populaires. ?

? Installation:

 npm install --save react-lite-ui

Utilisation:

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

? Personnalisation:

Prenons notre fichier App.js et ajoutons-y un composant de carte:

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

Créer un fichier nommé 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 ;
}

Ne vous inquiétez pas si cela n'a pas de sens pour vous. Pour l'instant, nous allons ajouter ces styles et terminer le câblage dans nos styles au composant de la carte.

Maintenant, dans notre fichier App.js nous passerons un accessoire theme au composant Card , comme ceci:

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

Alors, jetons un coup d'œil à ce que nous avons fait ici:

• Nous avons défini nos propres styles que nous voulions personnaliser pour le composant à l'aide des classes card , cardHeader et cardFooter .

• Ensuite, nous avons transmis les styles au composant via l'hélice theme qui est appliquée à la structure du composant.

Les styles que vous avez passés sont ensuite combinés avec les styles par défaut du composant pour rendre votre composant personnalisé! Pour plus d'informations sur la façon de personnaliser et divers accessoires que vous pouvez transmettre à vos composants, veuillez visiter la page de documentation.

C'est tout ce que vous devez faire! Et voici notre composant de carte personnalisé:

Assez facile, non? Vous voulez essayer plus de composants?

Visitez simplement notre page de jeu pour essayer les composants avant de l'utiliser et amusez-vous à jouer avec eux!

Contribution:

Si vous souhaitez contribuer, veuillez jeter un œil à nos directives de contribution et élever un RP! Nous aimerions les contributions!

Si vous trouvez un problème ou avez une question, veuillez ouvrir un problème ici et nous serions ravis de vous aider et de continuer à améliorer cette bibliothèque! ?

Merci!

Contributeurs: