react tabs Download - react tabs Download de código fonte

react tabs

Componentes de terceiros

1.0.0

Baixar

Guias de reação

Guias de reação simples usando o novo contextApi do ReacTi para gerenciar as alterações guias ativas ou não. E não há necessidade de adicionar contêiner de guias, basta adicionar um componente de guia.

Demonstração

Para uma demonstração rápida, consulte este livro de histórias.
Para uso rápido de código de código, checkout deste código e caixa

Introdução

Este projeto feito usando o ReacTJS e o estilo normal para adicionar um pequeno componente React-Tabs ao seu projeto sem uma enorme biblioteca.

Instalação

Este módulo é distribuído via NPM, empacotado com nó e deve ser instalado como uma das dependências do seu projeto:

Fio

 yarn add @feuer/react-tabs

Npm

 npm install @feuer/react-tabs

Este pacote também depende do react , apenas tslib ESM para UMD, já incluído, react-dom , prop-types . Certifique -se de que você tenha instalado também.

Uso

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

Adereços básicos

Esta é a lista de adereços que você provavelmente deve saber ao usar o React-Tabs.

Tabs Adeços de componentes

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

Propções do componente da guia

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