Action Group

Overview

Action Group organizes and groups Actions housed in an Action Bar or Action Pad.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
columnscolumnsIndicates number of columns.1 | 2 | 3 | 4 | 5 | 6
expandedexpandedWhen true, the component is expanded.booleanfalse
labellabelAccessible name for the component.string
menuFlipPlacementsSpecifies the component's fallback menu placement when it's initial or specified placement has insufficient space available.Array<"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start">
menuOpenmenu-openWhen true, the calcite-action-menu is open.booleanfalse
menuPlacementmenu-placementDetermines where the action menu will be positioned."auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start"
messageOverridesUse this property to override individual strings used by the component.{ more?: string; }
overlayPositioningoverlay-positioningDetermines 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"
scalescaleSpecifies the size of the calcite-action-menu."l" | "m" | "s""m"

Slots

NameDescription
default (unnamed)A slot for adding a group of calcite-actions.
menu-actionsA slot for adding an overflow menu with calcite-actions inside a calcite-dropdown.
menu-tooltipA slot for adding a calcite-tooltip for the menu.

Styles

NameDescription
--calcite-action-background-colorSpecifies the component's background color.
--calcite-action-group-border-colorSpecifies the component's border color when used in a calcite-action-bar or calcite-action-menu.
--calcite-action-group-columnsWhen layout is "grid", specifies the component's grid-template-columns.
--calcite-action-group-gapWhen layout is "grid", specifies the component's gap.
--calcite-action-group-padding
deprecated Use --calcite-action-group-gap. Specifies the component's padding.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close