File

기본 사용

• 사용 태그 : label > input[file]

<!-- 기본  --> 
<label class="gn-file is-normal">
  <input type="file">
  Select file
</label>
<!-- 크기  --> 
<label class="gn-file is-medium">
  <input type="file">
  Select file
</label>
<label class="gn-file is-large">
  <input type="file">
  Select file
</label>

확장

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

<!-- 아이콘만 사용할 경우 -->
<label class="gn-file">
  <input type="file">
  <span class="gn-icon is-small">
    <i class="fas fa-upload"></i>
  </span>
</label>

<!-- 텍스트와 동일한 색깔의 아이콘 사용할 경우 -->
<label class="gn-file is-info is-outline">
  <input type="file">
  Select File
  <span class="gn-icon is-small">
    <i class="fas fa-angle-right"></i>
  </span>
</label>

<!-- 텍스트와 다른 색깔의 아이콘 사용할 경우 -->
<div class="gn-control has-icon-right">
  <span class="gn-icon is-small is-black is-right">
    <i class="fas fa-angle-right"></i>
  </span>
  <label class="gn-file is-info">
    <input type="file">
    Select File
  </label>
</div>

<!-- 아이콘과 텍스트 함께 사용할 경우 -->
<div class="gn-control has-icon-right">
  <span class="gn-icon is-normal is-white is-right">
    <i class="far fa-file-image"></i>
  </span>
  <label class="gn-file is-info">
    <input type="file">
    Select File
  </label>
</div>

<!-- 레이블을 함께 사용할 경우 -->
<div class="gn-control has-arrange">
  <label class="gn-file is-info">
    <input type="file">
    Select File
  </label>
  <span class="gn-plain">gnui-guide.png</span>
</div>

색상

<label class="gn-file is-success">
  <input type="file">
  Select file
</label>
<label class="gn-file is-warning">
  <input type="file">
  Select file
</label>
<label class="gn-file is-danger">
  <input type="file">
  Select file
</label>
<label class="gn-file is-info">
  <input type="file">
  Select file
</label>

상태

<label class="gn-file is-hover">
  <input type="file">
  Is hover
</label>
<label class="gn-file is-disabled">
  <input type="file" disabled>
  Disabled
</label>
<label class="gn-file is-invalid">
  <input type="file">
  Invalid
</label>