Skip to content

NumberField

A numeric editor with increment, decrement, and drag-to-scrub parts.

Loading interactive demo…

#Import

Import NumberField from quickgui.

use quickgui::*;

#Usage

let field = NumberField::new("amount", &state);
field.root().child(field.input_with(text_input(state.text())))

#Anatomy

  • NumberField::root
  • NumberField::group
  • NumberField::input
  • NumberField::increment
  • NumberField::decrement
  • NumberField::scrub_area
  • NumberField::scrub_area_cursor

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

NumberField

View source
pub fn new(root_id: impl Into<ElementId>) -> Self
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
View source
input_idpub fn input_id(self) -> ElementId—

Configures input id for this part.

pub fn input_id(self) -> ElementId
View source
increment_idpub fn increment_id(self) -> ElementId—

Configures increment id for this part.

pub fn increment_id(self) -> ElementId
View source
decrement_idpub fn decrement_id(self) -> ElementId—

Configures decrement id for this part.

pub fn decrement_id(self) -> ElementId
View source
group_idpub fn group_id(self) -> ElementId—

Stable identity of the group that wraps the steppers and the input.

pub fn group_id(self) -> ElementId
View source
scrub_area_idpub fn scrub_area_id(self) -> ElementId—

Stable identity of the scrub area.

pub fn scrub_area_id(self) -> ElementId
View source
scrub_area_cursor_idpub fn scrub_area_cursor_id(self) -> ElementId—

Stable identity of the caller-owned cursor shown while scrubbing.

pub fn scrub_area_cursor_id(self) -> ElementId
View source

NumberField::root_with

View source
pub fn root_with(self, root: Element) -> Element

Decorate an application-owned root without adding layout or appearance.

NumberField::root

View source
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

NumberField::input_with

View source
pub fn input_with(self, state: &NumberFieldState, input: Element) -> Element

Decorate the application-owned controlled input. Pass a [`crate::text_input`] built from [`NumberFieldState::text`] with the caller's own [`crate::Element::on_input`] listener. QuickGUI adds the spin-button semantics: the committed numeric value, the field's bounds and step, and invalid state.

NumberField::input

View source
pub fn input(self, state: &NumberFieldState) -> Element

Create the unstyled input part. Use [`Self::input_with`] to supply an existing element.

NumberField::increment_with

View source
pub fn increment_with(self, state: &NumberFieldState, increment: Element) -> Element

Decorate the application-owned increment button. Steppers stay out of the Tab sequence because the input already answers arrow keys, which matches native desktop spin buttons.

NumberField::increment

View source
pub fn increment(self, state: &NumberFieldState) -> Element

Create the unstyled increment part. Use [`Self::increment_with`] to supply an existing element.

NumberField::decrement_with

View source
pub fn decrement_with(self, state: &NumberFieldState, decrement: Element) -> Element

Decorate the application-owned decrement button.

NumberField::decrement

View source
pub fn decrement(self, state: &NumberFieldState) -> Element

Create the unstyled decrement part. Use [`Self::decrement_with`] to supply an existing element.

NumberField::group_with

View source
pub fn group_with(self, group: Element) -> Element

Decorate the caller-owned group that wraps the decrement, input, and increment parts. Base UI's Group keeps the three controls one addressable unit; QuickGUI supplies the stable identity and the Group role and adds no layout, so the application still chooses the row, the order, and the spacing.

NumberField::group

View source
pub fn group(self) -> Element

Create the unstyled group part. Use [`Self::group_with`] to supply an existing element.

NumberField::scrub_area_with

View source
pub fn scrub_area_with(self, state: &NumberFieldState, scrub_area: Element) -> Element

Decorate the caller-owned area a pointer drag scrubs the value over. Attach a [`crate::ViewContext::pointer_listener`] registered for [`Self::scrub_area_id`] and forward the event to [`NumberFieldState::apply_scrub`]. QuickGUI supplies the identity, the axis-appropriate resize cursor, drag exclusion, and text-selection suppression; the area is hidden from assistive technology because the input already carries the spin-button semantics.

NumberField::scrub_area

View source
pub fn scrub_area(self, state: &NumberFieldState) -> Element

Create the unstyled scrub area part. Use [`Self::scrub_area_with`] to supply an existing element.

NumberField::scrub_area_cursor_with

View source
pub fn scrub_area_cursor_with(self, cursor: Element) -> Element

Decorate the caller-owned cursor a scrub area shows while it is being dragged. Mount it only while [`NumberFieldState::is_scrubbing`] is true and place it from [`NumberFieldState::scrub_position`]; QuickGUI supplies the identity and keeps the decoration out of the accessible name and out of hit testing.

NumberField::scrub_area_cursor

View source
pub fn scrub_area_cursor(self) -> Element

Create the unstyled scrub area cursor part. Use [`Self::scrub_area_cursor_with`] to supply an existing element.