Как изменить шрифт и форматирование ионного диапазона Ionic 4? - PullRequest
Новая
       25

Как изменить шрифт и форматирование ионного диапазона Ionic 4?

2 голосов
/ 11 июля 2019

В качестве примера я попробовал это в своем файле global.scss: 

.range-pin {
  color: white;
  font-family: sans-serif;

  &after:{
    content: " %";
  }
}

Но это не имеет никакого эффекта.Я уверен, что это как-то связано с теневым корнем, но я не уверен, что здесь нужно сделать правильно.Добавление ion-range .range-pin для большей конкретности тоже не поможет.Как мне добиться этого изменения?

1 Ответ

1 голос
/ 12 июля 2019

Вы правы, что вывод ion-range является частью теневого домена, поэтому мы должны использовать переменные SCSS, которые Ionic предоставляет для настройки вывода.

К сожалению, Ionic Documentation не всегда перечисляет все переменные, но, глядя на основной исходный код на Github для компонента range, мы можем получить представление о том, какие переменные в настоящее время доступны.

Я смотрю на файл range.md.scss , который содержит переменные, доступные для вывода диапазона: 

:host {
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{ion-color(primary, base, 0.26)};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-md-slider-height};
  --pin-background: #{ion-color(primary, base)};
  --pin-color: #{ion-color(primary, contrast)};

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-size: $range-md-pin-font-size;
}

:host означает хост-компонент, то есть ion-range. Есть две переменные для фона и цвета, которые мы можем использовать следующим образом в нашем файле home.page.scss: 

ion-range {
    --pin-background: black;
    --pin-color: red;
}

Поскольку семейство шрифтов недоступно как переменная, мы должны иметь возможность использовать его напрямую, например: 

ion-range {
    --pin-background: black;
    --pin-color: red;
    font-family: sans-serif;
}

Ориентация на :after часть .range-pin не сработает, к сожалению, потому что она является частью теневого дома. Возможно, вам придется придумать какую-то другую черную магию, чтобы получить то, что вы хотите, или, возможно, предложить Ionic Team добавить переменную в будущем выпуске: -)

...