Проблема
Навигационный ящик MD C не предназначен для размещения на правой стороне. Вот цитата по этой ссылке, обсуждающая эту конкретную проблему c :
Мы проверили с нашими дизайнерами, и это поведение не предназначено специально для навигационного ящика , но есть планы по созданию более гибких компонентов для выполнения sh этого в будущем.
Я вижу, что из-за этого вы использовали обходной путь, чтобы поместить навигационную панель вправо. Этот обходной путь включает использование dir="rtl". Затем вы хотели инвертировать направление переключателя MD C, используя dir="ltr" на одном из элементов-предков. Однако, согласно документам , в сложных макетах («сложный» не указан) выполнение вышеуказанного не всегда работает постоянно. Я попытался сделать это, и это не сработало.
Объяснение
Когда коммутатор MDN обнаруживает, что его предок имеет атрибут [dir="rtl"], он изменяет два свойства CSS: right и transform: translateX(...) (если отмечено). Что мы можем сделать? Мы можем изменить эти свойства CSS назад, когда у коммутатора нет указанных модификаторов. При этом коммутатор MDN будет правильно включаться слева направо и выключаться справа налево.
Решение
Для этого мы можем легко добавить еще один класс mdn-switch--ltr к контейнеру коммутатора MDN. Свойства CSS, которые заставили коммутатор MDN двигаться в противоположном направлении и начать справа, равны 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>