GNUI Start your next web project with GNUI.
Gn.util

Dropdown

/scss/controls/dropdown.scss
v.0.1.0 javascript

기본 사용

  • 드롭다운은 버튼과 생김새가 거의 동일 합니다.
  • 용도에 따라 4가지 버전으로 사용 합니다.
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
  • 아이템 4
  • 아이템 4-1
  • 아이템 4-2
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
  • 아이템 4
  • 아이템 4-1
  • 아이템 4-2
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
  • 아이템 4
  • 아이템 제목이 길어집니다.4-1
  • 아이템 4-2
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
  • 아이템 4
  • 아이템 제목이 길어집니다.4-1
  • 아이템 4-2
<div class="gn-dropdown">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
    <ul>
      <li class="dropdown-item">아이템 4</li>
      <li class="dropdown-item is-active">아이템 4-1</li>
      <li class="dropdown-item">아이템 4-2</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-mono">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
    <ul>
      <li class="dropdown-item">아이템 4</li>
      <li class="dropdown-item is-active">아이템 4-1</li>
      <li class="dropdown-item">아이템 4-2</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-primary">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
    <ul>
      <li class="dropdown-item">아이템 4</li>
      <li class="dropdown-item is-active">아이템 제목이 길어집니다.4-1</li>
      <li class="dropdown-item">아이템 4-2</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-header">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
    <ul>
      <li class="dropdown-item">아이템 4</li>
      <li class="dropdown-item is-active">아이템 제목이 길어집니다.4-1</li>
      <li class="dropdown-item">아이템 4-2</li>
    </ul>
  </div>
</div>

크기

선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
선택하세요
  • 아이템 1
  • 아이템 2
  • 아이템 3
<div class="gn-dropdown is-small">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-normal">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-medium">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-large">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-full">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item">아이템 2</li>
      <li class="dropdown-item">아이템 3</li>
    </ul>
  </div>
</div>

색상

선택하세요
  • 아이템 1
선택하세요
  • 아이템 1
선택하세요
  • 아이템 1
선택하세요
  • 아이템 1
<div class="gn-dropdown is-success">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-warning">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-danger">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-info">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>

상태

선택하세요
  • 아이템 1
  • 아이템
선택하세요
  • 아이템 1
선택하세요
  • 아이템 1
선택하세요
  • 아이템 1
<div class="gn-dropdown is-open">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
      <li class="dropdown-item is-disabled">아이템</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-disabled">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-invalid">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-loading">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">아이템 1</li>
    </ul>
  </div>
</div>

확장

선택하세요
  • 항목 1
  • 항목 2
  • 항목 3
  • 항목 4
  • 항목 5
  • 항목 6
  • 항목 7
선택하세요
  • 그냥 텍스트를 넣을 수도 있습니다.

  • 줄바꿈 텍스트는 p 태그를 사용해서 넣으면 됩니다.

  • 강조도 할 수 있습니다. 

<div class="gn-dropdown is-opened">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <ul>
      <li class="dropdown-item">
        <span class="gn-icon is-light">
          <i class="fas fa-check"></i>
        </span>
        항목 1
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-light">
          <i class="fas fa-check"></i>
        </span>
        항목 2
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-success">
          <i class="fas fa-check"></i>
        </span>
        항목 3
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-success">
          <i class="fas fa-check"></i>
        </span>
        항목 4
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-light">
          <i class="fas fa-check"></i>
        </span>
        항목 5
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-light">
          <i class="fas fa-check"></i>
        </span>
        항목 6
      </li>
      <li class="dropdown-item">
        <span class="gn-icon is-success">
          <i class="fas fa-check"></i>
        </span>
        항목 7
      </li>
    </ul>
  </div>
</div>
<div class="gn-dropdown is-open">
  <div class="dropdown-label">
    선택하세요
    <span class="gn-icon is-small dropdown-icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  <div class="dropdown-items">
    <div class="dropdown-search">
      <div class="gn-control has-icon-right is-full">
        <span class="gn-icon is-right">
          <i class="fas fa-search"></i>
        </span>
        <input type="text" class="gn-input is-full" placeholder="search item">
      </div>
    </div>
    <ul>
      <li class="dropdown-item">
        <label class="gn-checkbox"><input type="checkbox">항목 1</label>
      </li>
      <li class="dropdown-item">
        <label class="gn-checkbox"><input type="checkbox">항목 2</label>
      </li>
      <li class="dropdown-item">
        <label class="gn-checkbox"><input type="checkbox">항목 3</label>
      </li>
      <li class="dropdown-item">
        <label class="gn-checkbox"><input type="checkbox">항목 4</label>
      </li>
    </ul>
    <ul>
      <li class="dropdown-item is-unselectable">
        그냥 텍스트를 넣을 수도 있습니다. 
      </li>
      <li class="dropdown-item is-unselectable">
        <p>줄바꿈 텍스트는 <code>p</code> 태그를 사용해서 넣으면 됩니다. </p>
      </li>
      <li class="dropdown-item is-unselectable">
        <p><strong>강조</strong>도 할 수 있습니다. </p>
      </li>
    </ul>
  </div>
