JenniferSoft Design Docs

Appearance

FloatLabel ​

InputText 의 라벨을 표시합니다.

Basic ​

input이 활성화되면 라벨 표시가 활성화 됩니다.

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FloatLabel, InputText } from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
const textValue2 = ref('');
</script>
<template>
    <div class="flex flex-wrap justify-center items-end gap-4">
        <float-label position="over">
            <input-text v-model="textValue1" />
            <label for="textValue1">label</label>
        </float-label>
        <float-label position="on">
            <input-text v-model="textValue2" />
            <label for="textValue2">label</label>
        </float-label>
    </div>
</template>

Fixed ​

:fixed="true" 를 추가하면 라벨 표시가 고정됩니다.

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FloatLabel, InputText } from '@jennifersoft/vue-components-v2';
const textValue3 = ref('');
const textValue4 = ref('');
</script>
<template>
    <div class="flex flex-wrap justify-center items-end gap-4">
        <float-label :fixed="true" position="over">
            <input-text v-model="textValue3" />
            <label for="textValue3">label</label>
        </float-label>
        <float-label :fixed="true" position="on">
            <input-text v-model="textValue4" />
            <label for="textValue4">label</label>
        </float-label>
    </div>
</template>

Size :fixed="true" position="over" ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FloatLabel, InputText } from '@jennifersoft/vue-components-v2';
const textValueLarge = ref('');
const textValueMedium = ref('');
const textValueSmall = ref('');
</script>
<template>
    <
    <div class="flex flex-wrap justify-center items-end gap-4">
        <float-label :fixed="true" position="over">
            <input-text v-model="textValueLarge" size="large" />
            <label for="textValueLarge">Large Label</label>
        </float-label>
        <float-label :fixed="true" position="over">
            <input-text v-model="textValueMedium" size="medium" />
            <label for="textValueMedium">Medium Label</label>
        </float-label>
        <float-label :fixed="true" position="over">
            <input-text v-model="textValueSmall" size="small" />
            <label for="textValueSmall">Small Label</label>
        </float-label>
    </div>
</template>

Size :fixed="true" position="on" ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FloatLabel, InputText } from '@jennifersoft/vue-components-v2';
const textValueLarge = ref('');
const textValueMedium = ref('');
const textValueSmall = ref('');
</script>
<template>
    <
    <div class="flex flex-wrap justify-center items-end gap-4">
        <float-label :fixed="true" position="on">
            <input-text v-model="textValueLarge" size="large" />
            <label for="textValueLarge">Large Label</label>
        </float-label>
        <float-label :fixed="true" position="on">
            <input-text v-model="textValueMedium" size="medium" />
            <label for="textValueMedium">Medium Label</label>
        </float-label>
        <float-label :fixed="true" position="on">
            <input-text v-model="textValueSmall" size="small" />
            <label for="textValueSmall">Small Label</label>
        </float-label>
    </div>
</template>