Expand

1
import "@arcgis/map-components/components/arcgis-expand";

Expand component acts as a clickable button for opening content.

Demo

Properties

PropertyAttributeType
auto-collapse
boolean
auto-destroy-disabled
boolean
close-on-esc
Function | boolean
collapse-icon
string
collapse-tooltip
string
expanded
boolean
expand-icon
string
expand-tooltip
string
focus-trap-enabled
boolean
group
string
icon
string
icon-number
number
label
string
mode
"auto" | "drawer" | "floating"
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
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
reference-element
ArcgisLinkChart | ArcgisMap | ArcgisScene | string

autoCollapse

Property
autoCollapse: boolean

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

Read more...

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.

Read more...

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.

Read more...

Attribute
collapse-icon
Default value
"chevrons-right"

collapseTooltip

Property
collapseTooltip: string

Tooltip to display to indicate Expand widget can be collapsed.

Read more...

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

expanded

Property
expanded: boolean

Indicates whether the widget is currently expanded or not.

Read more...

Attribute
expanded
Default value
false

expandIcon

Property
expandIcon: string

Calcite icon used when the widget is collapsed.

Read more...

Attribute
expand-icon
Default value
"chevrons-left"

expandTooltip

Property
expandTooltip: string

Tooltip to display to indicate Expand widget can be expanded.

Read more...

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

focusTrapEnabled

Property
focusTrapEnabled: boolean

Disables focus trapping within the expand widget.

Read more...

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.

Read more...

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.

Read more...

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.

Read more...

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.

Read more...

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

MethodSignature
collapse(): Promise<void>
componentOnReady(): Promise<void>
destroy(): Promise<void>
expand(): Promise<void>
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

EventType
undefined

arcgisReady

Event
arcgisReady: undefined

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