README
the-header
Header of the-components
Installation
$ npm install the-header --save
Usage
'use strict'
import React from 'react'
import { TheRouter } from 'the-router'
import { TheRoute } from 'the-route'
import { TheHeader, TheHeaderStyle } from 'the-header'
import { TheButton, TheButtonStyle } from 'the-button'
class ExampleComponent extends React.PureComponent {
constructor (props) {
super(props)
this.state = {
notice: true
}
}
render () {
const {MockPage} = ExampleComponent
const {Logo, Tab, TabItem, RightArea} = TheHeader
return (
<div>
<TheRouter.Hash>
<TheHeaderStyle/>
<TheButtonStyle/>
<TheHeader notices={this.state.notice ? {
'you needs to verify your email': {
'send again': () => this.setState({notice: false})
}
} : {}}>
<Logo>Some app</Logo>
<Tab>
<TabItem to='/page-a'>PageA</TabItem>
<TabItem to='/page-b'>PageB</TabItem>
</Tab>
<RightArea>
<TheButton>Login</TheButton>
<TheButton primary>Sign Up</TheButton>
</RightArea>
</TheHeader>
<div>
<MockPage path='/page-a'
color='#83A'
message='This is Page A'
/>
<MockPage path='/page-b'
color='#38A'
message='This is Page B'
/>
<hr/>
<TheHeader asOverlay
style={{top: 190}}
>
<Logo>Some app with overlay header</Logo>
<Tab>
<TabItem to='/page-a'>PageA</TabItem>
<TabItem to='/page-b'>PageB</TabItem>
<TabItem to='/page-b' icon='fa fa-search'/>
</Tab>
<RightArea>
<TheButton>Login</TheButton>
<TheButton primary>Sign Up</TheButton>
</RightArea>
</TheHeader>
<hr/>
<TheHeader asOverlay
reversed
ribbon={'This is a ribbon'}
style={{top: 400}}
>
<Logo>Some app with overlay header</Logo>
<Tab>
<TabItem to='/page-a'>PageA</TabItem>
<TabItem to='/page-b'>PageB</TabItem>
<TabItem to='/page-b' icon='fa fa-search'/>
</Tab>
<RightArea>
<TheButton>Login</TheButton>
<TheButton primary>Sign Up</TheButton>
</RightArea>
</TheHeader>
<br/>
<TheHeader asStatic>
<Logo>Some app with static header</Logo>
</TheHeader>
</div>
</TheRouter.Hash>
</div>
)
}
static MockPage ({path, color, message}) {
return (
<TheRoute path={path}
component={({}) => (
<div style={{color}}>
{message}
</div>
)}
>
</TheRoute>
)
}
}
export default ExampleComponent
Components
TheHeader
Header of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
asOverlay |
bool | Style as overlay | false |
asStatic |
bool | Render with static positioning | false |
notices |
object | Notices | {} |
reversed |
bool | Reversed theme | false |
ribbon |
node | Ribbon to show | null |
role |
'banner' |
||
### TheHeaderStyle |
Style for TheHeader
Props
Name | Type | Description | Default |
---|---|---|---|
options |
object | Style options | {} |
License
This software is released under the MIT License.