UI 가이드

다크 모드

ScFormBox ​

ScFormBox는 폼 항목을 그리드 형태로 감싸주는 컨테이너 컴포넌트입니다.
ScFormItem과 함께 사용하여 label-content 구조를 구성합니다.

✅ 기본 사용법 ​

이름
홍길동
이메일
abc@email.com
vue
<sc-form-box col="2">
  <sc-form-item label="이름">홍길동</sc-form-item>
  <sc-form-item label="이메일" required>abc@email.com</sc-form-item>
  <sc-form-item required span="2">
    <template v-slot:label>
      <sc-checkbox><span class="text-sm">사용자 정의 라벨</span></sc-checkbox>
    </template>
    <sc-text-field small />
  </sc-form-item>
</sc-form-box>

✨ 사용 예시 모음 ​

▸ 열 개수 설정 (col) ​

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

Span 2
2
Span 4
4
Span 3
3
Span 3
3
Span 4
4
Span 2
2
Span 2
2
Span 2
2
Span 2
2
vue
<sc-form-box col="6">
  <!-- 2 + 4 = 6 -->
  <sc-form-item label="Span 2" span="2">2</sc-form-item>
  <sc-form-item label="Span 4" span="4">4</sc-form-item>

  <!-- 3 + 3 = 6 -->
  <sc-form-item label="Span 3" span="3">3</sc-form-item>
  <sc-form-item label="Span 3" span="3">3</sc-form-item>

  <!-- 4 + 2 = 6 -->
  <sc-form-item label="Span 4" span="4">4</sc-form-item>
  <sc-form-item label="Span 2" span="2">2</sc-form-item>

  <!-- 2 + 2 + 2 = 6 -->
  <sc-form-item label="Span 2" span="2">2</sc-form-item>
  <sc-form-item label="Span 2" span="2">2</sc-form-item>
  <sc-form-item label="Span 2" span="2">2</sc-form-item>
</sc-form-box>

▸ type 속성 : basic, flat ​

`type` 속성을 사용하여 폼 박스의 스타일을 변경할 수 있습니다. 기본값은 `basic`이며, `flat` 타입은 테두리가 없는 스타일입니다.

Hello
안녕하세요
World
세상!
Hello
안녕하세요
World
세상!
vue
<sc-form-box col="2" type="basic">
  <sc-form-item label="Hello" span="2">안녕하세요</sc-form-item>
  <sc-form-item label="World" span="2" required>세상!</sc-form-item>
</sc-form-box>

<sc-form-box col="2" type="flat">
  <sc-form-item label="Hello" span="2">안녕하세요</sc-form-item>
  <sc-form-item label="World" span="2" required>세상!</sc-form-item>
</sc-form-box>

🛠️ 속성 (Props) ​

이름타입기본값설명
colstring | number2그리드 열 개수 지정
type'basic' | 'flat''basic'폼 박스의 테두리 스타일 (flat) 등

📤 이벤트 (Emits) ​

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

🔳 슬롯 (Slots) ​

슬롯 이름설명
default내부에 ScFormItem 등을 배치

🎨 스타일 클래스 ​

클래스 이름설명
sc-form-box전체 폼박스 컨테이너
sc-form-box.borderless위아래 테두리 제거 스타일
sc-form-box.basic기본 테두리 스타일 (회색 라인 및 여백)
sc-form-box.flat플랫 스타일 (테두리 없음)

📝 기타 참고사항 ​

  • 내부에 배치하는 컴포넌트는 ScFormItem 구조를 따라야 올바르게 렌더링됩니다.
  • col 값에 따라 내부 아이템의 span 속성을 조절하면 반응형 구성 가능