Expand

Automatically collapses the Expand component when the viewpoint updates.

Attribute

auto-collapse

Default value

false

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

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.

Examples

1
2
3
<arcgis-expand slot="top-right" close-on-esc-disabled>
  <arcgis-search></arcgis-search>
</arcgis-expand>

1
2
3
4
5
6
7
8
9
10
<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>

Attribute

close-on-esc-disabled

Default value

false

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

See also

• Calcite Icon Search

Attribute

collapse-icon

Default value

"chevrons-right"

Tooltip to display to indicate the Expand can be collapsed.

Attribute

collapse-tooltip

Default value

"Collapse" (English locale)

Indicates whether the component is currently expanded or not.

Attribute

expanded

Default value

false

Calcite icon used to style the Expand when it can be expanded. The component will automatically use the icon of the component placed within the Expand if it has one.

See also

• Calcite Icon Search

Attribute

expand-icon

Default value

"chevrons-left"

Tooltip to display to indicate Expand can be expanded.

Attribute

expand-tooltip

Default value

"Expand" (English locale)

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

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-enabled

Default value

false

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.

Example

1
2
3
4
5
6
7
8
<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>

Attribute

group

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

The component's default label.

Attribute

label

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

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"

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

Attribute

position

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.

See also

• Associate components with a Map or Scene component

Attribute

reference-element

The current state of the component.

Attribute

state

Default value

"disabled"

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 view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Expand component will be associated with a map or scene component rather than using the view property.

Collapse the component.

Returns

Promise<void>

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisExpand = document.querySelector("arcgis-expand");
document.body.append(arcgisExpand);
await arcgisExpand.componentOnReady();
console.log("arcgis-expand is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Expand the component.

Returns

Promise<void>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

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