Skip to main content

Header

img

Usage​

This props inherits all the div properties from HTML

import React from 'react'
import { TopHeader } from 'qdm-component-library'

function App() {
  return (
    <TopHeader id={'id'} position="static" color="secondary">
      <svg
        style={{
          fill: 'currentColor',
          width: '1em',
          marginRight: 16,
          height: '1em',
          display: 'inline-block',
          fontSize: '1.5rem',
          transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
          flexShrink: 0,
          userSelect: 'none',
        }}
        focusable="false"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
      </svg>
      <H6 style={{ flexGrow: 1 }}>Hedaer</H6>
      <H6>Login</H6>
    </TopHeader>
  )
}
export default App

Reference​

Props​

className​

props for providing classname to Header component string

id​

props for providing id to Header component string

name​

props for providing name to Header component string

children​

props for providing children for Header Component React Node

inLineStyles​

props give addition props to the Header Component type Object

position​

props for providing position to the Header Component type 'absolute'| 'fixed'| 'relative'| 'static'| 'sticky'

color​

props for providing color to the Header Component type 'default'| 'inherit'| 'primary'| 'secondary'| 'transparent'

size​

props for providing size to the Header Component string | 'large' | 'small' | 'medium'