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, the component is expanded. | boolean | false |
| layout | layout | Indicates the layout of the component. | "grid" | "horizontal" | "vertical" | "vertical" |
| messageOverrides | Use this property to override individual strings used by the component. | {
expand?: string;
collapse?: string;
expandLabel?: string;
collapseLabel?: string;
} | ||
| overlayPositioning | overlay-positioning | Determines 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" |
| position | position | Arranges the component depending on the element's dir property. | "end" | "start" | |
| scale | scale | Specifies the size of the expand calcite-action. | "l" | "m" | "s" | "m" |
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 layout is "vertical", specifies the component's maximum width when expanded. |
| --calcite-action-pad-items-space | Specifies the component's space between slotted components. |
Events
| Name | Description | Behavior |
|---|---|---|
| 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<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |