react tabler components

WICHTIG: WIR SIND ZUM OFFIZIELLEN TABLER-PROJEKT-REPOSITORY https://github.com/tabler/tabler-react UMGEZOGEN

React-Tabler-Komponenten

Eine WIP-Sammlung von React-Komponenten für Tabler

Demo

https://jonthomp.github.io/react-tabler-components/

Installieren

npm install --save react-tabler-components

or

yarn add react-tabler-components

Verwendung

Im Moment handelt es sich dabei nur um eine Reihe von Komponenten. Das Tabler-CSS oder Javascript ist nicht im Lieferumfang enthalten. Sie sollten diese also auf die Art und Weise in Ihr Projekt einfügen, die für Sie am besten geeignet ist. Im Beispiel verwenden wir lediglich eine lokale Kopie der Tabler-Dateien und Bootstrap/Google-CDNs für Schriftarten. Die %PUBLIC_URL% wird zur Erstellungszeit durch „create-react-app“ ersetzt.

 < link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " >
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext " >
< script src =" %PUBLIC_URL%/assets/js/require.min.js " > </ script >
< script >
  requirejs . config ( {
    baseUrl : '.'
  } ) ;
</ script >
<!-- Dashboard Core -->
< link href =" %PUBLIC_URL%/assets/css/dashboard.css " rel =" stylesheet " />
< script src =" %PUBLIC_URL%/assets/js/dashboard.js " > </ script >
<!-- c3.js Charts Plugin -->
< link href =" %PUBLIC_URL%/assets/plugins/charts-c3/plugin.css " rel =" stylesheet " />
< script src =" %PUBLIC_URL%/assets/plugins/charts-c3/plugin.js " > </ script >
<!-- Google Maps Plugin -->
< link href =" %PUBLIC_URL%/assets/plugins/maps-google/plugin.css " rel =" stylesheet " />
< script src =" %PUBLIC_URL%/assets/plugins/maps-google/plugin.js " > </ script >
<!-- Input Mask Plugin -->
< script src =" %PUBLIC_URL%/assets/plugins/input-mask/plugin.js " > </ script >

Dann importieren Sie einfach React-Tabler-Komponenten und beginnen mit dem Erstellen ...

 import React , { Component } from "react" ;

import { Card , Text , Icon } from "react-tabler-components" ;

class MyCard extends Component {
  render ( ) {
    return (
      < Card >
        < Card . Header >
          < Card . Title > Card Title </ Card . Title >
        </ Card . Header >
        < Card . Body >
          < Text color = "red" >
            Some Red text next to an icon
            < Icon name = "user" />
          </ Text >
        </ Card . Body >
      </ Card >
    ) ;
  }
} 

Lizenz

MIT © jonthomp