Tabs

Tabs

The tabs component can have multiple pieces of content, each has it's on associated header area (tab) which when clicked on, reveals the hidden content below.

Props

The props needed for this component are listed and explained below:

• value - This prop must be a string.

• onChange - This prop must be a function.

• items - This prop must be a array of objects with the given keys and values shown in the example below.

Example

<Tabs 
	items={[
		{
			icon: "pencil4",
			label: "Item one",
			component: <img src="http://lorempixel.com/output/animals-q-c-600-480-4.jpg"/>,
			value: "Item one"
		},
		{
			icon: "pencil4",
			label: "Item two",
			component: <img src="http://lorempixel.com/output/animals-q-c-600-480-6.jpg"/>,
			value: "Item two"
		}

	]}
	value={this.state.tabsValue}
	onChange={this.onChange} 
/>

// ...React Component
getInitialState: function() {
	return {
		tabsValue: "Item one"
	}
},

onChange: function(value) {
	console.log(value);

	this.setState({
		tabsValue: value
	})
},

Related

• Narrative