Action Group | Calcite Design System | Esri Developer

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"`
selectedActionsread-only		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-action`s.
menu-actions	A slot for adding an overflow menu with `calcite-action`s 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.

Events

Name	Description	Behavior
calciteActionGroupChange	Fires after an action's active state changes.	bubblescomposed
calciteActionGroupCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteActionGroupExpand	Fires when the component's content area is expanded.	bubblescomposed

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>`