The Tray UI element (IWDTray) is a UI element container like the Group UI element container and can be used to group a set of UI elements under one common title. Unlike the Group UI element it provides additional functions. For example, the Tray UI element can be displayed or hidden.
A Tray UI element may have an optional menu represented by the menu element. A toolbar can be inserted as well - see Toolbar.
The following graphic shows how the UI element is displayed when a Menu UI element and a UI element are used within the Tray UI element.
● accessibilityDescription
When accessibility is activated, the assigned text is added to the tooltip. This description provides semantic details of the UI element and is only read by the screen reader if the user focuses the complete Ul element.
● defaultButtonId
Specifies the ID of the assigned default button.
● design
Describes the appearance of the Tray UI element. The designproperty can take the following values and is represented by enumeration type WDTrayDesign.
fill |
The content area appears with a background color. |
plain |
The content area appears with a white background and a frame. |
transparent |
The background is transparent; the content area appears without a frame. |
● expanded
Specifies whether the Tray UI element is expanded. The value false only shows a header with the expand icon. The toolbar and content area are invisible in this state. Pressing the button expands the Tray UI element and the expand button and the expand button changes to a collapse button.
● hasContentPadding
Specifies whether there is a padding between the content area and the tray border.
● height
Determines the height of the Tray, which you can specify in relative CSS units like em or ex.
● scrollingMode
Specifies how
the scroll bar appears within the UI element container.
The scrollingMode property can be filled with the following
values and is represented by the enumeration type WDScrollingMode.
auto |
The scroll bar within the container is activated automatically. |
both |
A vertical and horizontal scroll bar are activated. |
none |
Scrolling within the text context is not possible. |
● width
Determines the width of the Tray. You can specify this in CSS sizes, such as em, ex, pixels or percentage values.
Name |
Interface |
Type |
Initial Value |
Bindable |
Value Required |
accessibilityDescription |
IWDScrollContainer |
String (Translatable Text) |
|
bindable |
No |
defaultButtonId |
IWDScrollContainer |
String |
|
bindable |
No |
design |
IWDTray |
WDTrayDesign |
transparent |
bindable |
No |
enabled |
IWDUIElement |
boolean |
true |
bindable |
No |
expanded |
IWDTray |
boolean |
true |
bindable |
No |
hasContentPadding |
IWDTray |
boolean |
true |
bindable |
No |
height |
IWDUIElementContainer |
String (CSS size) |
|
bindable |
No |
scrollingMode |
IWDScrollContainer |
WDScrollingMode |
none |
bindable |
No |
tooltip |
IWDUIElement |
String (TranslatableText) |
|
bindable |
No |
visible |
IWDUIElement |
WDVisibility |
visible |
bindable |
No |
width |
IWDUIElementContainer |
String (CSS size) |
|
bindable |
No |
· The event onToggle is triggered when the user expands or collapses the tray. The event parameter is the new state. The value true means that the tray has been expanded.
Event Parameter |
Type |
expanded |
boolean |
See Parameter Mapping.