polymermaterial-designtogglepolymer-2.xpaper-elements

Is paper-toggle-button compliant with Material Design?

On this page, Material Design seems to specify toggle switch buttons should be placed on the right side of their label.

enter image description here

enter image description here

But on the <paper-toggle-button> page of WebComponents.org, the only available option appears to place the toggle switch button on the left side of the label.

enter image description here

And none of the styling options seem to address this issue.

Is this a fundamental incompatibility with MD or am I missing something? In any event, what is the recommended best practice to comply with the MD spec?

Edit:

Here is an open issue on Github.

And here is an open PR.

So apparently a fix is in progress. I just need to know what is "best practice" in the meantime?

Solution

  • To Materialize <paper-toggle-button>, do not use the installed label feature. Instead, create a separate label that can be independently positioned and styled.

    <div class="start">
  Auto-rotate screen
</div>
<div class="end">
  <paper-toggle-button checked="{{autoRotateScreen}}"></paper-toggle-button>
</div>