header-panel

import { HeaderPanel } from "woly";

HeaderPanel is a navigation component that displays information and actions relating to the current screen.

Example

Hello! It`s a HeaderPanel
<Playground>
  <div style={{ marginBottom: '10px' }}>
    <HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
  </div>
</Playground>

Menu example

<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <block.S style={{ marginBottom: '10px' }}>
        <HeaderPanel>
          <div style={{ paddingRight: '10px' }}>
            <Button onClick={change} text="Sign in" priority="primary" />
          </div>
          <div>
            <b>
              <a href="" target="" style={{ paddingRight: '10px' }}>
                This is a link
              </a>
            </b>
            <b>
              <a href="" target="" style={{ paddingRight: '10px' }}>
                This is a link
              </a>
            </b>
            <b>
              <a href="" target="">
                This is a link
              </a>
            </b>
          </div>
        </HeaderPanel>
        <div
          style={{
            position: 'absolute',
            visibility: value ? 'visible' : 'hidden',
            width: value ? '250px' : '0',
            marginTop: '20px',
          }}
        >
          <Surface>
            <FormBlock>
              <Label priority="primary">Name</Label>
              <Input
                name="name"
                onChange={(event) => console.info('On input change')}
                placeholder="Ivan Ivanov"
                type="text"
                priority="primary"
              />
              <Label priority="primary">Password</Label>
              <Input
                name="password"
                onChange={(event) => console.info('On input change')}
                type="password"
                priority="primary"
              />
              <Button
                style={{ marginTop: '20px' }}
                onClick={() => {}}
                text="Sign in"
                priority="primary"
              />
            </FormBlock>
          </Surface>
        </div>
      </block.S>
    )}
  </State>
</Playground>

Props

NameTypeDefaultDescription
childrenReact.ReactNodePass any content as a children property within HeaderPanel component.
prioritystring'secondary'Priority prop to style HeaderPanel component