Action Bar is composed of Actions which are typically used for core operations in the interface.
Overview
The design of Action Bar accommodates actions in a vertical layout. Built from a group of Actions, the Action Bar handles props like positioning, light/dark modes, and expansion controls.
Action Bar was created to be placed on the left or right edge of the interface. For a floating group of Actions, please consider Action Pad.
When using Action Bar, its parent should use the CSS Flexbox layout, like so:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
}
Usage
- Core functions and menus in an application
- Toolbar for the interface
- Set of Actions in a focused view
Sample
<calcite-action-bar>
<calcite-action text="Add" icon="plus"></calcite-action>
<calcite-action text="Save" icon="save"></calcite-action>
<calcite-action text="Undo" icon="undo"></calcite-action>
<calcite-action text="Redo" icon="redo"></calcite-action>
<calcite-tooltip slot="expand-tooltip">Toggle Action Bar</calcite-tooltip>
</calcite-action-bar>
Accessibility
Keyboard navigation
Key | Function |
---|---|
Space | Presses the selected calcite-action . |
Enter | Presses the selected calcite-action . |
Tab | Move focus to next non-disabled calcite-action . If the currently focused step is the last step, the focus will leave the component. |
Tab and Shift | Move focus to previous non-disabled calcite-action . If the currently focused step is the first step, the focus will leave the component. |
Writing and copy
Refer to Action for writing and copy guidelines.
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
actionsEndGroupLabel | actions-end-group-label | Specifies the accessible label for the last calcite-action-group . | string | |
expandDisabled | expand-disabled | When true , the expand-toggling behavior is disabled. | boolean | false |
expanded | expanded | When true , the component is expanded. | boolean | false |
layout | layout | Specifies the layout direction of the actions. | "horizontal" | "vertical" | "vertical" |
messageOverrides | Use this property to override individual strings used by the component. | {
expand?: string;
collapse?: string;
expandLabel?: string;
collapseLabel?: string;
} | ||
overflowActionsDisabled | overflow-actions-disabled | Disables automatically overflowing calcite-action s that won't fit into menus. | boolean | false |
overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed" . | "absolute" | "fixed" | "absolute" |
position | position | Arranges the component depending on the element's dir property. | "end" | "start" | |
scale | scale | Specifies the size of the expand calcite-action . | "l" | "m" | "s" | "m" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-action s that will appear at the top of the component. |
bottom-actions | "actions-end" slot instead. A slot for adding calcite-action s that will appear at the bottom of the component, above the collapse/expand button. |
actions-end | A slot for adding calcite-action s that will appear at the end of the component, prior to the collapse/expand button. |
expand-tooltip | A slot to set the calcite-tooltip for the expand toggle. |
Styles
Name | Description |
---|---|
--calcite-action-bar-expanded-max-width | When layout is "vertical" , specifies the component's maximum width. |
--calcite-action-bar-items-space | Specifies the space between slotted components in the component. |
Events
Name | Description | Behavior |
---|---|---|
calciteActionBarToggle | Fires when the expanded property is toggled. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |