Téléchargement react tabs - react tabs CODE Téléchargement

react tabs

Composants tiers

1.0.0

Télécharger

Onglets de réaction

Onglets de réaction simples à l'aide de la nouvelle React ContextAPI pour gérer ou non les onglets actifs des modifications. Et il n'est pas nécessaire d'ajouter un conteneur d'onglets, vous ajoutez simplement un composant d'onglet.

Démo

Pour une démo rapide, veuillez consulter ce livre de contes.
Pour une utilisation rapide de code Pélase, cochez cette boîte de codes et boîte

Introduction

Ce projet réalisé en utilisant ReactJS et un style normal pour ajouter un petit composant React-Tabs à votre projet sans une immense bibliothèque.

Installation

Ce module est distribué via le NPM qui est regroupé de nœud et doit être installé comme l'une des dépendances de votre projet:

Fil

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

Ce package dépend également de react , tslib uniquement ESM pour UMD, il est déjà inclus, react-dom , prop-types . Veuillez vous assurer que vous l'avez également installé.

Usage

Essayez-le dans le navigateur

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

Accessoires de base

Il s'agit de la liste des accessoires que vous devriez probablement connaître lors de l'utilisation de React-Tabs.

Tabs Composant Props

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

Accessoires de composant d'onglet

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