Action Pad

Calcite 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 is designed to be high in the z-axis and should be used for Level 2 interactions. 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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
SpacePress action
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

Writing and copy

Refer to Action for writing and copy guidelines.

API reference

calcite-action-pad
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
expandDisabledexpand-disabled

When set to true, the expand-toggling behavior will be disabled.

booleanA boolean property should be present, or not
truefalse
expandedexpanded

Indicates whether widget is expanded.

booleanA boolean property should be present, or not
truefalse
intlCollapseintl-collapse

Updates the label of the collapse icon when the component is expanded.

optional
stringA custom string
undefined
intlExpandintl-expand

Updates the label of the expand icon when the component is not expanded.

optional
stringA custom string
undefined
layoutlayout

Indicates the horizontal or vertical layout of the component.

typedChoose from a set of typed values
gridhorizontalvertical (default)
positionposition

Arranges the component depending on the elements 'dir' property.

typedChoose from a set of typed values
endstart
scalescale

Specifies the size of the expand action.

typedChoose from a set of typed values
lms

Events

NameDescriptionDetail
calciteActionPadToggle

Emitted when expanded has been toggled.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus(focusId?: "expand-toggle") => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-action`s to the action pad.

expand-tooltip

Used to set the tooltip for the expand toggle.

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