Input

기본 사용

• 사용 태그 : input[text], input[password], input[search], input[email], input[tel]

  <input type="text" class="gn-input" placeholder="text input">
  <input type="password" class="gn-input" placeholder="password input">
  <input type="search" class="gn-input" placeholder="search input">
  <input type="tel" class="gn-input" placeholder="tel input">

색상

<input type="text" class="gn-input" placeholder="primary text : border 1px">
<input type="text" class="gn-input is-border-width2" placeholder="primary text : border 2px"> 
<input type="text" class="gn-input is-border-width3" placeholder="primary text : border 3px"> 

확장

• 레이블을 추가할 경우, 레이블을 먼저 선언해준다.

  <div class="gn-control has-arrange">
    <div class="gn-plain">
      <span class="gn-icon">
        <i class="fas fa-weight-hanging"></i>
      </span>
    </div>
    <input type="text" class="gn-input" placeholder="input weight">
    <div class="gn-plain">
      Kg
    </div>
  </div>
  <div class="gn-control has-arrange is-medium">
    <div class="gn-select">
      <select>
        <option>&#65510;</option>
        <option>&dollar;</option>
        <option>&pound;</option>
        <option>&euro;</option>
      </select>
    </div>
    <input type="text" class="gn-input" placeholder="cost">
    <a class="gn-plain" role="button">
      <span class="gn-icon is-small">
        <i class="fas fa-calculator"></i>
      </span>
    </a>
  </div>
  <div class="gn-control has-arrange is-medium">
    <input type="text" class="gn-input is-medium is-full" placeholder="keyword">
    <a class="gn-plain2 is-primary" role="button">
      <span class="gn-icon">
        <i class="fas fa-search"></i>
      </span>
    </a>
  </div>
   <div class="gn-control has-arrange is-medium">
    <input type="text" class="gn-input is-medium is-full is-border-width3" placeholder="keyword">
    <a class="gn-plain2 is-primary" role="button">
      <span class="gn-icon">
        <i class="fas fa-search"></i>
      </span>
    </a>
  </div>

• 아이콘이 포함된 경우, 아이콘을 먼저 선언해준다.

  <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>
  <div class="gn-control has-icon-right">
    <span class="gn-icon is-right">
      <i class="fas fa-calendar"></i>
    </span>
    <input type="text" class="gn-input" placeholder="pick a date">
  </div>

크기

  <input type="text" class="gn-input is-normal" placeholder="normal text">
  <input type="text" class="gn-input is-medium" placeholder="medium text">
  <input type="text" class="gn-input is-large" placeholder="large text">
  <input type="text" class="gn-input is-full" placeholder="full text">

상태

  <p><input type="text" class="gn-input" readonly placeholder="readonly text"></p>
  <p><input type="text" class="gn-input" disabled placeholder="disabled text"></p>
  <p><input type="text" class="gn-input is-focus" placeholder="focus text"></p>
  <p><input type="text" class="gn-input is-hover" placeholder="hover text"></p>
  <p><input type="text" class="gn-input is-invalid" placeholder="invalid text"></p>
  <p>
  <div class="gn-control is-full is-large is-loading">
    <input type="text" class="gn-input is-full is-large" placeholder="loading text">
  </div>
  </p>