react tabler components

هام: لقد انتقلنا إلى مستودع مشروع Tabler الرسمي https://github.com/tabler/tabler-react

مكونات جدول التفاعل

مجموعة WIP من مكونات React لـ Tabler

تجريبي

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

ثَبَّتَ

npm install --save react-tabler-components

or

yarn add react-tabler-components

الاستخدام

في الوقت الحالي، هذه مجموعة من المكونات فقط، ولا تأتي مع Tabler CSS أو Javascript المجمعة جنبًا إلى جنب، لذا يجب عليك إضافتها إلى مشروعك بالطريقة التي تناسبك. في المثال، نستخدم فقط نسخة محلية من ملفات Tabler وBootstrap/Google CDNs للخطوط. يتم استبدال %PUBLIC_URL% بتطبيق create-react-app في وقت الإنشاء.

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

بعد ذلك، ما عليك سوى استيراد مكونات جدول التفاعل والبدء في البناء...

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

رخصة

معهد ماساتشوستس للتكنولوجيا © جونثومب