UNPKG

react-tabs-css

Version:

>

59 lines (44 loc) 1.6 kB
# react-tabs-css > [![NPM](https://img.shields.io/npm/v/react-tabs-css.svg)](https://www.npmjs.com/package/react-tabs-css) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ## Demo https://react-tabs-css.netlify.app/ ## Install ```bash npm install --save react-tabs-css ``` ## Usage ```jsx import React, { Component } from 'react' import { Tab, Tabs } from "react-tabs-css"; class Example extends Component { render () { return ( <Tabs > <Tab index={0} title="Tab 1" group="group-1"> <h1>Tab 1</h1> <input type="text" placeholder="tab 1"/> </Tab> <Tab index={1} title="Tab 2" active group="group-1" > <h2>Tab 2</h2> <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> </Tab> </Tabs> ) } } ``` ## Props ```Tabs``` props : - style : Object (exmple : ```style={{backgroundColor : "red"}}```) ```Tab``` props : - index* : (required and unique) Number(exmple : ```index={0}```) - style : Object (exmple : ```style={{backgroundColor : "red"}}```) - group* : String (exmple : ```group="group-1"```) all the tab inside the tabs should have the same group - title : String (exmple : ```title="Hello world"```) - active : boolean (example : ```active={true}) ## License MIT © [yagoubi abdelkader](https://github.com/yagoubigithub)