JenniferSoft Design Docs

Appearance

InputSearch ​

InputSearch 는 사용자가 키워드를 입력하여 원하는 정보를 빠르게 찾을 수 있도록 돕는 컴포넌트입니다. 텍스트 필드가 항상 노출된 형태와, 버튼 클릭 시 Input가 확장되어 노출되는 형태 두 가지 타입으로 제공됩니다.

InputAffix 를 사용해서 구현 했습니다

Basic ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputSearch } from '@jennifersoft/vue-components-v2';
const textValue1 = ref();
</script>
<template>
    <input-search class="w-64" v-model="textValue1" />
</template>

Size ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputSearch } from '@jennifersoft/vue-components-v2';
const textValue1 = ref();
</script>
<template>
    <div class="flex flex-col items-center gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">large</label>
            <input-search class="w-64" size="large" v-model="textValue1" />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">medium</label>
            <input-search class="w-64" size="medium" v-model="textValue1" />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">small</label>
            <input-search class="w-64" size="small" v-model="textValue1" />
        </div>
    </div>
</template>

Type ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputSearch } from '@jennifersoft/vue-components-v2';
const textValue2 = ref();
const textValue3 = ref();
</script>
<template>
    <div class="flex flex-col items-center gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">outlined</label>
            <input-search class="w-64" type="outlined" v-model="textValue2" />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">plain</label>
            <input-search class="w-64" type="plain" v-model="textValue3" />
        </div>
    </div>
</template>

Type + minimal ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputSearch } from '@jennifersoft/vue-components-v2';
const textValue2 = ref();
const textValue3 = ref();
</script>
<template>
    <div class="flex flex-col items-center content-start gap-2">
        <div class="flex items-center h-12 w-96">
            <label class="w-32 font-bold">outlined</label>
            <input-search
                class="w-64"
                type="outlined"
                v-model="textValue4"
                minimal
            />
        </div>
        <div class="flex items-center h-12 w-96">
            <label class="w-32 font-bold">plain</label>
            <input-search
                class="w-64"
                type="plain"
                v-model="textValue5"
                minimal
            />
        </div>
    </div>
</template>

disable ​