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
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Press action |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
Writing and copy
Refer to Action for writing and copy guidelines.
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| expandDisabled | expand-disabled | When set to true, the expand-toggling behavior will be disabled. | truefalse | |
| expanded | expanded | Indicates whether widget is expanded. | truefalse | |
| intlCollapse | intl-collapse | Updates the label of the collapse icon when the component is expanded. | undefined | |
| intlExpand | intl-expand | Updates the label of the expand icon when the component is not expanded. | undefined | |
| layout | layout | Indicates the horizontal or vertical layout of the component. | gridhorizontalvertical (default) | |
| position | position | Arranges the component depending on the elements 'dir' property. | endstart | |
| scale | scale | Specifies the size of the expand action. | lms |
Events
| Name | Description | Detail |
|---|---|---|
| calciteActionPadToggle | Emitted when expanded has been toggled. | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus(focusId?: "expand-toggle") => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding `calcite-action`s to the action pad. |
| expand-tooltip | Used to set the tooltip for the expand toggle. |