0.12.5 • Published 3 years ago
@hiendv/react-tabs v0.12.5
@hiendv/react-tabs
Lightweight and flexible tabs component for the web :zap:
Features
- Tab definition using template & programmatically
- Octicons support in tab items
- Beautiful modulized themes included
- Easily accessible navigation with URL
- Easy tab positioning
- Ghost tabs support
Demo
See https://hiendv.github.io/tabs
Installation & Usage
CDN
<script src="https://cdn.jsdelivr.net/npm/@hiendv/react-tabs@latest/dist/iife.js" crossorigin="anonymous"></script>
Note: We recommend linking to a specific version number that you can update manually
const { Tab, Tabs, themeDefault, themeDark } = reacttabs
NPM
npm install --save @hiendv/react-tabs
# yarn add @hiendv/react-tabs
import React, { Component } from 'react'
import { Tabs, Tab } from '@hiendv/react-tabs'
export default class App extends Component {
render () {
return (
<Tabs>
<Tab title='First'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Tab>
<Tab title='Second'>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</Tab>
<Tab title='Third'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</Tab>
</Tabs>
)
}
}
Please see react-tabs-example for a complete demonstration.
Documentation
Tabs
Property | Type | Required | Default | Description |
---|---|---|---|---|
theme | Object | No | themeDefault - @hiendv/tabs | Modulized style |
show | Number | No | 0 | Initial active tab |
Event | Arguments | Description |
---|---|---|
onUpdate | (index) | Current active tab |
Tab
Props
Property | Type | Required | Default | Description |
---|---|---|---|---|
title | String | No | 'Title' | Tab title |
icon | Object | No | Empty | Tab octicon - octicons-react |
hash | String | No | null | Unique hash fragment for easy bookmark and navigation |
end | Boolean | No | false | Push the tab and its following friends to the right |
ghost | Boolean | No | false | Mark tab as a pure button |
Development & Testing
Please check the Contributing Guidelines.
Contribution
Issues and PRs are welcome !