Tesserae - Number Picker

NumberPicker

Description

The NumberPicker component is a numeric input control that leverages the native HTML number input field. It provides a fluent API to configure properties such as minimum, maximum, and step values. As part of the Tesserae Components group, it is ideal for scenarios where users need to select or input a numerical value. In addition, it supports text formatting features and style customizations like background and foreground colors.

Usage

Instantiate a NumberPicker using the Tesserae.UI helper method. You can create a default NumberPicker or initialize it with a starting value, and then chain configuration methods to set properties like minimum, maximum, or step values.

number-picker-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var numberPicker = NumberPicker()           // Creates a NumberPicker with default initial value of 0
                .SetMin(5)                             // Sets the minimum allowed value
                .SetMax(20)                            // Sets the maximum allowed value
                .SetStep(5);                           // Sets the step increment value

            // Render the control on the page (assuming a container exists)
            numberPicker.Render();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(numberPicker);
        }
    }

}

API reference

class

NumberPicker

public class NumberPicker : Input<NumberPicker>, ITextFormating, IHasBackgroundColor, IHasForegroundColor

A form input for entering a numeric value, with optional min/max bounds and step.

Constructors

Constructor

NumberPicker

public NumberPicker(int defaultValue = 0) : base("number", defaultValue.ToString())

Initializes a new instance of this class.

Properties

Property

NumberPicker.Value

public int Value

Gets or sets the current value of the component.

Property

NumberPicker.Max

public int Max { get ; set ; }

Gets or sets the maximum value accepted by the component.

Property

NumberPicker.Min

public int Min { get ; set ; }

Gets or sets the minimum value accepted by the component.

Property

NumberPicker.Step

public int Step { get ; set ; }

Gets or sets the step increment used by the component.

Property

NumberPicker.Size

public TextSize Size { get ; set ; }

Gets or sets the size of the component.

Property

NumberPicker.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the font weight of the component.

Property

NumberPicker.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment of the component.

Property

NumberPicker.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

NumberPicker.Foreground

public string Foreground { get ; set ; }

Gets or sets the CSS color (foreground) of the component.

Methods

Method

NumberPicker.SetMax

public NumberPicker SetMax(int max)

Sets the max of the component.

Method

NumberPicker.SetMin

public NumberPicker SetMin(int min)

Sets the min of the component.

Method

NumberPicker.SetStep

public NumberPicker SetStep(int step)

Sets the step of the component.

Samples

Basic NumberPicker Configurations

The following sample demonstrates different configurations of the NumberPicker, including default initial values, step increments, minimum and maximum constraints, and the disabled/required states.

number-picker-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var stack = Stack().Width(40.percent()).Children(
                Label("Standard").SetContent(NumberPicker()),
                Label("With default initial value of 2").SetContent(NumberPicker(2)),
                Label("With step increment of 10").SetContent(NumberPicker().SetStep(10)),
                Label("With max of 10").SetContent(NumberPicker().SetMax(10)),
                Label("With min of 5").SetContent(NumberPicker(8).SetMin(5)),
                Label("Disabled").Disabled().SetContent(NumberPicker().Disabled()),
                Label("Required").Required().SetContent(NumberPicker().Required()),
                Label("With error message").SetContent(NumberPicker().Error("Error message").IsInvalid()),
                Label("With validation")
                    .SetContent(NumberPicker().Validation(numberPicker =>
                        numberPicker.Value % 2 == 0 ? null : "Please choose an even value"))
            );

            stack.Render();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(stack);
        }
    }

}

Referenced by

Time Picker

NumberPicker

Description

Usage

API reference

Constructors

NumberPicker

Properties

NumberPicker.Value

NumberPicker.Max

NumberPicker.Min

NumberPicker.Step

NumberPicker.Size

NumberPicker.Weight

NumberPicker.TextAlign

NumberPicker.Background

NumberPicker.Foreground

Methods

NumberPicker.SetMax

NumberPicker.SetMin

NumberPicker.SetStep

Samples

Basic NumberPicker Configurations

See also

Referenced by