使LTR到MDC交换机在RTL MDC抽屉中不起作用

2024-06-02 • 问答

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

问题

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

我们已经与我们的设计师进行了核对，这种行为并非旨在专门支持导航抽屉，但是有计划以便将来有更多灵活的组件来实现此目的。

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

说明

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

解决方案

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

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

right: 0px

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);
}

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

使LTR到MDC交换机在RTL MDC抽屉中不起作用

domeimei 回答：使LTR到MDC交换机在RTL MDC抽屉中不起作用

问题

说明

解决方案

大家都在问