为 MDC 开关提供 ltr 在 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

您可以通过旋转开关来实现。这是工作 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%);
    }
  }
}

Answer 2

问题

MDC Navigation Drawer 并非真正设计为放置在右侧。这是 quote from this link discussing this specific issue:

We've checked with our designers and this behavior isn't intended to be supported for navigation drawer specifically, but there are plans for more flexible components to accomplish this in the future.

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

说明

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

解决方案

为此，我们可以很容易地在 MDN Switch 的容器中添加另一个 class mdn-switch--ltr。导致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>

为 MDC 开关提供 ltr 在 rtl MDC 抽屉内不工作

Giving ltr to MDC Switch not working inside a rtl MDC Drawer

javascript

jquery

css

mdc-components

问题

说明

解决方案