</div>

생성 옵션

  <select class="new-dropdown0" name="dropdown0">
  </select>

  <select class="new-dropdown1" name="dropdown1">
  </select>

  <select class="new-dropdown2" name="dropdown2">
  </select>

  <select class="new-dropdown3" name="dropdown3">
  </select>

  <select class="new-dropdown4" name="dropdown4">
    <option value="item1" data-desc="항목1 설명">항목1</option>
    <option value="item2" data-desc="항목2 설명">항목2</option>
    <option value="item3" data-desc="항목3 설명">항목3은 텍스트가 길어집니다.</option>
    <option value="item4" data-desc="항목4 설명">항목4</option>
    <option value="item5" data-desc="항목5 설명">항목5</option>
  </select>

  <select class="new-dropdown5" name="dropdown5">
  </select>

  <select class="new-dropdown6" name="dropdown6">
  </select>

  <select class="new-dropdown7" name="dropdown7">
  </select>



  Gn.create('dropdown', {
    target: '.new-dropdown0',
    onChange: function (val, txt, values) {
      console.log('선택된 값은 [ ' + val + ' ]입니다.');
    },
    width: '150px',
    data: [
      { value: '1', text: '옵션 1' },
      { value: '2', text: '옵션 2' },
      { value: '3', text: '옵션 3' },
      { value: '4', text: '옵션 4' },
      { value: '5', text: '옵션 5' }
    ]
  });
  Gn.create('dropdown', {
    target: '.new-dropdown1',
    onChange: function(val, txt, values){
      console.log('선택된 값은 [ ' + val + ' ]입니다.')
    },
    width: '150px',
    value: 'item2,item5',
    multiple: true,
    data: [
      { value: 'item1', text: '항목1' },
      { value: 'item2', text: '항목2' },
      { value: 'item3', text: '항목3' },
      { value: 'item4', text: '항목4' },
      { value: 'item5', text: '항목5' },
      { value: 'item6', text: '항목6' },
      { value: 'item7', text: '항목7' }
    ]
  });
  Gn.create('dropdown', {
    target: '.new-dropdown2', 
    data: [
      [
        { value: 'item1', text: 'Group1-항목1' },
        { value: 'item2', text: 'Group1-항목2' },
        { value: 'item3', text: 'Group1-항목3' }
      ],[
        { value: 'item4', text: 'Group2-항목4' },
        { value: 'item5', text: 'Group2-항목5' }
      ]
    ]
  });
  Gn.create('dropdown', {
    target: '.new-dropdown3',
    data: [
      { value: '', text: '&lt;선택안함&gt;' },
      { value: 'item1', icon: 'home', text: '항목1' },
      { value: 'item2', icon: 'star', text: '항목2' },
      { value: 'item3', icon: 'heart', text: '항목3' },
      { value: 'item4', text: '항목4' },
      { value: 'item5', text: '&lt;항목5&gt;', html: '<p><strong>text</strong>가 있는 항목은 선택 시 <u>text</u>로 대체됩니다.</p>' },
      { value: 'item6', html: '<p><strong>text</strong>가 없는 항목은 <u>선택</u>할 수 없습니다.</p>' }
    ],
    width: 150,
    scrollHeight: 100
  });
  Gn.create('dropdown', {
    target: '.new-dropdown4',
    onChange: function(val, txt){
      console.log('선택된 항목은 [ ' + txt + ' ]입니다.')
    },
    textSets: {
      selectText: '골라라'
    },
    value: 'item2',
    hasSearch: true,
    color: 'danger'
  });
  Gn.create('dropdown', {
    target: '.new-dropdown5',
    onChange: function (val, txt, values) {
      console.log('선택된 값은 [ ' + val + ' ]입니다.');
    },
    width: '300px',
    data: [
      { value: '1', cols: ['항목1', '카테고리A', '1000'] },
      { value: '2', cols: ['항목2', '카테고리B', '2000'] },
      { value: '3', cols: ['항목3', '카테고리C', '3000'] },
      { value: '4', cols: ['항목4', '카테고리A', '4000'] },
      { value: '5', cols: ['항목5', '카테고리B', '5000'] }
    ]
  });
  // optionTooltip — 정적 콘텐츠
  Gn.create('dropdown', {
    target: '.new-dropdown6',
    width: '200px',
    data: [
      { value: 'win', text: 'Windows' },
      { value: 'mac', text: 'macOS' },
      { value: 'linux', text: 'Linux' },
      { value: 'android', text: 'Android' },
      { value: 'ios', text: 'iOS' }
    ],
    optionTooltip: {
      direction: 'right',
      content: function (option) {
        var descriptions = {
          win: '마이크로소프트의 데스크톱 운영체제',
          mac: '애플의 데스크톱 운영체제',
          linux: '오픈소스 기반 운영체제',
          android: '구글의 모바일 운영체제',
          ios: '애플의 모바일 운영체제'
        };
        var desc = descriptions[option.value] || '';
        return '<div style="min-width:160px"><strong>' + option.text + '</strong><p style="margin:4px 0 0">' + desc + '</p></div>';
      }
    }
  });
  // optionTooltip — 비동기 fetch
  Gn.create('dropdown', {
    target: '.new-dropdown7',
    width: '200px',
    data: [
      { value: 'host1', text: '192.168.0.1' },
      { value: 'host2', text: '192.168.0.2' },
      { value: 'host3', text: '10.0.0.1' },
      { value: 'host4', text: '10.0.0.2' }
    ],
    optionTooltip: {
      direction: 'right',
      fetch: function (option) {
        return new Promise(function (resolve) {
          setTimeout(function () {
            var mockData = {
              host1: { name: 'Server-A', os: 'Windows Server 2022', status: 'online' },
              host2: { name: 'Server-B', os: 'Ubuntu 22.04', status: 'online' },
              host3: { name: 'Router-1', os: 'Cisco IOS', status: 'online' },
              host4: { name: 'Switch-1', os: 'Cisco NX-OS', status: 'offline' }
            };
            var d = mockData[option.value];
            var statusColor = d.status === 'online' ? 'success' : 'danger';
            resolve(
              '<div style="min-width:180px">' +
                '<strong>' + d.name + '</strong>' +
                '<ul style="margin:6px 0 0;padding:0;list-style:none">' +
                  '<li>IP: ' + option.text + '</li>' +
                  '<li>OS: ' + d.os + '</li>' +
                  '<li>상태: <span class="gn-tag is-' + statusColor + ' is-small">' + d.status + '</span></li>' +
                '</ul>' +
              '</div>'
            );
          }, 500);
        });
      }
    }
  });

