Overview
Action Group organizes and groups Actions housed in an Action Bar or Action Pad.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| columns | columns | Specifies the number of columns. | Columns | undefined | |
| expanded | expanded | When true, expands the component and its contents. | boolean | false |
| label | label | Specifies an accessible label for the component. | string | undefined | |
| menuFlipPlacements | Specifies the component's fallback menuPlacement when it's initial or specified menuPlacement has insufficient space available. | FlipPlacement[] | undefined | ||
| menuOpen | menu-open | When true, the calcite-action-menu is open. | boolean | false |
| menuPlacement | menu-placement | Specifies the position of the action menu. | LogicalPlacement | undefined | |
| messageOverrides | Overrides individual strings used by the component. | Record<string, unknown> | undefined | ||
| overflowActionsDisabled | overflow-actions-disabled | When true, the component's actions will not be overflowed into a menu by a parent calcite-action-bar. | boolean | false |
| 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" |
| scale | scale | Specifies the size of the calcite-action-menu. | Scale | "m" |
| selectedActions | Specifies the active actions in the group. | Action[] | ||
| selectionMode | selection-mode | Specifies the selection mode of the component, where:
"multiple" allows any number of selections,
"single" allows only one selection,
"single-persist" allows one selection and prevents de-selection, and
"none" disables selection (default). | Extract<"single" | "single-persist" | "multiple" | "none", SelectionMode> | "none" |
| topLayerDisabled | top-layer-disabled | When true and the component is open, disables top layer placement.
Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components. | boolean | false |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-actions. |
| menu-actions | A slot for adding an overflow menu with calcite-actions inside a calcite-dropdown. |
| menu-tooltip | A slot for adding a calcite-tooltip for the menu. |
Styles
| Name | Description |
|---|---|
| --calcite-action-background-color | Specifies the component's background color. |
| --calcite-action-group-border-color | Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu. |
| --calcite-action-group-columns | When layout is "grid", specifies the component's grid-template-columns. |
| --calcite-action-group-gap | When layout is "grid", specifies the component's gap. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Creates a promise that resolves once the component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |