JenniferSoft Design Docs

Appearance

InputNumber ​

  • InputNumber 는 텍스트 입력 도구인 Input을 확장하여 구현 했습니다.
  • InputText 는 문자열을 입력받는 도구이며, InputNumber 는 숫자를 입력받는 도구입니다.
  • ↑, ↓ 커서로 값을 증가, 감소 할 수 있습니다.

Basic ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue = ref(10000);
</script>
<template>
    <input-number v-model="numberValue" />
</template>

Size ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue1 = ref(10);
</script>
<template>
    <input-number v-model="numberValue1" size="large" />
    <input-number v-model="numberValue1" size="medium" />
    <input-number v-model="numberValue1" size="small" />
</template>

min, max ​

설정한 min, max 값을 벗어나면 빨간색으로 표시됩니다.

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue2 = ref(101);
</script>
<template>
    <input-number v-model="numberValue2" :min="0" :max="100" />
</template>

textAlign ​

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

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

InputAffix ​

InputAffix와 결합하여 단위 표시 가능합니다.

ms
%
vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber, InputAffix } from '@jennifersoft/vue-components-v2';
const numberValue3 = ref(10);
</script>
<template>
    <input-affix class="w-24">
        <input-number
            v-model="numberValue3"
            :min="0"
            :max="100"
            :text-align="'right'"
        />
        <span>ms</span>
    </input-affix>
    <input-affix class="w-24">
        <input-number
            v-model="numberValue3"
            :min="0"
            :max="100"
            :text-align="'right'"
        />
        <span>%</span>
    </input-affix>
</template>

InputGroup + InputAffix ​

InputGroup과 InputAffix를 결합하여 라벨과 단위 표시 가능합니다.

최소응답시간
ms
vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputNumber,
    InputAffix,
    InputGroup,
    InputGroupAddon,
} from '@jennifersoft/vue-components-v2';
const numberValue3 = ref(10);
</script>
<template>
    <input-group>
        <input-group-addon> 최소응답시간 </input-group-addon>
        <input-affix class="w-24">
            <input-number
                v-model="numberValue3"
                :min="0"
                :max="100"
                :text-align="'right'"
            />
            <span>ms</span>
        </input-affix>
    </input-group>
</template>