<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example | React SimpleTabs</title>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<link rel="stylesheet" href="react-simpletabs.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h2 class="title">React SimpleTabs</h2>
<div id="tabs"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react-with-addons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
<script src="react-simpletabs.js"></script>
<script type="text/jsx" src="app.js"></script>
</body>
</html>
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700");
*,
*::before,
*::after {
box-sizing: border-box;
}
a { text-decoration: none; }
body {
font-family: "Source Sans Pro", sans-serif;
}
.title {
padding: 50px;
padding-bottom: 100px;
margin: 0;
background: #f2f2f2;
font-size: 48px;
font-weight: 200;
color: #919191;
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
/* =============================================================================
An example of how stylize the tabs
============================================================================= */
.tabs {
margin-top: -50px;
}
.tabs-navigation {
padding: 0 50px;
}
.tabs-panel {
padding: 50px;
}
/*!
*
* React Simpletabs - Just a simple tabs component built with React
* @version v0.1.0
* @link https://github.com/pedronauck/react-simpletabs
* @license MIT
* @author Pedro Nauck (https://github.com/pedronauck)
*
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["ReactSimpleTabs"] = factory(require("react"));
else
root["ReactSimpleTabs"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM *//** @jsx React.DOM */
'use strict';
var React = __webpack_require__(1);
var classSet = __webpack_require__(2);
if (true) {
__webpack_require__(3);
}
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
tabActive: React.PropTypes.number,
onBeforeChange: React.PropTypes.func,
onAfterChange: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.component
]).isRequired
},
getDefaultProps:function () {
return { tabActive: 1 };
},
getInitialState:function () {
return { tabActive: this.props.tabActive };
},
render:function () {
var menuItems = this._getMenuItems();
var panelsList = this._getPanels();
return (
React.DOM.div({className: "tabs"},
menuItems,
panelsList
)
);
},
setActive:function (e) {
var id = parseInt(e.target.getAttribute('data-tab-id'));
var onAfterChange = this.props.onAfterChange;
var onBeforeChange = this.props.onBeforeChange;
var $selectedPanel = this.refs['tab-panel-' + id];
var $selectedTabMenu = this.refs['tab-menu-' + id];
if (onBeforeChange) {
onBeforeChange(id, $selectedPanel, $selectedTabMenu);
}
this.setState({ tabActive: id }, function() {
if (onAfterChange) {
onAfterChange(id, $selectedPanel, $selectedTabMenu);
}
});
e.preventDefault();
},
_getMenuItems:function () {
if (!this.props.children) {
throw new Error('Tabs must contain at least one Tabs.Panel');
}
if (!Array.isArray(this.props.children)) {
this.props.children = [this.props.children];
}
var $menuItems = this.props.children.map(function($panel, index) {
var ref = 'tab-menu-${index + 1}';
var title = $panel.props.title;
var classes = classSet({
'tabs-menu-item': true,
'is-active': this.state.tabActive === (index + 1)
});
return (
React.DOM.li({ref: ref, key: index, className: classes},
React.DOM.a({href: "#", 'data-tab-id': index + 1, onClick: this.setActive}, title)
)
);
}.bind(this));
return (
React.DOM.nav({className: "tabs-navigation"},
React.DOM.ul({className: "tabs-menu"}, $menuItems)
)
);
},
_getPanels:function () {
var $panels = this.props.children.map(function($panel, index) {
var ref = 'tab-panel-${index + 1}';
var classes = classSet({
'tabs-panel': true,
'is-active': this.state.tabActive === (index + 1)
});
return (
React.DOM.article({ref: ref, key: index, className: classes}, $panel)
);
}.bind(this));
return (
React.DOM.section({className: "tabs-panels"}, $panels)
);
}
});
Tabs.Panel = React.createClass({
displayName: 'Panel',
propTypes: {
title: React.PropTypes.string.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.component
]).isRequired
},
render:function () {
return React.DOM.div(null, this.props.children);
}
});
module.exports = Tabs;
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM *//**
* Produces the same result as React.addons.classSet
* @param {object} classes
* @return {string}
*
* @author Ciro S. Costa <https://github.com/cirocosta>
*/
module.exports = function(classes) {
return typeof classes !== 'object' ?
Array.prototype.join.call(arguments, ' ') :
Object.keys(classes).filter(function(className) {return classes[className];}).join(' ');
};
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ ])
});
/** @jsx React.DOM */
'use strict';
var Tabs = ReactSimpleTabs;
var App = React.createClass({
onBeforeChange: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
console.log('before the tab ' + selectedIndex);
},
onAfterChange: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
console.log('after the tab ' + selectedIndex);
},
render: function() {
return (
<Tabs tabActive={2} onBeforeChange={this.onBeforeChange} onAfterChange={this.onAfterChange}>
<Tabs.Panel title='Tab #1'>
<h2>Content #1</h2>
</Tabs.Panel>
<Tabs.Panel title='Tab #2'>
<h2>Content #2</h2>
</Tabs.Panel>
<Tabs.Panel title='Tab #3'>
<h2>Content #3</h2>
</Tabs.Panel>
</Tabs>
);
}
});
React.renderComponent(<App />, document.getElementById('tabs'));
/*!
*
* React Simpletabs - Just a simple tabs component built with React
* @version v0.1.0
* @link https://github.com/pedronauck/react-simpletabs
* @license MIT
* @author Pedro Nauck (https://github.com/pedronauck)
*
*/
.tabs-navigation {
padding: 0 20px;
max-height: 50px;
border-bottom: 1px solid #ddd;
}
.tabs-menu {
display: table;
list-style: none;
padding: 0;
margin: 0;
}
.tabs-menu-item {
float: left;
}
.tabs-menu-item a {
display: block;
padding: 0 40px;
height: 50px;
line-height: 50px;
border-bottom: 0;
color: #a9a9a9;
}
.tabs-menu-item:not(.is-active) a:hover {
color: #3498db;
}
.tabs-menu-item.is-active a {
background: #fff;
border: 1px solid #ddd;
border-top: 2px solid #3498db;
border-bottom: 0;
color: #333;
}
.tabs-panel {
display: none;
padding: 30px;
}
.tabs-panel.is-active {
display: block;
}