react tabler components

PENTING: KAMI TELAH PINDAH KE REPOSITORI PROYEK TABLER RESMI https://github.com/tabler/tabler-react

komponen tabel reaksi

Kumpulan komponen React WIP untuk Tabler

Demo

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

Memasang

npm install --save react-tabler-components

or

yarn add react-tabler-components

Penggunaan

Saat ini komponen ini hanya berupa satu set saja, tidak dilengkapi dengan Tabler CSS atau Javascript yang dikemas di sampingnya sehingga Anda harus menambahkannya ke dalam proyek Anda dengan cara yang paling sesuai untuk Anda. Dalam contoh ini kami hanya menggunakan salinan lokal file Tabler dan Bootstrap/Google CDN untuk Font. %PUBLIC_URL% digantikan oleh create-react-app pada waktu pembuatan.

 < 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 >

Kemudian Anda cukup mengimpor komponen react-tabler dan mulai membangun...

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

Lisensi

MIT © jonthomp