DevExtreme jQuery - Control the Behavior
If you need to add spin buttons to the NumberBox, set the showSpinButtons to true.
jQuery
JavaScript
$(function() {
$("#numberBoxContainer").dxNumberBox({
value: 20,
showSpinButtons: true
});
});Angular
HTML
TypeScript
<dx-number-box
[value]="20"
[showSpinButtons]="true">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxNumberBoxModule
],
// ...
})Vue
App.vue
<template>
<DxNumberBox
:value="20"
:show-spin-buttons="true"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxNumberBox from 'devextreme-vue/number-box';
export default {
components: {
DxNumberBox
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import NumberBox from 'devextreme-react/number-box';
class App extends React.Component {
render() {
return (
<NumberBox
defaultValue={20}
showSpinButtons={true} />
);
}
}
export default App;To specify the step by which the value is changed, use the step option.
jQuery
JavaScript
$(function() {
$("#numberBoxContainer").dxNumberBox({
value: 20,
showSpinButtons: true,
step: 10
});
});Angular
HTML
TypeScript
<dx-number-box
[value]="20"
[showSpinButtons]="true"
[step]="10">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxNumberBoxModule
],
// ...
})Vue
App.vue
<template>
<DxNumberBox
:value="20"
:show-spin-buttons="true"
:step="10"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxNumberBox from 'devextreme-vue/number-box';
export default {
components: {
DxNumberBox
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import NumberBox from 'devextreme-react/number-box';
class App extends React.Component {
render() {
return (
<NumberBox
defaultValue={20}
showSpinButtons={true}
step={10} />
);
}
}
export default App;See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- NumberBox Demos
- NumberBox API Reference
Feedback