หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

สิ่งสำคัญ: เราได้ย้ายไปยังพื้นที่เก็บข้อมูลโครงการ TABLER อย่างเป็นทางการแล้ว https://github.com/tabler/tabler-react

ส่วนประกอบ react-tabler

คอลเลกชัน 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 CDN สำหรับแบบอักษร %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 >

จากนั้นคุณเพียงแค่นำเข้า react-tabler-components และสร้าง... 

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

ใบอนุญาต

เอ็มไอที © jonthomp

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด