将 ltr 提供给 MDC 开关在 rtl MDC 抽屉内不起作用

Question

MDC 抽屉 (RTL) 内的 MDC 开关有一个拇指，当它打开时放在右侧而不是左侧。我希望拇指在关闭时位于左侧，在打开时位于右侧（我希望拇指从左侧移动到右侧）。

我尝试将dir="ltr" 属性添加到mdc-switch 元素，但没有成功。

window.mdc.autoInit();
var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

var button = document.querySelector('button');
mdc.ripple.MDCRipple.attachTo(button);
button.addEventListener('click', function() {
  drawer.open = true;
});

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<aside class="mdc-drawer mdc-drawer--modal" dir="rtl">
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <div class="mdc-form-field">
        <div class="mdc-switch" data-mdc-auto-init="MDCSwitch" id="mdcAutoScroll" dir="ltr">
          <div class="mdc-switch__track"></div>
          <div class="mdc-switch__thumb-underlay">
            <div class="mdc-switch__thumb">
              <input type="checkbox" id="autoscroll-switch" class="mdc-switch__native-control" role="switch">
            </div>
          </div>
        </div>
        <label for="autoscroll-switch"><span class="mdc-typography--subtitle2 omnicolor">Log Auto Scroll</span></label>
      </div>
      <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
        <span class="mdc-list-item__text">Outgoing</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
        <span class="mdc-list-item__text">Drafts</span>
      </a>
    </nav>
  </div>
</aside>
<div class="mdc-drawer-scrim"></div>
<button class="mdc-button">Open</button>

CODEPEN

Answer 1

问题

MDC 导航抽屉并非真正设计为放置在右侧。这是quote from this link discussing this specific issue：

我们已与我们的设计师核实过，此行为并非旨在 专门支持导航抽屉，但有计划 未来可以使用更灵活的组件来实现这一目标。

我可以看到，因此，您使用了一种解决方法将导航抽屉放置在右侧。该解决方法涉及使用dir="rtl"。然后，您想在祖先元素之一上使用 dir="ltr" 反转 MDC 开关的方向。但是，根据docs，在复杂布局（未指定“复杂”）中，执行上述操作并不总是有效。我试过这样做，但没有用。

---

说明

当 MDN Switch 检测到其祖先具有属性 [dir="rtl"] 时，它会修改两个 CSS 属性：right 和 transform: translateX(...)（选中时）。我们能做些什么？我们可以将这些 CSS 属性更改回当开关没有所述修饰符时。这样做，MDN Switch 将正确地从左到右打开和从右到左关闭。

---

解决方案

为此，我们可以轻松地将另一个类 mdn-switch--ltr 添加到 MDN Switch 的容器中。导致 MDN Switch 向相反方向移动并从右侧开始的 CSS 属性分别为 transform: translate(-20px) 和 right: 18px。将这些覆盖（使用更高的特异性或关键字!important）到transform: translate(20px) 和right: 0px 的ltr 值可以解决问题。

这是一个工作示例（使用更高的特异性）。请尝试运行它。

window.mdc.autoInit();
var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

var button = document.querySelector('button');
mdc.ripple.MDCRipple.attachTo(button);
button.addEventListener('click', function() {
  drawer.open = true;
});

[dir="rtl"] .mdc-switch--ltr .mdc-switch__thumb-underlay  {
  right: 0;
}

[dir="rtl"] .mdc-switch--ltr.mdc-switch--checked .mdc-switch__thumb-underlay {
  transform: translateX(20px);
}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<aside class="mdc-drawer mdc-drawer--modal" dir="rtl">
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <div class="mdc-form-field">
      
      
        <div class="mdc-switch mdc-switch--ltr" data-mdc-auto-init="MDCSwitch" id="mdcAutoScroll">
          <div class="mdc-switch__track"></div>
          <div class="mdc-switch__thumb-underlay">
            <div class="mdc-switch__thumb">
              <input type="checkbox" id="autoscroll-switch" class="mdc-switch__native-control" role="switch">
            </div>
          </div>
        </div>
        
        
        <label for="autoscroll-switch">
          <span class="mdc-typography--subtitle2 omnicolor">Log Auto Scroll</span>
        </label>
      </div>
      <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
        <span class="mdc-list-item__text">Outgoing</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
        <span class="mdc-list-item__text">Drafts</span>
      </a>
    </nav>
  </div>
</aside>
<div class="mdc-drawer-scrim"></div>
<button class="mdc-button">Open</button>

Answer 2

您可以通过旋转开关来实现。这是工作的Codepen

// rotate the switch
.mdc-switch {
  transform: rotate(180deg);
  transform-origin: center;

  // to keep knob shadow down rotate the knob underlay
  .mdc-switch__thumb-underlay {
    transform: rotate(180deg);
    transform-origin: center;
  }

  // for some reason the action region moves when
  // switch status changes. fix that.
  &:not(.mdc-switch--checked) {
    .mdc-switch__native-control {
      transform: translateX(25%);
    }
  }
}