Customizing Step Count for Number Inputs

[proy30]

Hello,

I am wondering about the possibility of modifying the default step increment associated with the type='number' input field in Trame. Currently, the step value is set to 1, which may not be suitable for various scientific inputs.

Example code that I am using:

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(fluid=True, classes="d-flex justify-center align-center", style="height: 100%;"):
            vuetify.VTextField(
                v_model=("text_value", ""),
                label="Enter some text",
                placeholder="Type here...",
                outlined=True,
                style="max-width: 300px;",
                type="number",
            )

server.start()

Ideally, it would be beneficial to add an attribute such as step=5 directly to the text field for easy customization. However, it does not look possible under a text field. An alternative approach might involve creating custom increment and decrement buttons, but my primary objective is to modify the step count directly within the input configuration.

Thank you for any help in advance.

[jourdain]

Just add

vuetify.VTextField(
   # ...
   step=5,
   __properties=["step"],
)

[jourdain]

You may also want to use v_model_number= instead of v_model=.

[adhamrait]

Would there be a way to set step from a state variable? Trying something like step="{{stepsize}}" doesn't work. Is it possible to make the step property reactive?

[alesgenova]

step=("stepsize",)

[adhamrait]

That works! Thanks.