Project

General

Profile

Actions

Improvements #9343

open

(How to) Add switch widget to Wt

Added by Winfried Dobbe about 3 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
11/16/2021
Due date:
% Done:

0%

Estimated time:

Description

I am trying to create a switch widget as explained at
https://www.w3schools.com/howto/howto_css_switch.asp
and
https://www.htmllion.com/css3-toggle-switch-button.html.

I noticed that WCheckBox already generates:

<label id="lo52xm7s" name="lo52xm7s">
    <input id="ino52xm7s" name="ino52xm7s" type="checkbox">
    <span id="to52xm7s" name="to52xm7s" style="white-space:normal;">Detectors</span>
</label>

So only adding class 'slider' to the label and adding line

<span class="slider"></span>

inside the label element could be enough.

What would be the best approach, is it possible to derive from WAbstractToggleButton or WCheckBox?

class SwitchButton : public Wt::WAbstractToggleButton
{
    public:
        /* ... */

    protected:
        virtual void updateInput(DomElement& input, bool all) override;
        virtual void updateDom(Wt::DomElement &element, bool all) override;
};

void SwitchButton::updateDom(Wt::DomElement& element, bool all)
{
    Wt::WAbstractToggleButton::updateDom(element, all);

    /* add class attribute and extra span element */
}

The problem is that I don't see how I can access the DomElement children.
The alternative is to create a new widget class similar to WAbstractToggleButton, but that would duplicate a lot of code.

And finally: how about adding such a switch widget to Wt in the future ?

Thanks in advance for any help,
Winfried

No data to display

Actions

Also available in: Atom PDF