@astrouxds/rux-global-status-bar v5.3.0

Global Status Bar

The Global Status Bar is a full width view across the top of an application — an area commonly reserved for global status, global command and top-level navigation. The Global Status Bar often includes: Application Name, Monitoring Icons, Top Level Navigation and an Emergency Button.

Guidelines

• Astro UXDS: Global Status Bar

Web Components Usage

1. Installation

Install the Astro UXDS Global Status Bar package via Command Line (Preferred Method)

npm i -save @astrouxds/rux-global-status-bar

You may use Yarn, NPM, or your Node package manager of choice. The --save flag adds this component as a dependency in your package.json file.

Alternatively, download the Astro UXDS Component Library source to your project.

Via CLI:

git clone https://github.com/RocketCommunicationsInc/astro-components.git

Or, download the Astro UXDS Components as a .zip

2. Import the Astro Global Status Bar Web Component

This example assumes you're using the NPM package in node_modules. Otherwise, import the component using the path to the Astro Components directory in your project.

import { RuxGlobalStatusBar } from '@astrouxds/rux-global-status-bar/rux-global-status-bar.js'

3. Render the Astro Global Status Bar Web Component

Pass properties as attributes of the Astro Global Status custom element:

 <rux-global-status-bar appname="Astro App" version="3.0"></rux-global-status-bar>

Status bar elements like the Clock, Tabs and Buttons and even plain HTML can be inserted into the body of the Global Status Bar using the component’s slot.

 <rux-global-status-bar class="dark-theme" appname="Astro App" version="3.0">
	 <rux-clock></rux-clock>
	 <div><!-- Any HTML here --></div>
	 <rux-button>Master off</rux-button>
 </rux-global-status-bar>

Properties

Revision History

4.0

• Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.