Default

아래는 드롭다운 컴포넌트의 기본이며 각각의 요소에는 value를 지정할 수 있습니다. (숫자 형태만 가능)

Anchor + Close

만약에 드롭다운에 말풍선 효과를 주고 싶다면 dropdown 태그 안에 anchor 클래스를 가진 태그를 추가하면 됩니다.
그리고 말풍선 효과를 우측으로 하고 싶다면 해당 말풍선 태그에 anchor-right 클래스를 추가하면 됩니다.

Style + Keydown

만약에 드롭다운을 화면 우측에서 보여주게 되면 메뉴의 일부가 가려지는 문제가 발생할 수 있습니다.
이럴 경우에는 margin-left 스타일 값을 음수로 주면 해결 할 수 있습니다.

좌측 마진 값을 조정함으로써 우측 정렬시 드롭다운의 위치를 자연스럽게 맞출 수 있습니다.

<div id="dd_3" class="dropdown dropdown-black" style="margin-left: -15px;">
	<!-- 생략 -->
</div>

keydown 옵션을 true로 주면 키보드 방향키를 통해서도 리스트를 선택할 수 있습니다.

dd_3 = ui.dropdown("#dd_3", {
	keydown: true
});

Update

드롭다운은 마크업 뿐만이 아니라 순수 데이터로도 리스트를 구성할 수 있습니다.

node 템플릿이 설정되어 있다면 아래와 같이 옵션으로 데이터를 설정할 수 있습니다.

dd_4 = ui.dropdown("#dd_4", {
	nodes: [
		{ value: 1, text: "text1" },
		{ value: 2, text: "text2" },
		{ value: 3, text: "text3" }
	]
});

Update 버튼을 클릭하면 드롭다운 리스트를 변경할 수 있습니다.

dd_4.update([
	{ value: 4, text: "text4" },
	{ value: 5, text: "text5" },
	{ value: 6, text: "text6" }
]);