Unduh react tabs - react tabs Sumber Code Unduh

react tabs

Komponen pihak ketiga

1.0.0

Unduh

Tab Bereaksi

Tab React Sederhana Menggunakan ContextApi React Baru untuk Mengelola Perubahan Tab Aktif atau Tidak. Dan tidak perlu menambahkan wadah tab Anda cukup menambahkan komponen tab.

Demo

Untuk demo cepat silakan checkout buku cerita ini.
Untuk Kode Cepat Penggunaan Pelase Checkout Code dan kotak ini

Perkenalan

Proyek ini selesai dengan menggunakan reactJs dan gaya normal untuk menambahkan komponen tab-tab kecil ke proyek Anda tanpa perpustakaan besar.

Instalasi

Modul ini didistribusikan melalui NPM yang dibundel dengan node dan harus diinstal sebagai salah satu dependensi proyek Anda:

Benang

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

Paket ini juga tergantung pada react , tslib hanya ESM untuk UMD yang sudah termasuk, react-dom , prop-types . Pastikan Anda menginstalnya juga.

Penggunaan

Cobalah di browser

 import React from "react" ;
import { Tabs } from "@feuer/react-tabs" ;

const styles = {
  fontFamily : "sans-serif" ,
  textAlign : "center"
} ;

const LeftTabs = ( ) => (
  < div style = { styles } >
    < Tabs
      activeTab = { {
        id : "tab1"
      } }
    >
      < Tabs . Tab id = "tab1" title = "Tab 1" >
        < div style = { { padding : 10 } } >
          This is tab 1
        </ div >
      </ Tabs . Tab >
      < Tabs . Tab id = "tab2" title = "Tab 2" >
        < div style = { { padding : 10 } } >
          This is tab 2
        </ div >
      </ Tabs . Tab >
    </ Tabs >
  </ div >
) ;

Alat peraga dasar

Ini adalah daftar alat peraga yang mungkin harus Anda ketahui saat menggunakan reaksi-tab.

Tab Komponen Tab

 Tabs . propTypes = {
  activeTab : {
    id : PropTypes . string . isRequired ,
  } ,
  children : PropTypes . arrayOf ( PropTypes . node ) . isRequired ,
  tabsProps : {
    style : PropTypes . object ,
    className : PropTypes . string
  }
} ;

Alat peraga komponen tab

 Tab . propTypes = {
  id : PropTypes . string . isRequired ,
  title : PropTypes . string . isRequired ,
  tabIndex : PropTypes . oneOf ( [ PropTypes . string , PropTypes . number ] )
} ;