Скачать react tabs - Загрузить исходный код react tabs

react tabs

Сторонние компоненты

1.0.0

Скачать

Реагировать вкладки

Простые вкладки React с использованием нового ContextAPI React для управления изменениями вкладов или нет. И нет необходимости добавлять контейнер вкладок. Вы просто добавляете компонент вкладки.

Демо

Для быстрого демонстрации, пожалуйста, проверьте этот сборник рассказов.
Для быстрого использования кода пелазе.

Введение

Этот проект выполняется с использованием ReactJS и обычного стиля, чтобы добавить небольшой компонент React-Tabs в ваш проект без огромной библиотеки.

Установка

Этот модуль распределен через NPM, который связан с узлом и должен быть установлен в качестве одной из зависимостей вашего проекта:

Пряжа

 yarn add @feuer/react-tabs

Npm

 npm install @feuer/react-tabs

Этот пакет также зависит от react , tslib только для ESM для UMD, его уже включенного, react-dom , prop-types . Пожалуйста, убедитесь, что вы также установили.

Использование

Попробуйте это в браузере

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