Home » RichFaces Rich:InputNumberSpinner

RichFaces Rich:InputNumberSpinner

by Online Tutorials Library

RichFaces <rich:inputNumberSpinner>

This component is a single-line input field with buttons to increase and decrease a numerical value. It is used to input values by using provided spinner. The value can be changed using the corresponding directional keys on a keyboard, or by typing into the field.

Style classes and skin parameters

The following table contains the Style classes and corresponding skin parameters for the inputNumberSpinner.

Class Function Skin Parameters Mapped CSS properties
.rf-insp It is used to define styles for the number spinner itself. panelBorderColor border-color
.rf-insp-inp It is used to define styles for the input field on the number spinner. generalSizeFont generalFamilyFont font-size font-family
.rf-insp-btns It is used to define styles for the buttons on the number spinner. panelBorderColor border-left-color
.rf-insp-dec, .rf-insp-inc These classes define styles for the step controls to decrease and increase the number. No skin parameters.
.rf-insp-dec-dis, .rf-insp-inc-dis These classes define styles for the step controls when they are disabled. No skin parameters.

Example

Here, in the following example, we are implementing <rich:inputNumberSpinner> component. This example contains the following files.

JSF File

// input-number-spinner.xhtml

Output:

RichFaces Inplacenumberspinner 1

After clicking on the spinner, value changed.

RichFaces Inplacenumberspinner 2


You may also like