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.
When action buttons exist in the actionbar, the lotusActionBar class and the lotusBtnContainer class sit on the same container div.
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.
When buttons are in the action bar along with other controls, the styles in lotusButtonContainer and lotusActionBar are combined by applying both classes to the wrapper div. This was the simplest way of getting buttons to look correct when combined with other controls (such as the display control).