InputText

InputText 는 텍스트 입력 도구인 Input을 확장하여 구현 했습니다.

Basic

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue = ref('');
</script>
<template>
    <div class="flex items-center gap-2">
        <input-text v-model="textValue" :placeholder="'input text'" />
    </div>
</template>

Props

Prop	타입	필수	기본값	설명
`modelValue`	`string`	-	`''`	입력 값
`invalid`	`boolean`	-	`false`	유효성 오류 스타일 표시
`readonly`	`boolean`	-	`false`	읽기 전용
`required`	`boolean`	-	`false`	필수 상태 표시
`placeholder`	`string`	-	-	플레이스홀더 텍스트
`textAlign`	`'left'` \| `'right'`	-	`'left'`	텍스트 정렬
`size`	`'large'` \| `'medium'` \| `'small'`	-	-	입력 크기
`disabled`	`boolean`	-	`false`	비활성화 여부

States

inactive

required

readonly

invalid

disable

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
const textValue2 = ref('required');
const textValue3 = ref('readonly');
const textValue4 = ref('invalid');
const textValue5 = ref('disabled');
</script>
<template>
    <div class="flex items-center gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">inactive</label>
            <input-text
                class="w-80"
                v-model="textValue1"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">required</label>
            <input-text
                class="w-80"
                v-model="textValue2"
                :required="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">readonly</label>
            <input-text
                class="w-80"
                v-model="textValue3"
                :readonly="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold ">invalid</label>
            <input-text
                class="w-80"
                v-model="textValue4"
                :invalid="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">disable</label>
            <input-text
                class="w-80"
                v-model="textValue5"
                :disabled="true"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

Size

Large

Medium

Small

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const largeValue = ref('');
const mediumValue = ref('');
const smallValue = ref('');
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Large</label>
            <input-text
                class="w-80"
                v-model="largeValue"
                :size="'large'"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Medium</label>
            <input-text
                class="w-80"
                v-model="mediumValue"
                :size="'medium'"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Small</label>
            <input-text
                class="w-80"
                v-model="smallValue"
                :size="'small'"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

textAlign

textAlign 속성을 설정하여 텍스트 정렬 방식을 설정할 수 있습니다.

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue6 = ref('');
</script>
<template>
    <input-text
        v-model="textValue6"
        :text-align="'right'"
        :placeholder="'input text'"
    />
</template>

label

Label

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue1 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs">Label</label>
            <input-text
                class="w-80"
                v-model="compositionValue1"
                :size="'medium'"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

message

Please enter a guide description

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue3 = ref('');
const compositionValue4 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <input-text
                class="w-80"
                v-model="compositionValue3"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block"
                >Please enter a guide description</label
            >
        </div>
        <div class="flex flex-col ">
            <input-text
                class="w-80"
                v-model="compositionValue4"
                :size="'medium'"
                :placeholder="'input text'"
        />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>

label + message

LabelPlease enter a guide description

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue5 = ref('');
const compositionValue6 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs" for="input5">Label</label>
            <input-text
                id="input5"
                class="w-80"
                v-model="compositionValue5"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block"
                >Please enter a guide description</label
            >
        </div>
        <div class="flex flex-col ">
            <label class="text-xs" for="input6">Label</label>
            <input-text
                id="input6"
                class="w-80"
                v-model="compositionValue6"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>

input - when invalid(true)

LabelPlease enter a guide description

vue

<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue7 = ref('');
const invalid = ref(true);
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs" for="input7">Label</label>
            <input-text
                id="input7"
                class="w-80"
                :invalid="invalid"
                v-model="compositionValue7"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>

InputText ​

Basic ​

Props ​

States ​

Size ​

textAlign ​

label ​

message ​

label + message ​

input - when invalid(true) ​