Action Bar

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:

1
2
3
4
5
6
7
8
9
10
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

3 samples
1
2
3
4
5
6
7
<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>
v3.0.2

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the selected calcite-action.
EnterPresses the selected calcite-action.
TabMove focus to next non-disabled calcite-action. If the currently focused step is the last step, the focus will leave the component.
Tab and ShiftMove 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

PropertyAttributeDescriptionTypeDefault
actionsEndGroupLabelactions-end-group-labelSpecifies the accessible label for the last calcite-action-group.string
expandDisabledexpand-disabledWhen true, the expand-toggling behavior is disabled.booleanfalse
expandedexpandedWhen true, the component is expanded.booleanfalse
layoutlayoutSpecifies the layout direction of the actions."horizontal" | "vertical""vertical"
messageOverridesUse this property to override individual strings used by the component.{ expand?: string; collapse?: string; expandLabel?: string; collapseLabel?: string; }
overflowActionsDisabledoverflow-actions-disabledDisables automatically overflowing calcite-actions that won't fit into menus.booleanfalse
overlayPositioningoverlay-positioningDetermines 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"
positionpositionArranges the component depending on the element's dir property."end" | "start"
scalescaleSpecifies the size of the expand calcite-action."l" | "m" | "s""m"

Slots

NameDescription
default (unnamed)A slot for adding calcite-actions that will appear at the top of the component.
bottom-actions
deprecated Use the "actions-end" slot instead. A slot for adding calcite-actions that will appear at the bottom of the component, above the collapse/expand button.
actions-endA slot for adding calcite-actions that will appear at the end of the component, prior to the collapse/expand button.
expand-tooltipA slot to set the calcite-tooltip for the expand toggle.

Styles

NameDescription
--calcite-action-bar-expanded-max-widthWhen layout is "vertical", specifies the component's maximum width.
--calcite-action-bar-items-spaceSpecifies the space between slotted components in the component.

Events

NameDescriptionBehavior
calciteActionBarToggleFires when the expanded property is toggled.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close