diff --git a/src/index.js b/src/index.js index ce37ffc..c84e85a 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,8 @@ const components = { Checkbox: require('./checkbox'), Radio: require('./radio'), Switch: require('./switch'), - IconToggle: require('./icon-toggle') + IconToggle: require('./icon-toggle'), + Tabs: require('./tabs') }; module.exports = components; diff --git a/src/tabs.js b/src/tabs.js new file mode 100644 index 0000000..7b8da42 --- /dev/null +++ b/src/tabs.js @@ -0,0 +1,91 @@ +'use strict'; + +const React = require('react'); +const mdl = require('material-design-lite/material.min'); +const classnames = require('classnames'); + +const baseClasses = { + 'mdl-tabs': true, + 'mdl-js-tabs': true +}; + +const tabBaseClasses = { + 'mdl-tabs__tab': true +}; + +const panelBaseClasses = { + 'mdl-tabs__panel': true +}; + +class Tabs extends React.Component { + + componentDidMount(){ + const node = React.findDOMNode(this); + mdl.upgradeElement(node, 'MaterialTabs'); + } + + componentWillUnmount(){ + const node = React.findDOMNode(this); + mdl.downgradeElements(node); + } + + render(){ + const { + className, + ripple, + tabs + } = this.props; + + const classes = classnames(baseClasses, { + 'mdl-js-ripple-effect': ripple + }, className); + + return ( +
{item}
); + }) + } +