Select

기본 사용

• 사용 태그 : select

  <div class="gn-select">
    <select>
      <option>Lorem</option>
      <option>voluptate</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-header">
    <select>
      <option>Lorem</option>
      <option>voluptate</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>

크기

  <div class="gn-select is-small">
    <select>
      <option>Small</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-normal">
    <select>
      <option>Normal</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-medium">
    <select>
      <option>Medium</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-large">
    <select>
      <option>Large</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-full">
    <select>
      <option>Full</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>

색상

  <div class="gn-select is-success">
    <select>
      <option>success</option>
    </select>
  </div>
  <div class="gn-select is-warning">
    <select>
      <option>warning</option>
    </select>
  </div>
  <div class="gn-select is-danger">
    <select>
      <option>danger</option>
    </select>
  </div>
  <div class="gn-select is-info">
    <select>
      <option>info</option>
    </select>
  </div>

스타일

  <div class="gn-select is-borderless">
    <select>
      <option>borderless</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>
  <div class="gn-select is-multiple">
    <select multiple>
      <option>multiple</option>
      <option>proident</option>
      <option>labore</option>
      <option>consectetur</option>
    </select>
  </div>

상태

  <div class="gn-select is-focus">
    <select>
      <option>focus</option>
    </select>
  </div>
  <div class="gn-select is-hover">
    <select>
      <option>hover</option>
    </select>
  </div>
  <div class="gn-select">
    <select disabled>
      <option>disabled</option>
    </select>
  </div>
  <div class="gn-select is-invalid">
    <select>
      <option>invalid</option>
    </select>
  </div>
  <div class="gn-select is-loading">
    <select>
      <option>loading...</option>
    </select>
  </div>

확장

  <div class="gn-control has-arrange">
    <div class="gn-plain">
      <span class="gn-icon is-small">
        <i class="fas fa-weight-hanging"></i>
      </span>
    </div>
    <div class="gn-select">
      <select>
        <option>with label</option>
      </select>
    </div>
    <div class="gn-plain">
      Kg
    </div>
  </div>

  <div class="gn-control has-icon-left">
    <span class="gn-icon is-left">
      <i class="fas fa-wifi"></i>
    </span>
    <div class="gn-select">
      <select>
        <option>with label</option>
      </select>
    </div>
  </div>