bpk-component-navigation-bar

4.2.2 • Public • Published

bpk-component-navigation-bar

Backpack navigation bar component.

Installation

npm install bpk-component-navigation-bar --save-dev

Usage

BpkNavigationBar

import React from 'react';
import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
import { withRtlSupport } from 'bpk-component-icon';

import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';

const ArrowIconWithRtl = withRtlSupport(ArrowIcon);

export default () => (
  <BpkNavigationBar
    title="Backpack"
    leadingButton={
      <BpkNavigationBarIconButton
        onClick={() => {}}
        icon={ArrowIconWithRtl}
        label="back"
      />
    }
    trailingButton={
      <BpkNavigationBarButtonLink onClick={() => {}}>Done</BpkNavigationBarButtonLink>
    }
  />
)

Props

Property PropType Required Default Value
id string true -
title node true -
className string false null
leadingButton element false null
trailingButton element false null
sticky bool false false

Theme props

  • navigationBarBackgroundColor
  • navigationBarTitleColor

BpkNavigationBarIconButton

import React from 'react';
import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
import { BpkNavigationBarIconButton } from 'bpk-component-navigation-bar';

export default () => (
  <BpkNavigationBarIconButton
    onClick={() => {}}
    icon={ArrowIcon}
    label="back"
  />
)

Props

Property PropType Required Default Value
icon func true -
onClick func true -
label string true -
className string false null

Theme props

  • navigationBarIconButtonColor
  • navigationBarIconButtonActiveColor
  • navigationBarIconButtonHoverColor

BpkNavigationBarButtonLink

import React from 'react';
import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';

export default () => (
  <BpkNavigationBarButtonLink onClick={() => {}}>
    Done
  </BpkNavigationBarButtonLink>
)

Props

Property PropType Required Default Value
children node true -
onClick func true -
className string false null

Theme props

  • navigationBarButtonLinkColor
  • navigationBarButtonLinkActiveColor
  • navigationBarButtonLinkHoverColor
  • navigationBarButtonLinkVisitedColor

Readme

Keywords

none

Package Sidebar

Install

npm i bpk-component-navigation-bar

Weekly Downloads

799

Version

4.2.2

License

Apache-2.0

Unpacked Size

43 kB

Total Files

21

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • tiagohngl