Inkline provides you with simple solutions for all the scenarios you will encounter when you need your user to input a number.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" placeholder="Enter a number.." />
</template>
Setting the min and max properties will restrict the value within the given range.
<script>
export default {
data() {
return {
value: 1
};
}
};
</script>
<template>
<INumberInput v-model="value" :min="1" :max="10" placeholder="Enter a number.." />
</template>
You can set the number precision using the precision property, allowing you to enter floating point number values.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" :precision="2" placeholder="Enter a number.." />
</template>
You can set the value to increment / decrement by using the step property. The step size is 1 by default.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" :step="10" placeholder="Enter a number.." />
</template>
Setting the disabled property will disable all interactions with the number input component.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" disabled placeholder="Enter a number.." />
</template>
Setting the readonly property will disable all interactions with the number input component, except being able to focus the number input.
<script>
export default {
data() {
return {
value: 10
};
}
};
</script>
<template>
<INumberInput v-model="value" readonly placeholder="Enter a number.." />
</template>
If you need to be able to quickly clear the value of a number input, you can add the clearable property to the number input component.
<script>
export default {
data() {
return {
value: 10
};
}
};
</script>
<template>
<INumberInput v-model="value" clearable placeholder="Enter a number.." />
</template>
Inkline allows you to easily add a prefix or suffix to your number inputs. Using prefixes and suffixes you can, for example, indicate your number input type using an icon or text.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prefix>@</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #suffix>@</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prefix>@</template>
<template #suffix>@</template>
</INumberInput>
</template>
You can add additional content such as select fields, buttons or plain text, to either side of the number input by using the prepend and append slots.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<span>https://</span>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #append>
<span>.com</span>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<span>https://</span>
</template>
<template #append>
<span>.com</span>
</template>
</INumberInput>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<IButton>Button</IButton>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #append>
<IButton>Button</IButton>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<IButton>Button</IButton>
</template>
<template #append>
<IButton>Button</IButton>
</template>
</INumberInput>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</INumberInput>
<INumberInput v-model="value" placeholder="Enter a number..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</INumberInput>
</template>
You can use the color property to set a light or dark color for your number inputs.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" color="light" placeholder="Enter a number.." />
<INumberInput v-model="value" color="dark" placeholder="Enter a number.." />
</template>
You're able to use the size modifier to control the size of your number inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<INumberInput v-model="value" size="sm" placeholder="Enter a number.." />
<INumberInput v-model="value" size="md" placeholder="Enter a number.." />
<INumberInput v-model="value" size="lg" placeholder="Enter a number.." />
</template>