essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
138 lines (127 loc) • 5.41 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Tab from 'essence-tab';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
var tabs = {
'header': [
{ 'context': (<Text>Tab 1</Text>) },
{ 'context': (<Text>Tab 2</Text>) },
{ 'context': (<Text>Tab with callback alert</Text>), 'callback': ( function() { alert('Hey you'); } ) },
{ 'context': (<Text>Tab with callback link</Text>), 'callback': ( function() { window.open('http://getessence.io/', '_blank'); }) }
],
'rows': [
(<Text>This is the context for Tab 1</Text>),
(<Text>This is the context for Tab 2</Text>),
(<Text>This is the context for Tab with callback alert</Text>),
(<Text>This is the context for Tab with callback link</Text>)
]
};
class AppTab extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>TABS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Tab
data={tabs}
classes={'e-background-indigo-400 e-text-grey-50'}
indicator={'e-background-grey-50'}/>
</Block>
<Block className={'e-padding-top-50'}>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-tab</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Tab component has the following options:
<br />
<br />
1. <strong>data</strong>: an object list with keys: <u>header</u>, <u>rows</u>, <u>footer</u>
<br />
2. <strong>header</strong>: an object list with keys: <u>context</u> & <u>callback</u> callback function
<br />
3. <strong>rows</strong>: an array list with the same number of columns as from header
<br />
4. <strong>indicator</strong>: the class color for tab header indicator
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
To customise the colour <strong>indicator</strong> try the example below.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Tab from 'essence-tab';
<br />
<br />
<br />
var tabs = {
<br />
'header': [
<br />
{ 'context': (<Text>Tab 1</Text>) },
<br />
{ 'context': (<Text>Tab 2</Text>) },
<br />
{ 'context': (<Text>Tab with callback alert</Text>), 'callback': ( function() { alert('Hey you'); } ) },
<br />
{ 'context': (<Text>Tab with callback link</Text>), 'callback': ( function() { window.open('http://getessence.io/', '_blank'); }) }
<br />
],
<br />
'rows': [
<br />
(<Text>This is the context for Tab 1</Text>),
<br />
(<Text>This is the context for Tab 2</Text>),
<br />
(<Text>This is the context for Tab with callback alert</Text>),
<br />
(<Text>This is the context for Tab with callback link</Text>)
<br />
]
<br />
};
<br />
<br />
<Tab
<br />
data={tabs}
<br />
classes={'e-background-cyan-500 e-text-grey-50'}
<br />
indicator={'e-background-red-500'}/>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppTab = AppTab;