UI 가이드

다크 모드

ScFormItem ​

ScFormItem은 ScFormBox 내부에 배치되어 label-content 구조를 구성하는 폼 요소 래퍼입니다.
기본적으로 라벨과 콘텐츠 영역을 수평 정렬하며, 다양한 슬롯으로 커스터마이징이 가능합니다.

✅ 기본 사용법 ​

Hello
안녕하세요
World
세상!
사용자 정의 라벨
사용자 정의 라벨이 2줄로 줄바꿈이 되는 경우
label이 없는 영역이 이렇게 표시됩니다. span=2 로 2개의 컬럼을 차지합니다.
vue
<sc-form-box>
  <sc-form-item label="Hello">안녕하세요</sc-form-item>
  <sc-form-item label="World" required>세상!</sc-form-item>

  <sc-form-item required span="2">
    <template v-slot:label>사용자 정의 라벨</template>
    <sc-text-field small class="w-full" />
  </sc-form-item>

  <sc-form-item required label="사용자 정의 라벨이 2줄로 줄바꿈이 되는 경우" span="2">
    <sc-text-field small class="w-full" />
  </sc-form-item>

  <!-- 빈 영역은 blank로 입력가능 -->
  <sc-form-item span="2" blank />

  <sc-form-item no-label span="2">
    label이 없는 영역이 이렇게 표시됩니다. span=2 로 2개의 컬럼을 차지합니다.
  </sc-form-item>
</sc-form-box>

✨ 사용 예시 모음 ​

▸ 필수 항목 표시 ​

비밀번호
vue
<sc-form-box col="1">
  <sc-form-item label="비밀번호" required>
    <sc-text-field type="password" class="w-full" placeholder="비밀번호를 입력하세요." />
  </sc-form-item>
</sc-form-box>

▸ 사용자 정의 custom, label, content ​

hello
form-item 전체를 수정할 수 있는 영역
라벨
여기는 content 영역
내용
왼쪽에 영역
오른쪽에 영역
vue
<sc-form-box>
  <sc-form-item label="hello" span="2"><sc-text-field /></sc-form-item>
  <!-- custom -->
  <sc-form-item span="2">
    <template #custom>
      <div style="font-size: 24px">form-item 전체를 수정할 수 있는 영역</div>
    </template>
  </sc-form-item>
  <!-- label -->
  <sc-form-item span="2">
    <template #label>
      <span style="color: yellowgreen; font-weight: bold">라벨</span>
    </template>
    여기는 content 영역
  </sc-form-item>

  <!-- content -->
  <sc-form-item span="2" label="내용">
    <template #content>
      <div style="float: left; color: indianred">왼쪽에 영역</div>
      <div style="float: right; color: skyblue">오른쪽에 영역</div>
    </template>
  </sc-form-item>
</sc-form-box>

▸ col과 span 조합 ​

form-box의 col의 속성은 그리드 시스템으로 1~12컬럼의 크기를 미리 지정할 수 있습니다.

아래 샘플은 col을 6으로 설정하여 한줄에 6개의 컬럼이 배치되게 하였습니다.

4 | 2
6
3 | 3
6

또 한줄을 컬럼을 병합 하여 사용하고 싶은경우 form-item의 span의 속성으로 몇컬럼을 차지할건지 입력합니다.

이름
성별
남
제목
사유
상세 사유
내용
(300자 이내)
7 /300
vue
<sc-form-box col="6" type="flat">
  <sc-form-item label="이름" required span="4">
    <sc-text-field small v-model="item.standard" />
  </sc-form-item>
  <sc-form-item label="성별" required span="2">
    남
  </sc-form-item>

  <sc-form-item label="제목" span="6">
    <sc-text-field v-model="item.title" small class="w-full" />
  </sc-form-item>
  <sc-form-item label="사유" span="3">
    <sc-text-field v-model="item.reason1" small />
  </sc-form-item>
  <sc-form-item label="상세 사유" span="3">
    <sc-text-field v-model="item.reason2" small />
  </sc-form-item>
  <sc-form-item blank span="3" />
  <sc-form-item required span="6">
    <template v-slot:label>
      내용<br />
      (300자 이내)
    </template>
    <sc-text-area v-model="item.comment" small maxlength="300" />
  </sc-form-item>
</sc-form-box>

🛠️ 속성 (Props) ​

이름타입기본값설명
labelstring''라벨 텍스트
spanstring | number1그리드에서 차지할 열 너비 (col 기반)
labelWidthstring | number170라벨의 고정 너비 (px 단위)
requiredbooleanfalse필수 항목으로 표시 (라벨 왼쪽 * 표시)
noLabelbooleanfalse라벨 없이 콘텐츠만 표시
blankbooleanfalse공백 자리 확보 (내용 없이 간격만 유지)

📤 이벤트 (Emits) ​

해당 컴포넌트는 이벤트를 발생시키지 않습니다.

🔳 슬롯 (Slots) ​

슬롯 이름설명
default기본 콘텐츠 영역
label라벨 텍스트 대신 사용자 정의 콘텐츠 사용
content콘텐츠 영역 전체를 커스터마이징
custom전체 구조를 커스터마이징

🎨 스타일 클래스 ​

클래스 이름설명
sc-form-item전체 항목 wrapper
.label라벨 영역
.label.required필수 표시가 있는 라벨
.content기본 콘텐츠 영역
.custom-content슬롯 콘텐츠 영역 (전체 너비)
.custom완전 커스터마이징 영역

📝 기타 참고사항 ​

  • span 값은 ScFormBox의 col 설정과 함께 사용됩니다.
  • blank 속성은 단순히 공간을 차지하고 싶은 경우 유용합니다.