Version: latest

DropdownList

<Dropdownlist> on lumin

Description

The DropDownList creates a vertical drop-down list box. Single or multiple items can be selected from a DropDownList. Drop-down lists can be flat or nested. When you create nested drop-down lists, only the parent list and the current list are visible at the same time. Drop-down lists that overflow are automatically styled to show that there are more selections.

Example

import React from "react";
import { View, DropdownList, DropdownListItem, LinearLayout, Text, Scene, Prism } from "magic-script-components";
export default class MyApp extends React.Component {
constructor(props) {
super(props);
this.stateList = [
"New",
"In Progress",
"On Hold",
"Resolved",
"Closed",
"Canceled"
];
this.state = { selectedState: "Select" };
}
onSelectedStateChanged = event => {
if (event.SelectedItems.length > 0) {
const item = event.SelectedItems[0];
this.setState({ selectedState: item.label });
}
};
render() {
const { selectedState } = this.state;
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" localPosition={this.props.localPosition} >
<LinearLayout
alignment={'center-center'}
defaultItemAlignment={'center-center'}
defaultItemPadding={[0.03, 0.03, 0.03, 0.03]}
orientation={'horizontal'}
>
<Text textSize={0.03}>State:</Text>
<DropdownList
textSize={0.03}
text={selectedState}
onSelectionChanged={this.onSelectedStateChanged}
>
{this.stateList.map((item, index) => (
<DropdownListItem key={item} id={index} label={item} />
))}
</DropdownList>
</LinearLayout>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
textstringn/aNThe UTF-8 encoded text to initially set the drop-down list label to.

Element Properties

NameTypeDefault ValueDescription
iconSizenumbern/aSets the button icon size in scene units.
iconColorvec4n/aSets the RGBA color of the button icon.
listMaxHeightnumber0Sets the maximum height of a drop-down list. The default value (0) indicates there is no limit and the list grows as long as it needs to. Setting a value greater than zero will set the maximum height such that if a list is larger than the maxiumum height, the list content scrolls.
listTextSizenumber0.025Sets the size of the list text. If no size set, the list uses the same text size used in the drop-down list menu button itself. If no text is present on the menu button, the default text size is used.
maxCharacterLimitnumbern/aSets the maximum amount of characters to be used per list item label before adding '...'. The default character limit is 0, which means there is no limit and the labels scale to the largest item.
multiSelectbooleanfalseSets the multi-select mode of the drop-down list.
showListbooleanfalseShows the drop-down list or not.
selectedobjectn/aSets the selected state of a DropDownListItem. This uses the ID set for a particular DropDownListItem, which should be unique. If the ID is not unique, the first item with that ID is set. State are updated upon closing and reopening the list when the list is visible.

selected

{
id: <number>,
selected: <boolean>
}