드롭다운은 콤보박스와 네이게이션, 테이블 등 다수의 UI 컴포넌트에서 응용해서 사용하는 활용도 높은 UI 컴포넌트입니다.
아래는 드롭다운 컴포넌트의 기본이며 각각의 요소에는 value를 지정할 수 있습니다. (숫자 형태만 가능)
만약에 드롭다운에 말풍선 효과를 주고 싶다면 dropdown 태그 안에 anchor 클래스를 가진 태그를 추가하면 됩니다.
그리고 말풍선 효과를 우측으로 하고 싶다면 해당 말풍선 태그에 anchor-right 클래스를 추가하면 됩니다.
만약에 드롭다운을 화면 우측에서 보여주게 되면 메뉴의 일부가 가려지는 문제가 발생할 수 있습니다.
이럴 경우에는 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
});
드롭다운은 마크업 뿐만이 아니라 순수 데이터로도 리스트를 구성할 수 있습니다.
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" }
]);