the-headerdeprecated

Header of the-components

Usage no npm install needed!

<script type="module">
  import theHeader from 'https://cdn.skypack.dev/the-header';
</script>

README

the-header

Build Status npm Version JS Standard

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.

Links