Добрый вечер!
Я веду разработку мобильного приложения на Ionic 7 Framework + Angular.
На этапе разработки страницы, на которой требуется разместить поле с типом range, а над ним разместить ленту значений из диапазона данного поля.
Присылаю изображение с дизайна того, как это должно выглядеть:
Кусок кода HTML-страницы с данным полем:
<ng-container *ngSwitchCase="'range'">
<ion-grid fixed>
<ion-row class="range-labels">
<!-- Динамическое создание колонок для пинов -->
<ion-col *ngFor="let num of generateRange(field.minValue, field.maxValue); let i = index" [class.active]="rangeValues[field.name] === i">
{{ num }}
</ion-col>
</ion-row>
<ion-row>
<ion-range [formControlName]="field.name" [min]="field.minValue" [max]="field.maxValue" [ticks]="true" [snaps]="true" (ionChange)="onRangeChange($event, field.name)"></ion-range>
</ion-row>
</ion-grid>
</ng-container>
Адаптивная верстка сделана при помощи элементов ion-grid, ion-row, ion-col.
За основу я использовал UI-компонент ion-range и кастомизировал его под наш дизайн:
ion-range {
--bar-height: 6px;
--bar-border-radius: 4px;
--knob-size: 6px;
--knob-box-shadow: 0px 0px 0px 5px var(--dl-color-purple-main);
}
ion-range::part(tick), ion-range::part(tick-active) {
width: 0;
height: 0;
}
ion-range::part(knob) {
background: white;
}
ion-range::part(bar) {
background: var(--dl-color-gray-1);
}
ion-range::part(bar-active) {
background: var(--dl-color-purple-main);
border-radius: 4px 0 0 4px;
}
.range-labels ion-col {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.range-labels ion-col.active {
color: var(--ion-color-primary);
font-weight: bold;
}
Выглядит это сейчас пример вот так:
Можем заметить, что ползунок стоит не на уровне значения выше. А всё это потому что ширина ion-range некорректная для того, чтобы было ровно положение и не было никаких смещений.
Контроль отступами для ion-range происходит с помощью стилей padding-inline-*. Мы его должны подобрать таким образом, чтобы линия начала отступа со стороны ion-range совпадала с центром первой колонки (значения из диапазона в линейке), грубо говоря половина от ширина каждой колнку в силу адаптивности. Проблема основная заключается в том что мы не знает какая ширина каждой колонки в линейке значений и она соответственно динамически меняется при масштабировании экрана в силу адаптивности. Поэтому реализация подсчёта отступов для ion-range мне кажется костыль в плане реализации.
Если есть корректное понимание, как лучше всего сделать, пожалуйста, дайте знать!
Простой
Простой
