essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
189 lines (180 loc) • 8.12 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Navigation from 'essence-navigation';
import Image from 'essence-image';
import {List, ListItem} from 'essence-list';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
class AppNavigation 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 classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>NAVIGATION</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'}}>
Navigation Drawers help your users browse the site. Here's an example similar to the one we use. Add it to your aplication and customize the menus.
</Text>
<Card>
<CardContent>
<Block className={'e-row'}>
<Block className={'brick brick-4'} style={{paddingLeft:'0', paddingTop:'0'}}>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Block>
<Navigation style={{position:'relative', zIndex: '2'}}>
<Block classes={'e-navigation-wrapper'} id={'navigationMenu'}>
<Block type={'header'} className={'e-nav-header'} style={{lineHeight: '52px'}}>
<Text type={'a'} href={'#home'}>
<Image
width={'40px'}
height={'40px'}
style={{ verticalAlign: 'middle'}}
src={'http://getessence.io/assets/img/essence_icon.png'} />
</Text>
<Text type={'h2'} classes={'e-text-indigo-400 e-right'} style={{width: '74%', lineHeight: '45px'}}>
<Text>essence</Text>
</Text>
</Block>
<List type={'navigation'} classes={'e-background-white'}>
<ListItem key={'about'}>
<Text type={'a'} href={'#about'}>
<Block classes={'content e-left'}>
<Text type={'small'}>About</Text>
</Block>
</Text>
</ListItem>
<ListItem key={'get-started'}>
<Text type={'a'} href={'#get-started'}>
<Block classes={'content e-left'}>
<Text type={'small'}>Get Started</Text>
</Block>
</Text>
</ListItem>
<ListItem key={'contact'}>
<Text type={'a'} href={'#contact'}>
<Block classes={'content e-left'}>
<Text type={'small'}>Contact</Text>
</Block>
</Text>
</ListItem>
</List>
</Block>
</Navigation>
</Block>
</Block>
<Block className={'brick brick-8'} style={{paddingRight:'0', paddingTop:'0'}}>
<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-navigation</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Navigation component has the following option:
<br />
<br />
1. <strong>visible</strong>: <u>true</u> - show the bottom sheet or <u>false</u> (<strong>default</strong>) - hide the bottom sheet
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Create a new ReactJS file with the code bellow.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Navigation from 'essence-navigation';
<br />
<br />
<Navigation>
<br />
<Block classes={'e-navigation-wrapper'} id={'navigationMenu'}>
<br />
<Block type={'header'} className={'e-nav-header'} style={{lineHeight: '52px'}}>
<br />
<Text type={'a'} href={'#home'}>
<br />
<Image width={'40px'} height={'40px'} style={{verticalAlign: 'middle'}} src={'http://getessence.io/assets/img/essence_icon.png'} />
<br />
</Text>
<br />
<Text type={'h2'} classes={'e-text-indigo-400 e-right'} style={{width: '74%', lineHeight: '45px'}}>
<br />
<Text>essence</Text>
<br />
</Text>
<br />
</Block>
<br />
<List type={'navigation'} classes={'e-background-white'}>
<br />
<ListItem key={'about'}>
<br />
<Text type={'a'} href={'#about'}>
<br />
<Block classes={'content e-left'}>
<br />
<Text type={'small'}>About</Text>
<br />
</Block>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem key={'get-started'}>
<br />
<Text type={'a'} href={'#get-started'}>
<br />
<Block classes={'content e-left'}>
<br />
<Text type={'small'}>Get Started</Text>
<br />
</Block>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem key={'contact'}>
<br />
<Text type={'a'} href={'#contact'}>
<br />
<Block classes={'content e-left'}>
<br />
<Text type={'small'}>Contact</Text>
<br />
</Block>
<br />
</Text>
<br />
</ListItem>
<br />
</List>
<br />
</Block>
<br />
</Navigation>
</code>
</pre>
</Block>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppNavigation = AppNavigation;