Descarga react tabs - Descarga del código fuente react tabs

react tabs

Componentes de terceros

1.0.0

Descargar

REACT TABS

Pestañas reaccionadas simples utilizando el nuevo react contextapi para administrar las pestañas activas de cambios o no. Y no hay necesidad de agregar contenedor de pestañas, solo agregue un componente de pestaña.

Manifestación

Para una demostración rápida, consulte este libro de cuentos.
Para el código rápido de uso de la pelase, consulte este CodesandBox

Introducción

Este proyecto realizado utilizando reactjs y estilo normal para agregar un pequeño componente React-Tabs a su proyecto sin una biblioteca enorme.

Instalación

Este módulo se distribuye a través de NPM, que se incluye con nodo y debe instalarse como una de las dependencias de su proyecto:

Hilo

 yarn add @feuer/react-tabs

Npm

 npm install @feuer/react-tabs

Este paquete también depende de react , tslib solo ESM para UMD es ya incluido, react-dom , prop-types . Asegúrese de tenerlo instalado también.

Uso

Pruébalo en el navegador

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

Accesorios básicos

Esta es la lista de accesorios que probablemente debería conocer al usar react-tabs.

Autorios de componentes de pestañas

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

Autorios de componentes de pestañas

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