ionic4: граница элемента-иона-верхний левый радиус, -топ-вправо, -низу-слева, -низу-справа - PullRequest
Новая
       27

ionic4: граница элемента-иона-верхний левый радиус, -топ-вправо, -низу-слева, -низу-справа

0 голосов
/ 15 марта 2019

Итак, я занимался проектом с 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 .

Я также пытался жестко привязать style к элементу, но он не будет работать.

Если кто-то может пролить свет на это, я бы очень признателен.

Спасибо за ваше время!

1 Ответ

0 голосов
/ 15 марта 2019

Свойство border-radius принимает до 4 различных значений.

Значения описаны в следующем порядке: первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к левому нижнему углу. 

#example {
  border-radius: 50px 20px 30px 10px;
}

Вы можете получить больше информации о свойстве радиуса границы здесь

Более того, я думаю, вы неправильно выбираете первого ребенка

Во вложенном файле SCSS вы должны набрать: 

&:first-child {
    border-radius: 12px 12px 0 0;
  }

Проверьте это на JSFiddle

...