浏览 158
分享
SpinnerSpinner is an input component to provide a numerical input.
Documentation
Import
import {SpinnerModule} from 'primeng/spinner';
Getting Started
Two-way value binding is defined using standard ngModel directive.
<p-spinner size="30" [(ngModel)]="val"></p-spinner>
Model Driven Forms
Spinner can be used in a model driven form as well.
<p-spinner formControlName="age"></p-spinner>
Min-Max
Boundaries are specified with min and max attributes.
<p-spinner size="30" [(ngModel)]="val" [min]="0" [max]="100"></p-spinner>
Step
Step factor is 1 by default and can be customized with step option.
<p-spinner size="30" [(ngModel)]="val" [step]="0.25"></p-spinner>
Properties
Name | Type | Default | Description |
---|---|---|---|
step | number | 1 | Step factor to increment/decrement the value. |
min | number | null | Mininum boundary value. |
max | number | null | Maximum boundary value. |
placeholder | string | null | Hint text for the input field. |
disabled | boolean | undefined | When present, it specifies that the element should be disabled. |
readonly | boolean | undefined | When present, it specifies that the element should be read-only. |
maxlength | number | null | Maximum number of character allows in the input field. |
size | number | null | Size of the input field. |
tabindex | number | null | Index of the element in tabbing order. |
inputId | string | null | Identifier of the focus input to match a label defined for the component. |
type | string | text | Type of the input field. |
required | boolean | false | When present, it specifies that an input field must be filled out before submitting the form. |
name | string | null | Name of the input field. |
inputStyle | string | null | Inline style of the input field. |
inputStyleClass | string | null | Style class of the input field. |
Events
Name | Parameters | Description |
---|---|---|
onBlur | event: Blur event | Callback to invoke when input loses focus. |
onFocus | event: Browser event | Callback to invoke when input gets focus. |
onChange | event: Change event | Callback to invoke on value change. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-spinner | Container element |
ui-spinner-up | Up element |
ui-spinner-down | Down button |
Dependencies
None.
Source
<h3 class="first">Basic</h3>
<p-spinner size="30" [(ngModel)]="val1"></p-spinner>
<h3>Min/Max</h3>
<p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>
<h3>Step</h3>
<p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>
<h3>Disabled</h3>
<p-spinner size="30" [(ngModel)]="val4" [disabled]="true"></p-spinner>
export class SpinnerDemo {
val1: number;
val2: number;
val3: number;
val4: number = 100;
}
评论列表