iflex docs

Appearance

Form Group ​

nv-form-group 컴포넌트는 폼 그룹을 생성하여 관련 입력 필드를 논리적으로 묶고, 타이틀과 스타일을 적용할 수 있도록 도와줍니다. nv-form-groups 내에서 사용될 수 있으며, 그룹화된 입력 필드를 보다 명확하게 구분할 수 있습니다.

props ​

이름타입기본값설명
enablebooleantrue그룹을 표시할지 여부를 결정합니다.
titlestringnull그룹의 제목을 설정합니다.
use-labelboolean | nullnulltrue일 경우 제목이 표시됩니다. null이면 부모 설정을 따릅니다.
column-sizenumber2grid 컬럼 개수 기준 값

enable ​

  • enable prop은 특정 폼 그룹의 표시 여부를 동적으로 제어할 수 있습니다.
  • 이를 통해 조건부 로직에 따라 특정 폼 그룹을 보여주거나 숨길 수 있어, 복잡한 폼을 효율적으로 관리할 수 있습니다.
기본 정보 1 숨기기(enable) :

기본 정보2

정보명1
html
<small>기본 정보 1 숨기기(enable) : </small>
<el-radio-group v-model="enable" class="q-mb-md q-ml-md">
    <el-radio :value="true">true</el-radio>
    <el-radio :value="false">false</el-radio>
</el-radio-group>
<nv-form-groups>
    <nv-form-group title="기본 정보1" :enable="enable">
        <nv-input-wrap labelFor="title" label="정보명1">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
    <nv-form-group title="기본 정보2">
        <nv-input-wrap labelFor="title" label="정보명1">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>
typescript
const model = ref();
const enable = ref(false)

use-label ​

  • use-label prop은 각 nv-form-group에 설정된 title의 표시 여부를 개별적으로 제어합니다.
  • 이는 nv-form-groups에서 use-label prop을 설정했을 때, 특정 그룹에서만 제목을 숨기거나 표시해야 하는 경우 유용합니다. null 값을 사용하면 부모 컴포넌트 (nv-form-groups)의 use-label 설정을 따릅니다.
기본 정보 1 라벨 숨기기(use-label) :
정보명1

기본 정보2

정보명1
html
<small>기본 정보 1 라벨 숨기기(use-label) : </small>
<el-radio-group v-model="useLabel" class="q-mb-md q-ml-md">
    <el-radio :value="true">true</el-radio>
    <el-radio :value="false">false</el-radio>
</el-radio-group>
<nv-form-groups>
    <nv-form-group title="기본 정보1" :use-label="useLabel">
        <nv-input-wrap labelFor="title" label="정보명1">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
    <nv-form-group title="기본 정보2">
        <nv-input-wrap labelFor="title" label="정보명1">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>
typescript
const model = ref();
const useLabel = ref(false)

column-size ​

  • column-size prop은 해당 폼 그룹 내부에 배치되는 nv-input-wrap 컴포넌트들이 차지할 수 있는 최대 컬럼 개수를 지정합니다. 이는 그리드 시스템을 기반으로 하며, 폼 내부의 레이아웃을 조절하는 데 사용됩니다.
  • 이를 통해 폼 그룹 내에서 입력 필드의 배열 방식을 유연하게 조정하여 다양한 레이아웃을 구성할 수 있습니다. 예를 들어, column-size를 1로 설정하면 각 입력 필드가 한 줄에 하나씩 표시되고, 더 큰 값으로 설정하면 여러 입력 필드가 한 줄에 나란히 배치될 수 있습니다.

기본 정보1

정보명1
정보명2
정보명3
정보명4
정보명5
정보명6
정보명7
정보명8
정보명9
정보명10
html
<el-input-number v-model="num" :min="1" :max="10" class="q-mb-md" />
<nv-form-groups>
    <nv-form-group title="기본 정보1" :column-size="num">
        <nv-input-wrap labelFor="title" v-for="n in 10" :key="n" :label="`정보명${n}`">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>
typescript
const model = ref();
const num = ref(2)