Control

.gn-control

• CONTROLS 객체를 wrap 할때 사용

크기

• 하위 컨트롤의 크기를 지정하는데 사용
• is-small, is-normal, is-medium, is-large, is-full

상태

• 하위 컨트롤의 상태를 지정하는데 사용
• is-loading

아이콘 추가

• 하위 컨트롤에 아이콘을 추가할 경우 사용(.has-icon-left, .has-icon-right)
• 아이콘(.gn-icon)을 포함하며, 해당 아이콘에 정렬 클래스 (.is-left, .is-right)를 추가한다.

  <div class="gn-control has-icon-left has-icon-right">
    <span class="gn-icon is-left">
      <i class="fas fa-wifi"></i>
    </span>
    <span class="gn-icon is-right">
      <i class="fas fa-search"></i>
    </span>
    <input type="text" class="gn-input" placeholder="input text">
  </div>

여러개의 컨트롤 사용

• 하위에 여러개의 컨트롤을 사용할 때 .has-arrange 클래스를 추가하여 사용

정렬

• 왼쪽(is-left, 기본값), 가운데(is-center), 오른쪽(is-right)

<div class="gn-control is-large has-arrange is-center">
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-left"></i>
    </span>
    Left
  </button>
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-center"></i>
    </span>
    Center
  </button>
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-right"></i>
    </span>
    Right
  </button>
</div>