Neoclassical Programming Multitude

    bpk-component-navigation-bar

    3.1.10 • 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

    Keywords

    none

    Install

    npm i bpk-component-navigation-bar

    DownloadsWeekly Downloads

    646

    Version

    3.1.10

    License

    Apache-2.0

    Unpacked Size

    42.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • frugoman
    • zgeor
    • anambl
    • marianeumayer-skyscanner
    • ojcurt
    • tiagohngl