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