react tabs Download - react tabs Quellcode herunterladen

react tabs

Komponenten von Drittanbietern

1.0.0

Herunterladen

Registerkarten reagieren

Einfache React -Registerkarten mit dem neuen React -ContextAPI, um Änderungen aktiver Registerkarten zu verwalten oder nicht. Und es ist nicht erforderlich, Registerkarte Container hinzuzufügen. Sie fügen einfach eine Registerkartenkomponente hinzu.

Demo

Für eine kurze Demo finden Sie dieses Storybook.
Für schnelle Code -Nutzung Pelase -Checkout Diese Codesandbox

Einführung

Dieses Projekt wurde mit ReactJs und normalem Styling durchgeführt, um Ihrem Projekt ohne eine riesige Bibliothek eine kleine React-TABS-Komponente hinzuzufügen.

Installation

Dieses Modul wird über NPM verteilt, das mit Knoten gebündelt ist und als eine der Abhängigkeiten Ihres Projekts installiert werden sollte:

Garn

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

Dieses Paket hängt auch von react , tslib ab, nur für UMD, das bereits enthalten ist, react-dom , prop-types . Bitte stellen Sie sicher, dass Sie es auch installiert haben.

Verwendung

Probieren Sie es im Browser aus

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

Grundlegende Requisiten

Dies ist die Liste der Requisiten, über die Sie wahrscheinlich bei der Verwendung von React-Tabs wissen sollten.

Registerkartenkomponenten -Requisiten

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

Tab -Komponenten -Requisiten

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