Ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-right
Итак, я выполнял проект с Ionic v4, и теперь я не могу заставить работать радиус границы, потому что я использую классы для определения на ngFor, если это первый элемент или последний элемент.
Если это первый элемент, он должен изменить только радиус границы top-left и top-right. И если это последний элемент, он должен изменить только радиус границы bottom-left и bottom-right.
Проблема в том, что поскольку он работает с Shadow DOM, я не могу применить этот CSS.
Я сделал следующее:
В моем компоненте.scss
:host {
ion-item {
&.first {
--border-radius: 12px;
// --border-top-left-radius: 12px;
// --border-top-left-radius: 12px;
// border-top-left-radius: 12px;
// border-top-left-radius: 12px;
}
}
}
Но это не то, что я хочу, закомментированный CSS не будет работать. И единственная переменная, которая может изменить эти стили Shadow DOM, предназначена для 4 border-radius согласно документации: ion-item Ionic Документация.
Я также пытался вставить style в элемент, но это не сработает.
Если кто-то может пролить свет на это, я был бы очень признателен.
Спасибо за ваше время!
Ответы 1
Свойство border-radius может принимать до 4 разных значений.
Значения описываются в следующем порядке: первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу.
#example {
border-radius: 50px 20px 30px 10px;
}
You can get more information on the border radius property here
Более того, я думаю, что вы неправильно выбираете первого ребенка
Во вложенном файле SCSS лучше ввести:
&:first-child {
border-radius: 12px 12px 0 0;
}
Боже мой, я надеюсь, что мой работодатель не прочитает мой вопрос, мой разум был сожжен, когда я задал его, вы совершенно правы.
Рассматривали ли вы просто не использовать теневой DOM для этого компонента?