Form Groups

이 컴포넌트는 여러 개의 nv-form-group을 그룹화하여 폼 입력을 구조적으로 구성할 수 있도록 도와줍니다. use-tab 옵션을 통해 탭 인터페이스를 사용할 수 있으며, use-label 옵션을 통해 라벨을 표시할지 여부를 결정할 수 있습니다.

이 컴포넌트는 내부적으로 <el-form>을 사용하고 있으며, 해당 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

Props

이름	타입	기본값	설명
use-tab	boolean	true	true 설정 시 좌측 탭이 생성되며, 하위 nv-form-group의 title이 탭으로 표시됩니다.
use-label	boolean	true	true 설정 시 nv-input-wrap의 라벨을 표시합니다.
label-position	string	'top'	Form label 위치 (top, left, right)
label-width	string	'auto'	Form label 너비 설정 ('auto', '80px' 등)
default-tab	boolean	false	기본 탭 UI 사용 여부 (false 설정 시 스크롤 탭이 사용됩니다.)
tab-items	Array<{ name: string; label: string }>	[]	탭 구성 항목 (탭 이름, 라벨) (default-tab="true" 시 사용)
tab-position	string	'left'	탭 위치 top, left, right, bottom (default-tab="true" 시 사용)

기본 (스크롤 탭)

• use-tab prop의 기본값(true)을 사용하여 좌측에 스크롤 가능한 탭 인터페이스를 보여줍니다.
• 각 nv-form-group의 title 속성이 탭의 이름으로 사용됩니다.
• 탭을 클릭하면 해당 그룹의 폼 입력 필드로 이동합니다.
• 긴 폼 그룹이 많을 때 유용하게 사용할 수 있습니다.

기본 정보1

정보명1-1

정보명1-2

정보명1-3

정보명1-4

정보명1-5

정보명1-6

정보명1-7

정보명1-8

정보명1-9

정보명1-10

기본 정보2

정보명2-1

정보명2-2

정보명2-3

정보명2-4

정보명2-5

정보명2-6

정보명2-7

정보명2-8

정보명2-9

정보명2-10

<nv-form-groups>
    <nv-form-group title="기본 정보1">
        <nv-input-wrap labelFor="title" v-for="n in 10" :key="n" :label="`정보명1-${n}`">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
    <nv-form-group title="기본 정보2">
        <nv-input-wrap labelFor="title" v-for="n in 10" :key="n" :label="`정보명2-${n}`">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>

기본 탭 사용

• default-tab prop을 true, use-tab prop을 false로 설정하여 기본적인 탭 UI를 활성화합니다.
• tab-items prop을 통해 탭에 표시될 이름(label)과 내부적으로 사용될 이름(name)을 정의하는 배열을 전달합니다.
• tab-position prop을 사용하여 탭의 위치 (top, left, right, bottom)를 설정할 수 있습니다.

topleftrightbottom

기본 정보

정보

기본 정보1

정보

기본 정보2

정보2

테스트

테스트2

테스트3

테스트4

<el-radio-group v-model="tabPosition" class="q-mb-md">
    <el-radio value="top">top</el-radio>
    <el-radio value="left">left</el-radio>
    <el-radio value="right">right</el-radio>
    <el-radio value="bottom">bottom</el-radio>
</el-radio-group>

<nv-form-groups class="h-100" :use-tab="false" :use-label="true" :default-tab="true" :tab-items="tabItem" :tab-position="tabPosition">
    <template #test>
        <nv-form-group title="기본 정보">
            <nv-input-wrap labelFor="code" label="정보" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
        <nv-form-group title="기본 정보1">
            <nv-input-wrap labelFor="code" label="정보" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
    </template>
    <template #test2>
        <nv-form-group title="기본 정보2">
            <nv-input-wrap labelFor="code" label="정보2" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
    </template>
</nv-form-groups>

const model = ref();
const tabItem = [
    {name : 'test', label : '테스트'},
    {name : 'test2', label : '테스트2'},
    {name : 'test3', label : '테스트3'},
    {name : 'test4', label : '테스트4'},
]

const tabPosition = ref('top');

WARNING

각 tabItem.name은 <template v-slot:[name]> 과 정확히 일치해야 합니다.

두가지 탭 사용

• default-tab과 use-tab prop을 모두 true로 설정하여 좌측 탭과 상단의 기본 탭을 동시에 사용하는 인터페이스를 제공합니다.
• 좌측 탭은 하위 nv-form-group의 title을 기반으로 생성되며, 각 그룹 내에서 상단의 기본 탭을 사용하여 내용을 구분할 수 있습니다.
• 복잡한 폼 구조를 여러 단계로 나누어 보여줄 때 유용합니다.

topleftrightbottom

기본 정보1-1

정보

정보

정보

정보

정보

정보

정보

정보

정보

정보

기본 정보1-2

정보

정보

정보

