No Particular Method

    @workday/canvas-kit-react-action-bar
    TypeScript icon, indicating that this package has built-in type declarations

    4.8.1 • Public • Published

    Canvas Kit Action Bar

    Full width toolbar fixed to bottom of screen.

    Although not required, buttons are often used in in action bars. The primary action button should be left aligned followed by secondary buttons. The primary button is on the right only in task orchestration and on mobile devices.

    Installation

    yarn add @workday/canvas-kit-react

    or

    yarn add @workday/canvas-kit-react-action-bar

    Usage

    import * as React from 'react';
    import {Button} from '@workday/canvas-kit-react-button';
    import {ActionBar} from '@workday/canvas-kit-react-action-bar';
    
    <ActionBar>
      <Button variant={ButtonVariant.Primary}>Button</Button>
      <Button>Button</Button>
      <Button>Button</Button>
    </ActionBar>;

    Static Properties

    None

    Component Props

    Required

    None

    Optional

    fixed: boolean

    Fixes the toolbar to the bottom of the window (uses position: fixed)

    Responsive Behavior

    At 575px, responsive styles will take effect:

    • Applies a flex box to the buttons
    • Makes single-button groups full width
    • All buttons will become the same width (flex: 1).
    • Button order will become reversed, making left-aligned primary buttons right-aligned.

    When on a mobile form factor, the button placement should flip to have the primary button on the far right.

    Install

    npm i @workday/canvas-kit-react-action-bar

    DownloadsWeekly Downloads

    578

    Version

    4.8.1

    License

    Apache-2.0

    Unpacked Size

    24.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls