import "@arcgis/map-components/components/arcgis-expand";- Inheritance:
- ArcgisExpand→
PublicLitElement
- Since
- ArcGIS Maps SDK for JavaScript 4.28
Expand acts as a clickable button for displaying interactive content, most commonly other components.
Demos
Example
<arcgis-map item-id="45b3b2fb35e94ab09381d0caa0da5946"> <arcgis-expand slot="top-right"> <arcgis-layer-list></arcgis-layer-list> </arcgis-expand></arcgis-map>Properties
| Property | Attribute | Type |
|---|---|---|
auto-collapse | ||
auto-destroy-disabled | ||
close-on-esc-disabled | boolean | ((event: KeyboardEvent) => boolean) | |
collapseIcon reflected | collapse-icon | |
collapse-tooltip | ||
expanded reflected | expanded | |
expandIcon reflected | expand-icon | |
expand-tooltip | ||
focus-trap-disabled | ||
group | ||
icon-number | ||
label | ||
| ||
mode | "auto" | "drawer" | "floating" | |
placement | Panel["menuPlacement"] | undefined | |
reference-element | ||
state readonly | | |
top-layer-disabled | ||
| LinkChartView | MapView | SceneView | null | undefined | |
visual-scale | Action["scale"] |
autoDestroyDisabled
- Type
- 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
closeOnEscDisabled
- Type
- boolean | ((event: KeyboardEvent) => boolean)
- Since
- ArcGIS Maps SDK for JavaScript 4.34
When true, the Expand component will not close itself if the Escape key is pressed while its content has keyboard focus.
This property can also be set to a function that returns a boolean, allowing for more customization for when to allow the
Expand component to be closed via the Escape key.
- Attribute
- close-on-esc-disabled
- Default value
- false
Examples
<arcgis-expand slot="top-right" close-on-esc-disabled> <arcgis-search></arcgis-search></arcgis-expand><arcgis-expand slot="top-right"> <arcgis-search></arcgis-search></arcgis-expand>
<script> const expandElement = document.querySelector("arcgis-expand"); const searchElement = document.querySelector("arcgis-search"); // don't close the expand if the search is active expandElement.closeOnEscDisabled = () => searchElement.activeMenu !== "none";</script> collapseIcon
- Type
- IconName
Calcite icon used to style the Expand when it can be collapsed.
- See also
- Attribute
- collapse-icon
- Default value
- "chevrons-right"
collapseTooltip
- Type
- string
Tooltip to display to indicate the Expand can be collapsed.
- Attribute
- collapse-tooltip
- Default value
- "Collapse" (English locale)
expanded
- Type
- boolean
Indicates whether the component is currently expanded or not.
- Attribute
- expanded
- Default value
- false
expandTooltip
- Type
- string
Tooltip to display to indicate Expand can be expanded.
- Attribute
- expand-tooltip
- Default value
- "Expand" (English locale)
focusTrapDisabled
- Type
- boolean
Whether the user's keyboard focus should be trapped in the expanded panel state. If true, tabbing
forward or backward will cycle through elements only within the panel content.
- Attribute
- focus-trap-disabled
- Default value
- false
group
This value associates two or more Expand components with each other, allowing one component to auto collapse when another in the same group is expanded. For auto collapsing to take effect, all components in the group must be included in the same Map, Scene, or Link Chart component.
For example, if you place multiple Expand components in the top-left slot of the Map, you can assign them to a
group called top-left. If one Expand component is expanded and the user clicks on a different component in the
top-left group, then the first component is collapsed, allowing the content of the second component to be
fully visible.
- Attribute
- group
Example
<arcgis-map basemap="topo-vector"> <arcgis-expand slot="top-left" group="top-left" expanded> <arcgis-layer-list></arcgis-layer-list> </arcgis-expand> <arcgis-expand slot="top-left" group="top-left"> <arcgis-basemap-gallery></arcgis-basemap-gallery> </arcgis-expand></arcgis-map> iconNumber
- Type
- number
A number to display at the corner of the component to indicate the number of, for example, open issues or unread notices.
- Attribute
- icon-number
- Default value
- 0
mode
- Type
- "auto" | "drawer" | "floating"
The mode in which the component displays. These modes are listed below:
auto: This is the default mode. It is responsive to browser size changes and will update based on whether the component is viewed in a desktop or mobile application.floating: Use this mode if you wish to always display the component as floating in a Calcite Popover component regardless of browser size.drawer: Use this mode if you wish to always display the component in a Calcite Sheet component regardless of browser size.
- Attribute
- mode
- Default value
- "auto"
placement
- Type
- Panel["menuPlacement"] | undefined
The placement used by the Calcite Popover when the component is expanded.
This property has no effect when the component is in drawer mode.
- Attribute
- placement
referenceElement
- Type
- ArcgisReferenceElement | string | undefined
By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
- Attribute
- reference-element
state
- Type
- ExpandState
- Since
- ArcGIS Maps SDK for JavaScript 4.34
The current state of the component.
- Default value
- "disabled"
topLayerDisabled
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 5.0
When true, disables rendering in the top layer (above overlays and modals). This can be useful for controlling stacking context in complex UI layouts.
- Attribute
- top-layer-disabled
- Default value
- false
view
- Type
- LinkChartView | MapView | SceneView | null | undefined
The view associated with the component.
Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-expand component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
collapse(): Promise<void> | |
componentOnReady inherited | componentOnReady(): Promise<this> |
destroy(): Promise<void> | |
expand(): Promise<void> |
componentOnReady
- Signature
-
componentOnReady (): Promise<this>
Creates a promise that resolves once the component is fully loaded.
- Returns
- Promise<this>
Example
const arcgisExpand = document.querySelector("arcgis-expand");document.body.append(arcgisExpand);await arcgisExpand.componentOnReady();console.log("arcgis-expand is ready to go!");Events
| Name | Type |
|---|---|
| CustomEvent<{ name: "expanded"; }> | |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "expanded"; }> Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void> Emitted when the component associated with a map or scene view is ready to be interacted with.