-1

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>

编解码器

4

2 回答 2

3

问题

MDC 导航抽屉并非真正设计为放置在右侧。这是此链接中讨论此特定问题的引述：

我们已经与我们的设计人员进行了核对，并且不打算专门为导航抽屉支持此行为，但未来计划使用更灵活的组件来实现此目的。

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

解释

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

解决方案

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

于 2020-04-07T05:59:19.980 回答
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%);
    }
  }
}
于 2020-04-06T23:09:27.940 回答