Action Pad

Action Pad is a floating group of Actions that is typically placed on a map or imagery.

Overview

Action Pad accommodates for horizontal and vertical layouts that can be expanded to show text labels. Distinct from Action Bar, Action Pad has rounded corners and box-shadows and should be positioned above other content. Built from a group of Actions, the Action Pad handles props like positioning, light/dark modes, and expand controls.

Action Pad was created to be placed on a map, or floating by itself in an area of the interface. For a flush inline group of Actions, please consider Action Bar.

Usage

  • Editing tools
  • Drawing/polygon tools
  • Zoom and various map controls

Sample

6 samples
1
2
3
4
5
6
7
<calcite-action-pad>
    <calcite-action text="Add" icon="plus"></calcite-action>
    <calcite-action text="Save" icon="save"></calcite-action>
    <calcite-action text="Layers" icon="layers"></calcite-action>
    <calcite-action text="Basemaps" icon="layer-basemap"></calcite-action>
    <calcite-tooltip slot="expand-tooltip">Toggle Action Bar</calcite-tooltip>
</calcite-action-pad>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the calcite-action.
EnterPresses the calcite-action.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of 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
layoutlayoutIndicates the layout of the component."grid" | "horizontal" | "vertical""vertical"
messageOverridesUse this property to override individual strings used by the component.{ expand?: string; collapse?: string; expandLabel?: string; collapseLabel?: string; }
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 to the component.
expand-tooltipA slot to set the calcite-tooltip for the expand toggle.

Styles

NameDescription
--calcite-action-pad-corner-radiusSpecifies the component's border radius.
--calcite-action-pad-expanded-max-widthWhen layout is "vertical", specifies the component's maximum width when expanded.
--calcite-action-pad-items-spaceSpecifies the component's space between slotted components.

Events

NameDescriptionBehavior
calciteActionPadToggleFires 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