LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background-color: #6D7993;
}

.tabs__header {
  font-family: 'Trebuchet MS';
  font-size: 12px;
  position: relative;
  top: 1px
}

.tabs__content {
  background-color: #D5D5D5;
  border: 1px solid #9099A2;
  height: 400px;
} 

.tab {
  background-color: #D5D5D5;
  border: 1px solid #9099A2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #96858F;
  cursor: pointer;
  display: inline-block;
  padding: 6px 24px;
  position: relative;
  text-transform: uppercase;
  z-index: 0;
}

.tab:nth-child(n+2) {
    margin-left: -8px;
}

.tab:hover {
  color: #6D7993;
}

.tab--selected {
  border-bottom: 1px solid #D5D5D5;
  color: #6D7993;
  font-size: 14px;
  padding-top: 10px;
  z-index: 1;
}
JS
class App extends React.Component {
  constructor() {
    super();
    
    this._handleRemove = this._handleRemove.bind(this);
    this._handleAdd = this._handleAdd.bind(this);
    this._handleRename = this._handleRename.bind(this);

    this.state = {
      tabs: [ 'Tab One', 'Tab Two', 'Tab Tree', 'Tab Four', 'Tab Five']
    };
  }
  
  _handleRemove() {
    
  }

  _handleAdd() {
    
  }

  _handleRename() {
    
  }

  render() {
    return (
      
); } } class TabComponent extends React.Component { constructor(props) { super(props); this.state = { selectedIndex: 0 }; this._handleClick = this._handleClick.bind(this); } _handleClick(index) { this.setState({ selectedIndex: index }); } _renderTabs() { let tabs = []; for (let i = 0; i < this.props.tabs.length; i++) { tabs.push( ); } return tabs; } render() { return (
{this._renderTabs()}
); } } class Tab extends React.Component { constructor(props) { super(props); this._handleClick = this._handleClick.bind(this); } _handleClick() { this.props.onClick(this.props.index); } render() { const tabClassName = this.props.isSelected ? 'tab tab--selected' : 'tab'; return ( {this.props.label} ); } } ReactDOM.render(, document.getElementById('app'));

Description

Playing around with creating an dynamic tab component for React.
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv