react lite ui

Reagieren lite ui

Eine Reihe von Leichtgewichtskomponenten, die leicht anpassbar sind und in Ihrem Projekt Bootstraps erhalten werden können.

Schlüsselmerkmale • Installation • Verwendung • Dokumentation • Demo

Schlüsselmerkmale:

• Jedes DOM -Element kann über eine einfache SASS -Datei angepasst werden. ?

• Sie können einzelne Komponenten importieren, die sich nicht auf die Bündelgröße Ihrer App auswirken. ?

• Sauberes Design mit minimaler Implementierung, um den Code zu reduzieren, der mit angenehmer Benutzeroberfläche an Ihre App geliefert wird. ?

• Jede Komponente wird leicht gemacht - etwa die halbe Größe von Komponenten (und noch weniger!) Von anderen beliebten Bibliotheken. ?

? Installation:

 npm install --save react-lite-ui

Verwendung:

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

? Anpassung:

Nehmen wir unsere App.js -Datei ein und fügen Sie eine Kartenkomponente hinzu:

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

Erstellen Sie eine Datei mit dem Namen 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 ;
}

Mach dir keine Sorgen, wenn das für dich keinen Sinn macht. Im Moment werden wir diese Stile hinzufügen und die Kartenkomponente verkabeln.

In unserer App.js -Datei werden wir nun eine theme -Requisite an die Card wie folgt übergeben:

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

Schauen wir uns also an, was wir hier getan haben:

• Wir haben unsere eigenen Stile definiert, die wir für die Komponente mit den Klassen card , cardHeader und cardFooter anpassen wollten.

• Anschließend haben wir die Stile über die theme -Requisite an die Komponente übergeben, die auf die Struktur der Komponente angewendet wird.

Die Stile, die Sie bestanden haben, werden dann mit den Standardstilen der Komponente kombiniert, um Ihre angepasste Komponente zu rendern! Weitere Informationen zum Anpassen und verschiedenen Requisiten, die Sie an Ihre Komponenten übergeben können, besuchen Sie bitte die Dokumentationsseite.

Das ist alles, was Sie tun müssen! Und hier ist unsere angepasste Kartenkomponente:

Ziemlich einfach, oder? Möchten Sie mehr Komponenten ausprobieren?

Besuchen Sie einfach unsere Spielplatzseite, um die Komponenten auszuprobieren, bevor Sie es verwenden, und haben Sie Spaß, mit ihnen herumzuspielen!

Beitragen:

Wenn Sie einen Beitrag leisten möchten, sehen Sie sich bitte unsere Beitragsrichtlinien an und sammeln Sie eine PR! Wir würden Beiträge lieben!

Wenn Sie ein Problem finden oder eine Frage haben, öffnen Sie hier ein Problem und wir würden Ihnen gerne helfen und diese Bibliothek weiter verbessern! ?

Danke!

Mitwirkende: