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
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Presses the calcite-action. |
Enter | Presses the calcite-action. |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves focus in and out of 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, expands the component and its contents. | boolean | false |
| layout | layout | Specifies the layout of the component. | Extract<"horizontal" | "vertical" | "grid", Layout> | "vertical" |
| messageOverrides | Overrides individual strings used by the component. | Record<string, unknown> | undefined | ||
| overlayPositioning | overlay-positioning | Specifies the type of positioning to use for overlaid content, where:
"absolute" works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
"fixed" is used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | OverlayPositioning | "absolute" |
| position | position | Specifies the position of the component depending on the element's dir property. | Extract<"start" | "end", Position> | |
| scale | scale | Specifies the size of the expand calcite-action. | Scale | "m" |
| selectionAppearance | selection-appearance | Specifies the selection appearance of the component | Extract<"neutral" | "highlight", SelectionAppearance> | "neutral" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-actions to the component. |
| expand-tooltip | A slot to set the calcite-tooltip for the expand toggle. |
Styles
| Name | Description |
|---|---|
| --calcite-action-pad-corner-radius | Specifies the component's border radius. |
| --calcite-action-pad-expanded-max-width | When expanded and layout is "vertical", specifies the component's maximum width. |
| --calcite-action-pad-items-space | Specifies the component's space between slotted components. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteActionPadCollapse | Fires when the component's content area is collapsed. | |
| calciteActionPadExpand | Fires when the component's content area is expanded. | |
| calciteActionPadToggle | Fires when the expanded property is toggled. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |