-
Customize color and background for active tab. Specify flexible width or auto match the tab's width header. Nest tabs inside other tabs. Define speed of transition
+
Easy to use React tab component that lets you choose from 3 themes, customize colors for text and background, use double lines in the title, wrap bottom content to match the nav width, nest tabs inside other tabs, define transition speed or use the navigation in the bottom
Default Theme
-
default theme
+
settings: {'{fadeTime: 250, index: 0}'}
Use alternate themes to customize skin
-
.folder-theme
+
class="folder-theme"
+
settings: {'{index: 0, bgColor: \'lightPink\', color: \'#333\'}'}
Title and subtitle
-
.two-rows-theme
-
{'{contentWrap: true}'} wraps the content to the size of the nav
+
class="two-rows-theme"
+
settings: {'{contentWrap: true}'} // Wrap content to nav width
Nest tab components
-
.box-theme
+
class="box-theme"
+
settings: {'{index: 2, contentWrap: true}'}
Bottom Navigation
-
{'{bottomNav: true}'}
+
{'{bottomNav: true, bgColor: \'black\', color: \'white\', contentWrap: true}'}
,
diff --git a/src/index.js b/src/index.js
index 7780a17..becf7bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './scss/index.scss';
-const BITS = 10;
+
const DEFAULTS = {
index: 0,
mainClass: 'tabs-container',