Изменить цвет фона ионного элемента в Ionic 4.0
Добрый день всем
Надеюсь, никто об этом еще не спрашивал ... Я нашел несколько похожих сообщений, например Вот этот, но это не работает для Ionic 4.0. То, что они предлагают здесь, похоже, не работает для меня, поскольку Ionic 4.0, похоже, не вводит то же самое.
<div class='item-content'></div>
элемент обсуждается в связанном сообщении.
Я изо всех сил пытаюсь изменить цвет фона ионного элемента Ionic 4.0. Я пытаюсь сделать его белым фоном, в то время как приложение имеет синий фон.
В инспекторе кода я вижу, что он применяет мой стиль, но не отображается в браузере.
Вот образец моего кода:
<ion-item class = "light-back">
<ion-icon name = "search" color = "light"></ion-icon>
<ion-input required type = "text" placeholder = "Search for a site" color = "light">
</ion-input>
</ion-item>
.light-back{
background-color: #fff;
}
Ниже приведен снимок экрана, на который я смотрю, который показывает, что элемент (панель поиска) получает стиль, но не реализует и не показывает его.
Любой совет будет очень признателен.
у меня работает: stackblitz.com/edit/ionic-kecw4y?file=pages%2Fhome%2Fhome .html
Ответы 6
Кажется, я нашел исправление. Вам просто нужно добавить color = "light" к элементу ion-item. См. Ниже:
<ion-item class = "light-back" color = "light">
<ion-icon name = "search" color = "light"></ion-icon>
<ion-input required type = "text" placeholder = "Search for a site" color = "light">
</ion-input>
</ion-item>
Проблема в том, что другой код вводится на основе моей темы, которую я установил на свой основной цвет из моих переменных, поэтому мне нужно указать, что я снова использую светлую тему (которую я уже установил как #fff в своих переменных ).
Надеюсь, это поможет кому-то в будущем :)
Это правильно, спасибо! Мне интересно, каково техническое объяснение того, почему.
Как применить цвет фона с помощью ngStyle? не работает. Мне нужно визуализировать элементы ion-item на основе массива и динамически устанавливать цвет фона для каждого элемента.
Возможно, вы могли бы определить несколько классов, каждый с разным цветом. Затем вы можете применить каждый класс условно, вместо того, чтобы пытаться применить встроенные стили для каждого. Что-то вроде: .class-one ion-item {--ion-background-color: #fff; } .class-two ion-item {--ion-background-color: # 000; }
Используйте это специальное правило ионного CSS:
ion-item{
--ion-background-color:#fff;
}
Если я применяю отступы, значит, он работает не так, как задумано. Пожалуйста, посмотрите мой отвечать
Я нашел рабочий в ionic 4. Примените 2 приведенных ниже CSS файла в свой .scss файл, в котором вы реализовали ion-list и ion-item:
ion-item {
--ion-background-color: white !important;
}
.item, .list, .item-content, .item-complex {
--ion-background-color: transparent !important;
}
Ни один из ответов не помог мне полностью, хотя @labago ответ работает частично.
--ion-background-color работает только со статическим контентом без каких-либо отступов или полей. Как только я начинаю применять отступы, это не дает ожидаемых результатов, поэтому ниже приводится обходной путь, который я использовал в своем приложении:
ion-item {
padding:20px;
--ion-background-color: blue;
background: blue;
}
Это работает для ionic 4
1 - Открыть файл: src / theme / variables.scss 2 - вставить цвет кода:
/** transparent **/
--ion-color-transparent: #fafafa;
--ion-color-transparent-rgb: 245, 61, 61;;
--ion-color-transparent-contrast: #ffffff;
--ion-color-transparent-contrast-rgb: 255, 255, 255;
--ion-color-transparent-shade: #dcdcdc;
--ion-color-transparent-tint: #fbfbfb;
obs: #fafafa соответствует прозрачному цвету
2 - откройте файл global.scss и вставьте код:
.ion-color-transparent {
--ion-color-base: var(--ion-color-transparent) !important;
--ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
--ion-color-contrast: var(--ion-color-transparent-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-transparent-shade) !important;
--ion-color-tint: var(--ion-color-transparent-tint) !important;
}
3 - вызвать прозрачный цвет в ion-элементе
<ion-item color = "transparent">
</ion-item>
Если вы хотите изменить цвет фона нескольких элементов в
<ion-item style = "--ion-background-color: rgb(206, 197, 148);">
<ion-textarea autofocus id = "textinput" type = "text" value = "escribe un mensaje" style = "width: 90%; height: 70%; font-family: 'Gil Sans';"></ion-textarea>
<ion-icon name='send'></ion-icon>
</ion-item>
Можете ли вы установить свой соответствующий код в stackblitz, разветвить его и опубликовать ссылку: stackblitz.com/edit/ionic-fhhzdy?file=pages%2Fhome%2Fho me.css