ดาวน์โหลด react tabs - react tabs ซอร์สโค้ดดาวน์โหลด

react tabs

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

แท็บตอบสนอง

แท็บปฏิกิริยาแบบง่ายโดยใช้ React Contextapi ใหม่เพื่อจัดการการเปลี่ยนแปลงแท็บที่ใช้งานอยู่หรือไม่ และไม่จำเป็นต้องเพิ่มแท็บคอนเทนเนอร์ที่คุณเพียงเพิ่มส่วนประกอบแท็บ

การสาธิต

สำหรับการสาธิตอย่างรวดเร็วโปรดชำระเงินหนังสือนิทานนี้
สำหรับการใช้รหัสอย่างรวดเร็ว pelase checkout codesandbox นี้

การแนะนำ

โครงการนี้ทำโดยใช้ ReactJs และสไตล์ปกติเพื่อเพิ่มส่วนประกอบ react-tabs ขนาดเล็กให้กับโครงการของคุณโดยไม่มีห้องสมุดขนาดใหญ่

การติดตั้ง

โมดูลนี้มีการกระจายผ่าน NPM ซึ่งรวมกับโหนดและควรติดตั้งเป็นหนึ่งในการพึ่งพาของโครงการของคุณ:

เส้นด้าย

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

แพ็คเกจนี้ยังขึ้นอยู่กับ react , tslib เพียง ESM สำหรับ UMD ที่รวมอยู่แล้ว, react-dom , prop-types โปรดตรวจสอบให้แน่ใจว่าคุณติดตั้งแล้ว

การใช้งาน

ลองใช้ในเบราว์เซอร์

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

อุปกรณ์ประกอบฉากพื้นฐาน

นี่คือรายการอุปกรณ์ประกอบฉากที่คุณควรรู้เมื่อใช้ react-tabs

อุปกรณ์ประกอบฉากประกอบ

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

อุปกรณ์ประกอบฉากส่วนประกอบแท็บ

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