require(["esri/views/ui/UI"], function(UI) { /* code goes here */ });
Class: esri/views/ui/UI
Inheritance: UI Accessor
Subclasses: DefaultUI
Since: ArcGIS API for JavaScript 4.0

This class provides a simple interface for adding, moving and removing components from a view's user interface (UI). In most cases, you will work with the view's DefaultUI which places default widgets, such as Zoom and Attribution in the View.

The UI class provides the API for easily placing HTML elements and widgets within the view. See DefaultUI for details on working with this class.

See also:

Constructors

new UI(properties)

Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
HTMLElement

The HTML Element that contains the the view.

more details
more detailsUI
String

The name of the class.

more details
more detailsAccessor
Number

The height of the UI container.

more details
more detailsUI
Object | Number

Defines the padding for the UI from the top, left, right, and bottom sides of the container or View.

more details
more detailsUI
MapView | SceneView

The view associated with the UI components.

more details
more detailsUI
Number

The width of the UI container.

more details
more detailsUI

Property Details

containerHTMLElement

The HTML Element that contains the the view.

See also:

declaredClassStringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

heightNumberreadonly

The height of the UI container.

paddingObject|Number

Defines the padding for the UI from the top, left, right, and bottom sides of the container or View. If the value is a number, it will be used to pad all sides of the container.

Default Value: { left: 15, top: 15, right: 15, bottom: 15 }
Example:
// Setting a single number to this property
ui.padding = 0;
// is the same as setting it on all properties of the object
ui.padding = { top: 0, left: 0, right: 0, bottom: 0 };

The view associated with the UI components.

widthNumberreadonly

The width of the UI container.

Method Overview

NameReturn TypeSummaryClass

Adds one or more HTML component(s) or widgets to the UI.

more details
more detailsUI

Removes all components from a given position.

more details
more detailsUI

Moves one or more UI component(s) to the specified position.

more details
more detailsUI

Removes one or more HTML component(s) or widgets from the UI.

more details
more detailsUI

Method Details

add(component, position)

Adds one or more HTML component(s) or widgets to the UI.

Parameters:

The component(s) to add to the UI. This can be a widget instance, HTML element, a string value representing a DOM node ID, or an array containing a combination of any of those types. See the example snippets below for code examples. Alternatively, you can pass an array of objects with the following specification.

Specification:

The component to add to the UI. This can be a widget instance, HTML element, a string value representing a DOM node ID.

position String
optional

The position in the view at which to add the component. If not specified, manual is used by default.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

index Number
optional

The placement index of the component. This index shows where to place the component relative to other components. For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.

position String|Object
optional

The position in the view at which to add the component. If not specified, manual is used by default.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

Specification:
position String
optional

The position in the view at which to add the component(s). If not specified, manual is used by default.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

index Number

The placement index of the component(s). This index shows where to place the component relative to other components. For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.

Examples:
var toggle = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view's container.
view.ui.add(toggle, "top-right");
// Adds multiple widgets to the top right of the view
view.ui.add([ compass, toggle ], "top-right");
// Adds multiple components of different types to the bottom left of the view
view.ui.add([ searchWidget, "infoDiv" ], "bottom-left");
// Adds multiple components of various types to different view positions
view.ui.add([
  {
    component: compassWidget,
    position: "top-left",
    index: 0
  }, {
    component: "infoDiv",
    position: "bottom-left"
  }, {
    component: searchWidget,
    position: "top-right",
    index: 0
  }, {
    component: legendWidgetDomNode,
    position: "top-right",
    index: 1
  }
]);

empty(position)

Removes all components from a given position.

Parameter:
position String
optional

The position from which to remove all components. If not specified, manual is used by default.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

Example:
// Removes all of the elements in the top-left of the view's container
// including the default widgets zoom and compass (if working in SceneView)
view.ui.empty("top-left");

move(component, position)

Moves one or more UI component(s) to the specified position.

Parameters:

The component(s) to move. This value can be a widget instance, HTML element, a string value representing a DOM node ID, or an array containing a combination of any of those types. See the example snippets below for code examples. Alternatively, you can pass an array of objects with the following specification.

Specification:

The component to move. This can be a widget instance, HTML element, a string value representing a DOM node ID.

position String
optional

The destination position. The component will be placed in the UI container when not provided. If not specified, manual is used by default.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

position String
optional

The destination position. The component will be placed in the UI container when not provided.

Known Values: top-left | top-right | bottom-left | bottom-right | manual

Examples:
// Moves the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.move(toggle, "bottom-right");
// Moves the default zoom widget to the bottom left corner of the view's container
view.ui.move("zoom", "bottom-left");
// Moves multiple widgets to the bottom right of the view's UI
view.ui.move([ compass, toggle, "zoom" ], "bottom-right");

remove(component)

Removes one or more HTML component(s) or widgets from the UI.

Parameter:

The component(s) to remove from the UI. This can be a widget instance, HTML element, a string value representing a DOM node ID, or an array containing a combination of any of those types. See the example snippets below for code examples.

Examples:
// Removes the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.remove(toggle);
// Removes the default zoom widget from the view's container
view.ui.remove("zoom");
// Removes multiple widgets from the view's UI
view.ui.remove([ compass, toggle, "zoom" ]);

API Reference search results

NameTypeModule

There were no match results from your search criteria.