SVG toggle button class
An SVG push toggle typically defines at least the following two faces:
You can define an SVG toggle button using UiBinder templates. Use
the svgui:upFace, svgui:upDisabledFace, svgui:upHoveringFace
svgui:downFace, svgui:downDisabledFace, svgui:downHoveringFace
tags to defined faces.
Depending on your needs, you can either define the SVG inline with
the svgui:element tag. This can be convenient if you want to
localize the button label, or use styles defined in the template.
Or you can use an
org.vectomatic.dom.svg.ui.SVGResource with the resource attribute,
if your SVG is large or if you want to keep your template more readable.
Each face contains one or more svgui:styleChange tags.
The classNames attribute specifies the name of the
CSS class selectors to be applied to the SVG element when the face
is activated.
The following section shows a sample UiBinder template:
<svgui:SVGToggleButton resource="{resources.led}">
<svgui:upFace><svgui:styleChange classNames="{style.led-up}"/></svgui:upFace>
<svgui:downFace><svgui:styleChange classNames="{style.led-down}"/></svgui:downFace>
</svgui:SVGToggleButton>
Note that by default the inline SVG in SVGToggleButtons is validated against the SVG 1.1 XSD schema.
You can opt out of validation by setting the
validated="false"
attribute on the
svgui:element tag.