Как добавить собственный CSS в Ionic 3
У меня есть html-страница, написанная на Ionic. Я хочу добавить нижнюю границу к каждой строке сетки. Как мне это сделать.
<ion-grid *ngFor = "let item of items">
<ion-row>
<ion-col>
<img src='../assets/imgs/doctor.png'>
</ion-col>
<ion-col col-10>
{{item}}
</ion-col>
</ion-row>
</ion-grid>
Ответы 3
Добавьте в app.scss следующий код:
ion-row {
border-bottom: 5px solid red;
}
Это добавит нижнюю границу к каждой строке.
Если ваш компонент "пример"
example.scss:
page-example {
ion-row {
border-bottom: 1px solid black;
}
}
Вы можете добавить свой собственный CSS как глобальный или только к определенному компоненту
Вот разница
app.scss (Global) - это главный файл .scss. Он используется для объявления любых стили, которые будут использоваться во всем приложении. Хотя это «основной» файл .scss, вы вряд ли будете часто его использовать - большая часть стиля будет выполняться в специфичном для компонента .scss файлы.
У вас также будет один .scss для каждого создаваемого вами компонента. Когда мы создать страницу, у нас есть определение класса в файле .ts, шаблон в файле .html и любые стили для компонента в .scss файл. Хотя это и не обязательно, всегда следует создайте файл .scss для всех компонентов, имеющих стили. И стиль в .scss используется только для определенного компонента.
Теперь вам нужно выбрать, где вы хотите использовать следующие строки кода css
ion-row {
border-bottom: 5px solid red;
}
Это для CSS с ограниченной областью видимости