Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 533 forks source link

Numeric scroll responsivitiy #2822

Closed erikthysell closed 3 years ago

erikthysell commented 3 years ago

I very much appreciate the functionality of being able to use the scroll wheel to change value of a NumericEdit input that exists in some other desktop frameworks/packages.

I have tried that "manually" on a normal input like: <input type="number" id="t0Input" @bind-value="par1" @onwheel="(e=>MouseWheelAdjustParam(e,ParameterName.Par1))" />

And the code behind:

   private double _par1Step = 1.0;
   private double _par2Step = 0.1;
   private double _par1;
   private double _par2;

    void MouseWheelAdjustParam(WheelEventArgs e, ParameterName par)
    {
        var n = e.DeltaY;
        var f = Math.Sign(n);
        switch (par)
        {
            case ParameterName .Par1:
                _par1 = f*_par1Step
                break;
            case ParameterName .Par2:
                _par1 = f*_par2Step
                break;
        }
    }

It would be so nice to have this functionality in Blazorise.

stsrki commented 3 years ago

This seems to work the same for both Blazorise and native input.

<NumericEdit TValue="double" @bind-Value="_par1" @onwheel="(e=>MouseWheelAdjustParam(e,ParameterName.Par1))" />

<input type="number" id="t0Input" @bind-value="_par1" @onwheel="(e=>MouseWheelAdjustParam(e,ParameterName.Par1))" />
@code{
    enum ParameterName
    {
        Par1,
        Par2
    }

    private double _par1Step = 1.0;
    private double _par2Step = 0.1;
    private double _par1;
    private double _par2;

    void MouseWheelAdjustParam( WheelEventArgs e, ParameterName par )
    {
        var n = e.DeltaY;
        var f = Math.Sign( n );
        switch ( par )
        {
            case ParameterName.Par1:
                _par1 = f * _par1Step;
                break;
            case ParameterName.Par2:
                _par1 = f * _par2Step;
                break;
        }
    }
}

Although to be honest it feels strange. Not sure if we would like to have this behavior as it is not a standard way of controlling the input.

David-Moreira commented 3 years ago

I guess it could be opt in?

stsrki commented 3 years ago

I don't know. To make it work we would need to preventDefault for the mouse wheel. And that would disable page scroll when the mouse is over the input. I'm still not convinced that it is good UX.

David-Moreira commented 3 years ago

Ah... I see...

erikthysell commented 3 years ago

Stupid of me not to use it directly with in Blazorise. Thanks @stsrki . The reason I use it is when I have scientific computations and plot the result, it is very quick way of looking at the effect of various parameters. Of course one can use the arrow keys but in a model with 12 inputs it is a lot of tabbing to switch between parameters. Mouse is quicker here. (in my experience).

Even more, not so used possibility that I have seen in LabView, is the possibility to step in 10, 100 depending on your markers position in the number (if marker is by the 1 in 100 it steps by 100) ...