skip to main content

skip to navigation sidebar

skip to context sidebar

created:7/7/2021

updated:7/7/2021

loc

21

comments

43%

failed

6

coverage

100%

Header

grommet-controls

3.0.2

A page header component

$ npm install grommet-controlsimport { Header } from 'grommet-controls';<Header>  ...</Header>

Component

import { Header } from 'grommet-controls';

Main

app title

() => (
  <Box fill="horizontal" gap="large">
    <Header position="sticky">
      <Grommet />
      <Heading level={2} margin="none">
        app title
      </Heading>
    </Header>
    <Image fit="contain" src="https://picsum.photos/350/120/?image=662" />
  </Box>
)

Properties

	Name	Description	Default
IHeaderProps(3 properties)
	position	Position property for the header element relativefixedabsolutestickystatic	relative
	zIndex	z-index for the header number	10
	children	children content elements to be displayed in the header ReactNode	-
BoxProps(28 properties)

Commits

Date	Author	Commit Message
8/30/2020	atanasster	update eslint and add component-controls
8/27/2019	atanasster	initial commit 2.x alpha

2 commits

External dependencies

package	imports	peer
grommet ^2.15.0	BoxProps	*
react ^17.0.1	React	*

Internal dependencies

file	imports
"./StyledHeader"	StyledHeader
"./HeaderProps"	IHeaderProps

Component JSX

<StyledHeader

tag

/>

StyledHeader

from"./StyledHeader"

Stories

Elevation

() => (
  <Box fill="horizontal" gap="large">
    <Header position="sticky" elevation="xlarge">
      <Grommet />
      <Heading level={2} margin="none">
        app title
      </Heading>
    </Header>
    <Image fit="contain" src="https://picsum.photos/350/120/?image=662" />
  </Box>
)

Position

() => (
  <Box fill="horizontal" gap="large">
    <Header position="absolute">
      <Grommet />
      <Heading level={2} margin="none">
        app title
      </Heading>
    </Header>
    <Image fit="contain" src="https://picsum.photos/350/120/?image=662" />
  </Box>
)