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
<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>
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-action s 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> |