时间戳

首页 > 解决方案 > ionic 4 如何将离子范围引脚放置在范围的底部

css - ionic 4 如何将离子范围引脚放置在范围的底部

问题描述

我想将 ionic range pin 放在旋钮的底部并使其始终可见我如何在 ionic 4 中执行此操作，我知道如何在 ionic 3 中执行此操作，但它似乎在 ionic 4 中不起作用，可能这个是由影子 DOM 引起的

我无法访问 .range-md .range-pin 因为它在影子 dom 中，而且 .range-md .range-knob-handle .range-pin 也无法访问

.range-md .range-knob-handle .range-pin {
 transform: translate3d(0, 0, 0) scale(1); }

.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
 transform: scale(1); }

.range-ios .range-knob-handle .range-pin {
 transform: translate3d(0, 0, 0) scale(1); }

我怎样才能将它们放在离子 4 的底部？

标签： cssionic-frameworksassionic4css-variables

解决方案

如果您使用的是 Ionic 版本并且已经使用 CSS Shadow Parts 3，那么您可以通过以下方式实现：

ion-range::part(pin) {
  transform: translate3d(0px, 50px, 0px) scale(1);
}

推荐阅读