@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiHeader


Package: @uireact/header

v3.1.9

Header component, usually use to render logo and a few menu user actions

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/header

#

Header

The header component will render at the top but on scrolling the header will move with the scrolling

  <div style={{ position: 'relative' }}>
    <div style={{ overflow: 'auto', maxHeight: '300px', backgroundColor: 'lightGray' }}>
      <UiHeader padding={{ left: 'five' }}>
        <p>Header</p>
      </UiHeader>
      <div style={{ color: 'black' }}>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
      </div>
    </div>
  </div>

#

Header fixed

The header component will kept positioned at the top of the content

  <div style={{ position: 'relative' }}>
    <div style={{ overflow: 'auto', maxHeight: '300px', backgroundColor: 'lightGray' }}>
      <UiHeader fixed padding={{ block: 'five' }}>
        <p>Header</p>
      </UiHeader>
      <div style={{ color: 'black' }}>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
      </div>
    </div>
  </div>