Example
<i-input-number v-model="value" placeholder="Type something.." />
export default {
data () {
return {
value: ''
};
}
}
Disabled State
<i-input-number v-model="value" placeholder="Type something.." disabled />
export default {
data () {
return {
value: ''
};
}
}
Minimum and Maximum Value
<i-input-number v-model="value" :min="1" :max="10" placeholder="Type something.." />
export default {
data () {
return {
value: 1
};
}
}
Step Size
You can set the increment / decrement step by using the step property. The step is 1 by default.
<i-input-number v-model="value" :step="10" placeholder="Type something.." />
export default {
data () {
return {
value: ''
};
}
}
Precision
You can set the number precision using the precision property, allowing you to enter floating point numbers into the input.
<i-input-number v-model="value" :precision="2" placeholder="Type something.." />
export default {
data () {
return {
value: ''
};
}
}
Prefix and Suffix
Inkline allows you to easily add a prefix or suffix to your inputs. Using prefixes and suffixes you can, indicate
your input type using an icon or text.
<i-input-number v-model="value" placeholder="Type something..">
<i slot="prefix" class="form-input-icon">@</i>
</i-input-number>
<i-input-number v-model="value" placeholder="Type something..">
<i slot="suffix" class="form-input-icon">@</i>
</i-input-number>
<i-input-number v-model="value" placeholder="Type something..">
<i slot="prefix" class="form-input-icon">@</i>
<i slot="suffix" class="form-input-icon">@</i>
</i-input-number>
export default {
data () {
return {
value: ''
};
}
}
Prepend and Append
You can add additional content such as select fields, buttons or plain text, to either side of the input by using the prepend and append slots.
<i-input-number v-model="value" placeholder="Type something..">
<span slot="prepend" class="form-input-prepend">http://</span>
</i-input-number>
<i-input-number v-model="value" placeholder="Type something..">
<span slot="append" class="form-input-append">.com</span>
</i-input-number>
<i-input-number v-model="value" placeholder="Type something..">
<span slot="prepend" class="form-input-prepend">http://</span>
<span slot="append" class="form-input-append">.com</span>
</i-input-number>
export default {
data () {
return {
value: ''
};
}
}
Sizes
You're able to use the size modifier to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.
<i-input-number size="sm" v-model="value" placeholder="Type something small.." />
<i-input-number size="md" v-model="value" placeholder="Type something medium.." />
<i-input-number size="lg" v-model="value" placeholder="Type something large.." />
export default {
data () {
return {
value: ''
};
}
}
Component API
Here you can find a list of the various customization options you can use for the number input components as props, as well as available slots and events.
Property disabled
Type Boolean
Accepted true, false
Default false
Description Sets the state of the number input form component as disabled.
Property placeholder
Type String
Description Sets the placeholder of the number input form component.
Property readonly
Type Boolean
Accepted true, false
Default false
Description Sets the state of the number input form component as readonly.
Property schema
Type Object
Description Provides a schema binding to the number input form component. See the
Form Validation documentation.
Property size
Type String
Accepted sm, md, lg
Default md
Description Sets the size of the number input form component.
Property value
Type String
Description Sets the value of the number input form component. To be provided using the v-model directive.
Property min
Type Number
Default -Infinity
Description Sets the minimum value of the number input form component.
Property max
Type Number
Default +Infinity
Description Sets the maximum value of the number input form component.
Property precision
Type Number
Default 0
Description Sets the number precision of the number input form component value.
Property step
Type Number
Default 1
Description Sets increase and decrease step of the number input form component value.
Description Slot for number input prepend content. Prepended content appears before the input inside a button-like container.
Description Slot for number input append content. Appended content appears after the input inside a button-like container.
Description Slot for number input prefix content. The prefix content appears inside the input field, on the left side.
Description Slot for number input suffix content. The suffix content appears inside the input field, on the right side.
Event click
Type (event: Event) => {}
Description Emitted when number input form component is clicked.
Event focus
Type (event: Event) => {}
Description Emitted when number input form component is focused.
Event blur
Type (event: Event) => {}
Description Emitted when number input form component is blurred.
Event change
Type (value: String) => {}
Description Emitted when number input form component value changes.
Event input
Type (value: String) => {}
Description Emitted when number input form component value changes.
Event mouseenter
Type (value: String) => {}
Description Emitted when number input form component is hovered.
Event mouseleave
Type (value: String) => {}
Description Emitted when number input form component is not hovered anymore.
Sass Variables
Modifying the Input Component Sass Variables will also change the Number Input component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Inkline