<div id="root"></div>
const root = document.querySelector('#root');
class UsingTabs extends React.Component {
constructor() {
super();
this.state = { active: 0 };
}
doSomething(event) {
console.log(event.detail.active);
this.setState({ active: event.detail.active});
}
componentDidMount() {
this.element
.addEventListener('change', this.doSomething.bind(this));
}
render() {
return (
<div>
<p>Selected tab is {this.state.active}</p>
<amber-tabs
ref={(element) => { this.element = element; }}
active={this.state.active}
labels="One, Two"
></amber-tabs>
</div>
);
}
}
ReactDOM.render(<UsingTabs />, root);
View Compiled
This Pen doesn't use any external CSS resources.