데이터 모델 (DropdownItem)

필드 type 필수 description
value string Y 항목 값
text string N 옵션 텍스트
cols string[] N 다중 컬럼 표시 값 배열
html string N 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)
icon string N font awesome solid icon name
name type default description
target string dropdown을 생성할 대상의 선택자(selector)
textSets selectText string '선택하세요'
searchText string 'search item'
noData string No records available. 'opened' 상태에서 데이터가 없을 경우 출력 메시지
data DropdownItem[] dropdown에 표시할 데이터 배열
- DropdownItem 참조

참고: 표시 우선순위는 html > cols > text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.
value string 초기 선택값
size string 'small','normal','medium','large'
color string 'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
type string 'open','opened'
width string, number 넓이를 고정하는 경우 넓이값 입력
scrollHeight string, number 옵션영역의 최대 높이(스크롤 생성)
maxHeight string, number 'opened' 상태에서 해당옵션만 지정 시 옵션영역의 최대 높이(스크롤 생성)
optionTooltip object 옵션 툴팁 설정

direction: 'top','right','bottom','left'
content: function(option){ return htmlString }
fetch: function(option){ return Promise that resolves htmlString }
hasSearch boolean false 항목 검색기능 사용여부
multiple boolean false 다중선택 가능 여부
disabled boolean false Disable 여부
onChange(value, text, values) function 선택값 변경 시 발생 이벤트

메소드

name return description
setValue(value: string) void 값을 변경한다.
getValue() string 선택된 값을 반환한다.
setData(array[{value: string|array, text: string, html: string}]) void 선택 항목을 변경한다.
disable() void Disabled 처리한다.
enable() void Enabled 처리한다.