essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
208 lines (194 loc) • 8.01 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Menu from 'essence-menu';
import AppBar from 'essence-appbar';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
class AppBarComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
),
AppBarTitle: false,
AppBarStyle: {position: 'relative', paddingLeft: '12px!important', overflow: 'inherit!important'}
};
}
changeTitle(string) {
this.setState({
AppBarTitle: string.toString()
});
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>APPBAR</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'}}
>
It’s never been more fun to create an appbar with button and navigation and whatever. Start with the .e-appbar class then add buttons, menus and whatever you need.
</Text>
<Card>
<CardContent>
<Block>
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<AppBar
style={this.state.AppBarStyle}
className={'e-background-indigo-400 e-text-white e-margin-top-25 e-margin-bottom-25'}>
<Menu type={'cover'} icon={'navigation-more-vert'} classes={'e-left'}>
<Text className={'e-text-black'}>
<Text
onClick={this.changeTitle.bind(this, 'Toasts')}>
<Text>Change Title</Text>
<Text type={'strong'}>Toasts</Text>
</Text>
</Text>
<Text className={'e-text-black'}>
<Text
onClick={this.changeTitle.bind(this, 'SnackBars')}>
<Text>Change Title</Text>
<Text type={'strong'}>SnackBars</Text>
</Text>
</Text>
<Text className={'e-text-black'}>
<Text
onClick={this.changeTitle.bind(this, 'Data Table')}>
<Text>Change Title</Text>
<Text type={'strong'}>Data Table</Text>
</Text>
</Text>
</Menu>
<Text>Essence - {this.state.AppBarTitle || 'AppBar Example'}</Text>
<Block className={'e-right'}>
<Menu type={'cover'} icon={'action-settings'} classes={'e-right'}>
<Text className={'e-text-black'}>
<Text type={'a'} href={'#icons'}>Link to: Icons</Text>
</Text>
<Text className={'e-text-black'}>
<Text type={'a'} href={'#button'}>Link to: Buttons</Text>
</Text>
<Text className={'e-text-black'}>
<Text type={'a'} href={'#core'}>Link to: Essence Core</Text>
</Text>
</Menu>
</Block>
</AppBar>
</Block>
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
See the Live Example from above and customize your own AppBar component with code below.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-appbar</strong>
</code>
</pre>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Menu from 'essence-menu';
<br />
import AppBar from 'essence-appbar';
<br />
import {Block, Text, Divider} from 'essence-core';
<br />
<br />
<br />
<br />
<AppBar className={'e-background-indigo-400 e-text-white'}>
<br />
<Menu type={'cover'} icon={'navigation-more-vert'} className={'e-left'}>
<br />
<Text className={'e-text-black'}>
<br />
<Text onClick={this.changeTitle.bind(this, 'Toasts')}>
<br />
<Text>Change Title</Text>
<br />
<Text type={'strong'}>Toasts</Text>
<br />
</Text>
<br />
</Text>
<br />
<Text className={'e-text-black'}>
<br />
<Text onClick={this.changeTitle.bind(this, 'SnackBars')}>
<br />
<Text>Change Title</Text>
<br />
<Text type={'strong'}>SnackBars</Text>
<br />
</Text>
<br />
</Text>
<br />
<Text className={'e-text-black'}>
<br />
<Text onClick={this.changeTitle.bind(this, 'Data Table')}>
<br />
<Text>Change Title</Text>
<br />
<Text type={'strong'}>Data Table</Text>
<br />
</Text>
<br />
</Text>
<br />
</Menu>
<br />
<br />
<Text>Essence - {this.state.AppBarTitle || 'AppBar Example'}</Text>
<br />
<br />
<Block className={'e-right'}>
<br />
<Menu type={'cover'} icon={'action-settings'} className={'e-right'}>
<br />
<Text className={'e-text-black'}>
<br />
<Text type={'a'} href={'#icons'}>Link to: Icons</Text>
<br />
</Text>
<br />
<Text className={'e-text-black'}>
<br />
<Text type={'a'} href={'#button'}>Link to: Buttons</Text>
<br />
</Text>
<br />
<Text className={'e-text-black'}>
<br />
<Text type={'a'} href={'#core'}>Link to: Essence Core</Text>
<br />
</Text>
<br />
</Menu>
<br />
</Block>
<br />
</AppBar>
</code>
</pre>
</Block>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppBarComponent = AppBarComponent;