Field

.gn-field

• form을 구성하는 하나의 항목을 wrap 할 때 사용

정렬

• 가로(is-horizontal, 기본값), 세로(is-vertical)

<div class="gn-field">
  <div class="gn-label is-require">이름</div>
  <div class="gn-control">
    <input class="gn-input" placeholder="input name">
    <label class="gn-checkbox"><input type="checkbox">Unknown</label>
  </div>
</div>
<div class="gn-field">
  <div class="gn-label">성별</div>
  <div class="gn-control">
    <label class="gn-radio"><input type="radio" name="gender">없음</label>
    <label class="gn-radio"><input type="radio" name="gender">남자</label>
    <label class="gn-radio"><input type="radio" name="gender">여자</label>
  </div>
</div>
<div class="gn-field">
  <div class="gn-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>
</div>

<div class="gn-field is-vertical is-large">
  <div class="gn-label is-require">이름</div>
  <div class="gn-control">
    <input class="gn-input is-full" placeholder="input name">
  </div>
</div>
<div class="gn-field is-vertical is-large">
  <div class="gn-label">성별</div>
  <div class="gn-control">
    <div class="gn-select is-full">
      <select>
        <option>없음</option>
        <option>남자</option>
        <option>여자</option>
      </select>
    </div>
  </div>
</div>
<div class="gn-field is-vertical is-large">
  <div class="gn-label">파일첨부</div>
  <div class="gn-control has-arrange">
    <label class="gn-file is-info">
        <input type="file"> Select File </label>
    <span class="gn-plain is-full">gnui-guide.png</span>
  </div>
</div>

Label 정렬 및 너비 조절 (가로 정렬일 때)

• Label에 UTILITY의 텍스트 정렬 클래스(has-text-left, has-text-right, has-text-center)를 적용하여 정렬 변경 가능
• Label에 Grid의 사이즈 클래스(is-1 ~ is-12)를 적용하여 너비 조절 가능

<!-- Label 왼쪽 정렬 -->
<div class="gn-field">
  <div class="gn-label has-text-left">이름</div>
  <div class="gn-control">
    <input class="gn-input" placeholder="input name">
  </div>
</div>

<!-- Label 너비 조절 (Grid 사이즈 클래스 사용) -->
<div class="gn-field">
  <div class="gn-label is-3">다국어용 긴 레이블 텍스트</div>
  <div class="gn-control">
    <input class="gn-input" placeholder="input name">
  </div>
</div>

<!-- Label 왼쪽 정렬 + 너비 조절 조합 -->
<div class="gn-field">
  <div class="gn-label has-text-left is-4">다국어용 매우 긴 레이블 텍스트</div>
  <div class="gn-control">
    <input class="gn-input" placeholder="input name">
  </div>
</div>