Completed
Last Updated: 02 Sep 2020 07:29 by ADMIN
Release 2.17.0
Datafyer
Created on: 23 Oct 2019 19:12
Category: Button
Type: Feature Request
20
Switch style button

In some cases I have need of a true/false or on/off selection.

Currently I am doing that through drop down options however it would be more natural in some cases to have a switch style button.

8 comments
Werner
Posted on: 04 Mar 2020 11:12
... regarding theming an implementation as Telerik Blazor control would be preferrable
Peter
Posted on: 03 Mar 2020 08:25

I was looking for a slide switch control to manage binary input, similar to the ones common to many mobile apps. I found the following that does a pretty good job using a bit of HTML and some clever CSS. If anyone is looking for something similar you might like to give this a try. Here's the link:

https://bootsnipp.com/snippets/gv6Pe

 

Good luck!

Peter

 

ADMIN
Marin Bratanov
Posted on: 14 Feb 2020 13:06

Hi Bryon,

You could style your own elements (spans, divs, li elements, whatever) and use a simple expression in their class list to determine whether to add a class that denotes active state, something like this: https://github.com/telerik/blazor-stocks/blob/master/Client/Components/StocksChart/TopAreaContainer.razor#L16

I think this will be easier than hacking at the styles of <button> elements, while at the same time attaching an @onclick is exactly the same for a <span> and <button> in Blazor.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Bryon
Posted on: 13 Feb 2020 16:09
I am also interested in this.  I converted a dropdown of three options to a row of three small icon buttons.  Programatically, I can track the state of each button with corresponding bool variables.  But what I can't figure out is how to manage the visual style of each button to appear in a pushed state verses not-pushed state.
Datafyer
Posted on: 25 Oct 2019 22:13

Yes, whether it is a button or a checkbox I guess is a different conversion.
Essentially something that toggles true/false or on/off.

I am sure I could do that currently through some CSS magic however having it as a drop in control would obviously be easier.

ADMIN
Marin Bratanov
Posted on: 25 Oct 2019 06:20

Hello Patrick,

I was thinking about this in terms of functionality, not in terms of all possible UI implementations. If I understand you correctly, you want checkboxes that can look like this: https://demos.telerik.com/kendo-ui/switch/index. Am I correct?

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Datafyer
Posted on: 24 Oct 2019 18:52
This would certainly work however visually I was thinking of an actual switch.
ADMIN
Marin Bratanov
Posted on: 24 Oct 2019 07:44

Hi Patrick,

A dropdown with two options is one choice, another common choice is a checkbox.

Here's an example how you can style checkboxes with our theme:

 

    <ul>
        <li>
            <input type="checkbox" id="cb1" class="k-checkbox" checked="checked">
            <label class="k-checkbox-label" for="cb1">Option 1</label>
        </li>
        <li>
            <input type="checkbox" id="cb2" class="k-checkbox">
            <label class="k-checkbox-label" for="cb2">Option 2</label>
        </li>
        <li>
            <input type="checkbox" id="cb3" class="k-checkbox" checked="checked" disabled="disabled">
            <label class="k-checkbox-label" for="cb3">disabled checkbox</label>
        </li>
    </ul>

If this is not what you are looking for, could you provide some more details and examples?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor