Action Bar
The action bar sits above the main content and contains buttons that allow you to perform actions related to the content. It can also contain a set of display controls that allows you to view the content in a collapsed or expanded view. A search tab (find) component can be used in an action bar and would replace the display controls.
Classes
- lotusActionBar - used in most cases.
- lotusActionBar2 - this is an optional alternate class that can be used when you want to compress whitespace above the action bar.
Basic Implementation
Create a div that sits above your main content and assign it a class of lotusActionBar. Inside this div place any action buttons, display controls, or the searchTab component.
Variations
lotusActionBar2 is used when you only have a header with text only and a set of view controls with no action buttons, to collapse the whitespace (it brings the buttons/display controls closer to the header.) An example of this is found here.
Accessibility
None needed for the action bar itself. Refer to components found inside the action bar for their accessibility requirements.
Examples
Sample HTML
CSS (actionBar.css)
This component began as a plain container for the controls at the top of a table.
lotusActionBar2 was created to allow for compressed whitespace when the action bar sat below a plain header and there were no action buttons above the table.
Originally, when buttons were in the action bar along with other controls, the styles in lotusBtnContainer and lotusActionBar were combined by applying both classes to the wrapper div. This no longer applies! Do not use lotusBtnContainer on the action bar.