Expand

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-expand";

Expand component acts as a clickable button for opening content.

Demo

Properties

Property	Attribute	Type
`autoCollapse`	`auto-collapse`	`boolean`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`closeOnEsc`	`close-on-esc`	`Function \| boolean`
`collapseIcon`	`collapse-icon`	`string`
`collapseTooltip`	`collapse-tooltip`	`string`
`expanded`	`expanded`	`boolean`
`expandIcon`	`expand-icon`	`string`
`expandTooltip`	`expand-tooltip`	`string`
`focusTrapEnabled`	`focus-trap-enabled`	`boolean`
`group`	`group`	`string`
`icon`	`icon`	`string`
`iconNumber`	`icon-number`	`number`
`label`	`label`	`string`
`mode`	`mode`	`"auto" \| "drawer" \| "floating"`
`placement`	`placement`	`"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"`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`

autoCollapse

Property

autoCollapse: boolean

Automatically collapses the expand widget instance when the view's viewpoint updates.

Attribute: auto-collapse
Default value: false

autoDestroyDisabled

Property

autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

closeOnEsc

Property

closeOnEsc: Function | boolean

When true, the Expand widget will close after the Escape key is pressed when the keyboard focus is within its content.

Attribute: close-on-esc
Default value: true

collapseIcon

Property

collapseIcon: string

Calcite icon used to style the Expand button when the content can be collapsed.

Attribute: collapse-icon
Default value: "chevrons-right"

collapseTooltip

Property

collapseTooltip: string

Tooltip to display to indicate Expand widget can be collapsed.

Attribute: collapse-tooltip
Default value: "Collapse" (English locale)

expanded

Property

expanded: boolean

Indicates whether the widget is currently expanded or not.

Attribute: expanded
Default value: false

expandIcon

Property

expandIcon: string

Calcite icon used when the widget is collapsed.

Attribute: expand-icon
Default value: "chevrons-left"

expandTooltip

Property

expandTooltip: string

Tooltip to display to indicate Expand widget can be expanded.

Attribute: expand-tooltip
Default value: "Expand" (English locale)

focusTrapEnabled

Property

focusTrapEnabled: boolean

Disables focus trapping within the expand widget.

Attribute: focus-trap-enabled
Default value: false

group

Property

group: string

This value associates two or more Expand widget instances with each other, allowing one instance to auto collapse when another instance in the same group is expanded.

Attribute: group

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.

Attribute: icon
Default value: null

iconNumber

Property

iconNumber: number

A number to display at the corner of the widget to indicate the number of, for example, open issues or unread notices.

Attribute: icon-number

label

Property

label: string

The component's default label.

Attribute: label

mode

Property

mode: "auto" | "drawer" | "floating"

The mode in which the widget displays.

Attribute: mode
Default value: "auto"

placement

Property

placement: "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"

The placement used by the calcite popover when the widget is expanded.

Attribute: placement
Default value: null

position

Property

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Attribute: position
Default value: "top-right"

referenceElement

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

Methods

Method	Signature
`collapse`	`collapse(): Promise<void>`
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`expand`	`expand(): Promise<void>`
`toggle`	`toggle(): Promise<void>`

collapse

Method

collapse(): Promise<void>

Returns: Promise<void>

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

expand

Method

expand(): Promise<void>

Returns: Promise<void>

toggle

Method

toggle(): Promise<void>

Returns: Promise<void>

Events

Event	Type
`arcgisReady`	`undefined`

arcgisReady

Event

arcgisReady: undefined

Emitted when the component associated with a map view is is ready to be interacted with.