JenniferSoft Design Docs

Appearance

InputAffix ​

  • InputText 와 다른 컴포넌트, 아이콘을 조합형으로 사용할 수 있습니다
  • InputGroup 와 다른점은 InputText 의 보더를 표시하지 않고 부모 노드의 보더를 표시합니다

prefix(icon) + suffix(icon) ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputAffix,
    InputText,
    SvgIcon,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
</script>
<template>
    <div class="w-80">
        <input-affix>
            <svg-icon :icon="ICON_TYPE.search" />
            <input-text v-model="textValue1" :placeholder="'jennifersoft'" />
            <svg-icon :icon="ICON_TYPE.help" />
        </input-affix>
    </div>
</template>

prefix(icon) + suffix(icon) + label ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputAffix,
    InputText,
    SvgIcon,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
</script>
<template>
    <div class="w-80">
        <label class="text-xs block">Label</label>
        <input-affix>
            <svg-icon :icon="ICON_TYPE.search" />
            <input-text v-model="textValue1" :placeholder="'input text'" />
            <svg-icon :icon="ICON_TYPE.help" />
        </input-affix>
        <label class="text-xs block">Please enter a guide description</label>
    </div>
</template>

When invalid ​

ms
vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputAffix,
    InputText,
    SvgIcon,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
const invalid = ref(true);
</script>
<template>
    <div class="w-80">
        <label class="text-xs block">Label</label>
        <input-affix :invalid="invalid">
            <svg-icon :icon="ICON_TYPE.search" />
            <input-text v-model="textValue1" :placeholder="'input text'" />
            <span style="margin-right: 6px;">ms</span>
            <svg-icon
                :icon="ICON_TYPE.caution3"
                style="color: var(--red-700)"
            />
        </input-affix>
        <label class="text-xs block text-[--red-800]"
            >Please enter a guide description</label
        >
    </div>
</template>