react tabsダウンロード - react tabsソースコードのダウンロード

react tabs

サードパーティ製コンポーネント

1.0.0

ダウンロード

反応タブ

新しいReact Contextapiを使用して、アクティブタブの変更を管理するかどうかを管理する単純なReactタブ。また、タブコンポーネントを追加するだけのタブコンテナを追加する必要はありません。

デモ

クイックデモについては、このストーリーブックをチェックアウトしてください。
迅速なコード使用のために、ペラースチェックアウトこのcodeSandbox

導入

このプロジェクトは、ReactJSと通常のスタイリングを使用して、巨大なライブラリなしでプロジェクトに小さなReact-Tabsコンポーネントを追加しました。

インストール

このモジュールは、ノードにバンドルされているNPMを介して配布され、プロジェクトの依存関係の1つとしてインストールする必要があります。

糸

 yarn add @feuer/react-tabs

npm

 npm install @feuer/react-tabs

このパッケージはprop-types react 、 tslibのみに依存していますreact-dom同様にインストールしていることを確認してください。

使用法

ブラウザで試してみてください

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