JenniferSoft Design Docs

Appearance

InputGroup ​

  • InputText 와 다른 컴포넌트, 아이콘을 조합형으로 사용할 수 있습니다

Basic ​

홈페이지
.com
vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, SvgIcon, ICON_TYPE } from "@jennifersoft/vue-components-v2";
const textValue1 = ref('');
const textValue2 = ref('');
</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                홈페이지
            </input-group-addon>
            <input-text v-model="textValue1" :placeholder="'jennifersoft'" />
            <input-group-addon>
                .com
            </input-group-addon>
        </input-group>
        <input-group>
            <input-group-addon>
                <svg-icon :icon="ICON_TYPE.user" :width="20" :height="20" />
            </input-group-addon>
            <input-text v-model="textValue2" :placeholder="'Username'" />
        </input-group>
    </div>
</template>

FloatLabel ​

홈페이지
.com
vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, SvgIcon, ICON_TYPE } from "@jennifersoft/vue-components-v2";
const textValue1 = ref('');
const textValue2 = ref('');
</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                홈페이지
            </input-group-addon>
            <input-text v-model="textValue1" :placeholder="'jennifersoft'" />
            <input-group-addon>
                .com
            </input-group-addon>
        </input-group>
        <input-group>
            <input-group-addon>
                <svg-icon :icon="ICON_TYPE.user" :width="20" :height="20" />
            </input-group-addon>
            <input-text v-model="textValue2" :placeholder="'Username'" />
        </input-group>
    </div>
</template>

Button ​

vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, Btn, ICON_TYPE } from "@jennifersoft/vue-components-v2";
const textValue3 = ref('');
const textValue4 = ref('');


</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                <btn type="text" text="Search" />
            </input-group-addon>
            <input-text v-model="textValue3" :placeholder="'Keyword'" />
        </input-group>
        <input-group>
            <input-text v-model="textValue4" :placeholder="'Keyword'" />
            <input-group-addon>
                <btn type="text" :leading-icon="ICON_TYPE.search" />
            </input-group-addon>
        </input-group>
    </div>
</template>

Checkbox ​

vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, Checkbox } from "@jennifersoft/vue-components-v2";
const textValue5 = ref('');
const textValue6 = ref('');

const checked1 = ref(false);
const checked2 = ref(false);


</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                <checkbox v-model="checked1" />
            </input-group-addon>
            <input-text v-model="textValue5" :placeholder="'Username'" />
        </input-group>
        <input-group>
            <input-text v-model="textValue6" :placeholder="'Website'" />
            <input-group-addon>
                <checkbox v-model="checked2" />
            </input-group-addon>
        </input-group>
    </div>
</template>