정보

정보

정보

정보

정보

정보

정보

기본 정보2

정보

정보

정보

정보

정보

정보

정보

정보

정보

정보

테스트

테스트2

테스트3

테스트4

<el-radio-group v-model="tabPosition2" class="q-mb-md">
    <el-radio value="top">top</el-radio>
    <el-radio value="left">left</el-radio>
    <el-radio value="right">right</el-radio>
    <el-radio value="bottom">bottom</el-radio>
</el-radio-group>
<nv-form-groups class="h-200px" :use-tab="true" :use-label="true" :default-tab="true" :tab-items="tabItem" :tab-position="tabPosition2">
    <template #test>
        <nv-form-group title="기본 정보1-1">
            <nv-input-wrap labelFor="code" v-for="n in 10" :key="n" label="정보" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
        <nv-form-group title="기본 정보1-2">
            <nv-input-wrap labelFor="code" v-for="n in 10" :key="n" label="정보" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
    </template>
    <template #test2>
        <nv-form-group title="기본 정보2">
            <nv-input-wrap labelFor="code" v-for="n in 10" :key="n" label="정보" >
                <el-input v-model="model"/>
            </nv-input-wrap>
        </nv-form-group>
    </template>
</nv-form-groups>

const model = ref();
const tabItem = [
    {name : 'test', label : '테스트'},
    {name : 'test2', label : '테스트2'},
    {name : 'test3', label : '테스트3'},
    {name : 'test4', label : '테스트4'},
]

const tabPosition2 = ref('top');

WARNING

• <nv-form-group> 의 title은 필수값입니다.
• 각 tabItem.name은 <template v-slot:[name]> 과 정확히 일치해합니다.

탭 미사용

• use-tab과 default-tab prop을 모두 false로 설정하여 탭 인터페이스 없이 nv-form-group들을 단순히 그룹화하여 보여줍니다.
• 폼의 구조를 시각적으로 분리하고 싶지만 탭 기능은 필요하지 않을 때 사용합니다.

기본 정보1

정보명1

기본 정보2

정보명1

<nv-form-groups :use-tab="false" :default-tab="false" :use-label="true">
    <nv-form-group title="기본 정보1">
        <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>

Label

use-label

• use-label prop을 false로 설정하면 각 nv-form-group의 title (그룹 제목)을 숨길 수 있습니다.
• 폼 그룹의 제목이 불필요하거나 다른 방식으로 정보를 제공할 때 사용합니다.

정보명1

정보명1

<nv-form-groups :use-label="false">
    <nv-form-group title="기본 정보1">
        <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>

label-position

• label-position prop을 사용하여 nv-input-wrap 내의 라벨 위치를 설정합니다.
• 가능한 값은 'top', 'left', 'right'이며, 기본값은 'top'입니다.
• 폼 레이아웃에 따라 라벨 위치를 조정하여 가독성을 높일 수 있습니다.

topleftright

기본 정보1

정보명1

기본 정보2

정보명1

<el-radio-group v-model="labelPosition" class="q-mb-md">
    <el-radio value="top">top</el-radio>
    <el-radio value="left">left</el-radio>
    <el-radio value="right">right</el-radio>
</el-radio-group>

<nv-form-groups :label-position="labelPosition">
    <nv-form-group title="기본 정보1">
        <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>

const model = ref();
const labelPosition = ref('top');

label-width

• label-width prop을 사용하여 nv-input-wrap 내의 라벨 너비를 명시적으로 지정합니다.
• 값은 CSS width 속성 값 ('80px', '10em') 또는 'auto'로 설정할 수 있습니다. 기본값은 'auto'입니다.
• 'auto'로 설정하고 label-position이 'left' 또는 'right'일 경우, 가장 긴 라벨을 기준으로 너비가 자동으로 조정됩니다.
• 일관된 폼 레이아웃을 유지하거나 특정 라벨의 너비를 강조하고 싶을 때 사용합니다.

label-position :

topleftright

label-width :

auto100px

기본 정보1

정보명1

기본 정보2

길이가 긴 라벨 텍스트

<small>label-position : </small>
<el-radio-group v-model="labelPosition2" class="q-ml-md">
    <el-radio value="top">top</el-radio>
    <el-radio value="left">left</el-radio>
    <el-radio value="right">right</el-radio>
</el-radio-group>
<br/>
<small>label-width : </small>
<el-radio-group v-model="labelWidth" class="q-mb-md q-ml-md">
    <el-radio value="auto">auto</el-radio>
    <el-radio value="100px">100px</el-radio>
</el-radio-group>
<nv-form-groups :label-position="labelPosition2" :label-width="labelWidth">
    <nv-form-group title="기본 정보1">
        <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="길이가 긴 라벨 텍스트">
            <el-input v-model="model"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>

const model = ref();
const labelPosition2 = ref('right');
const labelWidth = ref('auto');