react tabs下載 - react tabs源代碼下載

react tabs

三方組件

1.0.0

下載

React Tabs

簡單的React選項卡使用新的React ContextApi來管理更改活動選項卡。而且無需添加選項卡容器，您只需添加一個選項卡組件即可。

演示

有關快速演示，請查看本故事書。
有關快速代碼使用率Pelase Checkout此codesandbox

介紹

該項目使用ReactJ和普通樣式完成，以在您的項目中添加一個小的React-Tabs組件，而無需大量庫。

安裝

該模塊是通過NPM分發的，該模塊與節點捆綁在一起，應作為您項目的依賴項之一安裝：

紗

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

該軟件包還取決於react ， tslib僅用於UMD的ESM已包含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 ] )
} ;