require(["esri/widgets/LayerList/ListItemPanel"], (ListItemPanel) => { /* code goes here */ });
import ListItemPanel from "@arcgis/core/widgets/LayerList/ListItemPanel.js";
esri/widgets/LayerList/ListItemPanel
This class allows you to display custom content for each ListItem in the LayerList widget. ListItemPanel objects typically aren't constructed. Rather, they are modified using the listItemCreatedFunction property in the LayerList widget.
A common scenario for using ListItemPanel is to display a Legend widget within each list item.
- See also
const layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event){
const item = event.item;
// displays the legend for each layer list item
item.panel = {
content: "legend"
};
}
});
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
String | Adds a CSS class used to style a node that represents the panel. more details | ListItemPanel | |
Widget|HTMLElement|String|Array | The content displayed in the ListItem panel. more details | ListItemPanel | |
Boolean | If | ListItemPanel | |
String | The URL or data URI of an image used to represent the panel. more details | ListItemPanel | |
ListItem | The panel's parent ListItem that represents a layer in the map. more details | ListItemPanel | |
Boolean | Indicates if the panel's content is open and visible to the user. more details | ListItemPanel | |
String | The title of the panel. more details | ListItemPanel | |
Boolean | Indicates if the node containing the image or icon font is visible to the user. more details | ListItemPanel |
Property Details
-
className String
-
Adds a CSS class used to style a node that represents the panel. Clicking the node will open and close the panel. Typically, an icon font is used for this property. Esri Icon Fonts are automatically made available and can be used to represent this content. To use one of these provided icon fonts, you must prefix the class name with
esri-
. For example, the default icon font isesri-icon-layer-list
.- Default Value:esri-icon-layer-list
-
-
The content displayed in the ListItem panel. This can be raw text, a Widget instance, an HTML Element, or an array of any of those elements.
If the text
legend
is used, then an instance of the Legend widget is placed in the content.Exampleconst layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; // displays the legend for each layer list item item.panel = { content: "legend" }; } });
-
disabled BooleanSince: ArcGIS Maps SDK for JavaScript 4.25
-
If
true
, disables the ListItem's panel so the user cannot open or interact with it. The panel will be disabled by default if it does not have content or if it contains a legend with no active content in it.Exampleconst layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; if (!item.layer.visible){ item.panel.disabled = true; } } });
-
image String
-
The URL or data URI of an image used to represent the panel. This property will be used as a background image for the node. If neither
image
norclassName
are specified, a default iconwill display.
-
listItem ListItem
-
The panel's parent ListItem that represents a layer in the map.
-
open Boolean
-
Indicates if the panel's content is open and visible to the user. This is different from the visible property, which is used for toggling the visibility of the icon used to control whether the content is expanded or collapsed.
- Default Value:false
Exampleconst layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; // displays the legend for each layer list item // The legend is open by default, but the user // is prevented from collapsing that content item.panel = { content: "legend", open: true, visible: false }; } });
-
title String
-
The title of the panel. By default, this title matches the ListItem's title. Changing this value will not change the title of the ListItem in the LayerList.
-
visible Boolean
-
Indicates if the node containing the image or icon font is visible to the user. Setting this value to
false
will prevent the user from toggling the visibility of the panel's content. Use open to programmatically set the visibility of the panel's content.- Default Value:true
Exampleconst layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; // displays the legend for each layer list item // The legend is open by default, but the user // is prevented from collapsing that content item.panel = { content: "legend", open: true, visible: false }; } });