react tabs 다운로드 - react tabs 소스 코드 다운로드

react tabs

타사 구성 요소

1.0.0

다운로드

반응 탭

새로운 React ContextApi를 사용하여 Simple React 탭을 변경하여 변경 활성 탭을 관리합니다. 탭 구성 요소를 추가하면 탭 컨테이너를 추가 할 필요가 없습니다.

데모

빠른 데모는이 스토리 북을 확인하십시오.
Quick Code 사용 Pelase Checkout의 경우이 Codesandbox

소개

이 프로젝트는 Reactjs와 정상적인 스타일을 사용하여 수행하여 거대한 라이브러리없이 프로젝트에 작은 React-TABS 구성 요소를 추가했습니다.

설치

이 모듈은 NPM을 통해 분포되어 있으며 노드와 함께 번들로 제공되며 프로젝트의 종속성 중 하나로 설치해야합니다.

방사

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

이 패키지는 또한 react , tslib 만 이미 포함 된 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 ] )
} ;