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 | Indicates number of columns. | 1 | 2 | 3 | 4 | 5 | 6 | |
expanded | expanded | When true , the component is expanded. | boolean | false |
label | label | Accessible name for the component. | string | |
menuFlipPlacements | Specifies 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"> | ||
menuOpen | menu-open | When true , the calcite-action-menu is open. | boolean | false |
menuPlacement | menu-placement | Determines 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" | |
messageOverrides | Use this property to override individual strings used by the component. | { more?: 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" |
scale | scale | Specifies the size of the calcite-action-menu . | "l" | "m" | "s" | "m" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding a group of 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. |
--calcite-action-group-padding | --calcite-action-group-gap . Specifies the component's padding. |
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> |