如何更改ion-item的文本颜色
要更改ion-item的文本颜色，可以通过CSS样式来实现。可以使用以下步骤来更改ion-item的文本颜色：
- 在ion-item所在的页面或组件的CSS文件中，添加一个自定义的CSS类或选择器，用于定位要更改颜色的ion-item元素。例如，可以使用类名
.custom-item来选择ion-item。 - 在CSS类或选择器中，使用
color属性来设置文本颜色。可以使用颜色名称、十六进制值或RGB值来指定颜色。例如，要将文本颜色设置为红色，可以使用以下代码：
.custom-item {
color: red;
}- 将定义好的CSS类或选择器应用于ion-item元素。可以通过在ion-item元素上添加
class属性并设置为定义的CSS类名，或者使用CSS选择器来选择ion-item元素。例如：
<ion-item class="custom-item">
<!-- item content -->
</ion-item>通过以上步骤，你可以成功更改ion-item的文本颜色为所需的颜色。
关于ion-item的更多信息和用法，你可以参考腾讯云的Ionic官方文档：Ionic - ion-item。
相关·内容
3回答
我一直在努力想办法改变ion-item的文本颜色。这就是我到目前为止所做的，我已经找到了改变背景颜色的方法。
<ion-item style="background-color: #82B1FF">
但是如何改变文本的颜色呢？
浏览 37提问于2017-01-23得票数 5
在Ionic (3)中，如何以编程方式设置项目的文本颜色？
例如，单击列表项将更改(切换)列表项的颜色。
<ion-content>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let element of elements" #listitem (click)="changeTextColor(listitem)">
Click to change text color of {{element}}
&l
浏览 0提问于2018-08-17得票数 1
回答已采纳
我在theme/variables.scss中的提醒样式是这样的(黑色背景，白色文本)
ion-alert {
--background: black !important;
--color: white !important;
button {
color: white !important;
font-size: 20px !important;
}
}
<ion-item>
<ion-label>Quantity</ion-label>
<ion-select fo
浏览 57提问于2019-11-15得票数 1
回答已采纳
我想将此菜单的背景颜色更改为标题栏的颜色。(橙色) ("bar-assertive")
这里是app.html中的离子代码
<ion-nav-view name="content" ></ion-nav-view>
</ion-side-menu-content class ="bar-assertive">
<ion-side-menu side="right">
<header class="bar bar-header bar-assertive
浏览 0提问于2015-10-14得票数 1
2回答
我有一个离子2范围滑块组件，我想做的是设置一个梯度颜色的滑块。基本上从0到10，其中0是灰色的，10是红色的。如何用颜色渐变来设计我的范围滑块？
这是我的距离滑块：
<ion-item text-wrap>
<ion-label stacked>Beperking: </ion-label><ion-badge item-right color="secondary">{{ Beperking }}</ion-badge>
<ion-range min="0" max="
浏览 2提问于2017-05-30得票数 0
回答已采纳
4回答
更改输入组件输入区域线的默认颜色
、、、、
您知道如何更改输入区域行的默认颜色吗？我无法找到任何SasS variable或定制的方法来做到这一点。
这是
<ion-item>
<ion-input type="password" placeholder="Password Input"></ion-input>
</ion-item>
浏览 7提问于2017-09-04得票数 0
1回答
我有一个可点击的ion-list of ion-item。我希望在单击列表时更改所选项目的颜色，并且只在此时更改；因此，当用户停止按压该项时，其颜色将更改为默认颜色。
只有在按下项目时才能找到更改颜色，但即使停止按压该项目，颜色也会保持不变。
编辑:这是列表的html代码：
<ion-list>
<ion-item *ngFor="let tag of tagList; let i=index" (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
&l
浏览 1提问于2017-06-20得票数 1
回答已采纳
3回答
离子4:样式输入占位符
、、、
我正在尝试将Ionic 4 application.The HTML的占位符样式如下：
<form>
<ion-grid>
<ion-row class='label'>Name</ion-row>
<ion-row>
<ion-item>
<ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name&#
浏览 6提问于2018-08-21得票数 16
回答已采纳
如何设置动态背景颜色？我需要基于数组呈现ion-item元素。我需要在ngFor循环中设置背景颜色，背景颜色来自数组中的每个值。有什么想法吗？ 我试过这样的东西。但它不起作用 <ion-list *ngFor="let shift of shifts">
<ion-item [style.--background]="'shift.color'">{{ shift.color }} qwe</ion-item>
</ion-list>
浏览 32提问于2019-10-14得票数 0
我正在使用ion-select来选择一个选项，并且我想更改ion-option的文本颜色。我的代码如下...
<ion-item>
<ion-select interface="popover" [(ngModel)]="selectedGrp" (ionChange)="changeGrp()">
<ion-option value="" selected disabled>Select</ion-option>
<ion-opti
浏览 5提问于2018-07-10得票数 3
回答已采纳
1回答
我有一个Ionic + Electron桌面应用程序，在从菜单中选择当前项目时，我希望更改所选项目的图标src。目前，我可以使用'routerLinkActive‘属性单独更改项目文本的颜色。如何在链接激活时更改ion-icon的src？
<ion-item lines="none" routerLinkActive="activeHighlight" routerLink="/dashboard" mode="md" class="menuItems">
<ion-ic
浏览 0提问于2020-08-28得票数 0
2回答
我尝试过多种方法，但我似乎弄不清楚这一件事。我有一个带有多个离子项的，它是在*ngFor的帮助下从数组中获得的。当我点击一个项目，我只希望它的颜色被改变。我已经成功地改变了所有的离子项目的颜色，当我点击其中一个，但，这不是我想要的.
这是一个代码片段：
<ion-col>
<ion-item *ngFor="let exercise of exercisesArray" (click)="onClick(exercise)" [ngStyle]="{color: color}">
浏览 6提问于2020-11-04得票数 0
回答已采纳
3回答
我使用离子，我需要改变我的项目的一些风格。特别是我需要将边框颜色更改为红色，并将分隔项列表的背景更改为
“看看这张照片，了解我需要的是什么”
这是模板页的代码。
<ion-view title="Home">
<ion-content scroll="true" class="padding has-header">
<form class="list">
<label class="item item-select" name="c
浏览 5提问于2016-04-01得票数 1
1回答
我想根据一些情况改变我的离子物品的颜色。(使离子项目不可单击或不可编辑)。我已经添加了代码，使其不可点击，但文本的颜色仍然是蓝色的，这将混淆用户点击它。 我尝试过使用三元运算符，但这不起作用。 <ion-item color="light" (click)="!isShipButtonDisabled && navigateBack()">
<p>Transfer Orders</p>
<ion-note item-end color="!isShipButtonDisabled ? &
浏览 12提问于2019-09-05得票数 0
回答已采纳
1回答
离子项目的离子4形式验证
、、、
如果字段有效或无效，ion-input和ion-item会显示不同的颜色边框底部，但这在iPhone上不起作用。在移动设备上有这个特性吗？
<ion-item>
<ion-input formControlName="email" name="email" type="email"></ion-input>
</ion-item>
this.loginForm = this.formBuilder.group({
email: ['', Validators.com
浏览 1提问于2019-05-04得票数 1
<ion-row *ngFor="let box of Boxes" >
<ion-col col-9>
<ion-item >
{{box}}
</ion-item>
</ion-col>
<ion-col col-3>
<ion-checkbox></ion-checkbox>
</ion-col>
</ion-row>
如何以不同的颜色显示物品？每一行项目的颜色交替。？
浏览 0提问于2018-03-10得票数 5
回答已采纳
5回答
我正在使用Ionic框架为一个移动网络应用程序。我试图改变一个离子列表项目的背景颜色在悬停，但它不会改变。
这就是我的html中的内容：
<ion-list>
<ion-item ng-repeat="item in items" href="#/newpage">
<div>{{item.color}}</div>
</ion-item&
浏览 0提问于2015-02-22得票数 4
回答已采纳
3回答
无法使表单控件透明
、、、、
有没有办法让表单控件变得透明？实际上，我的输入或按钮都不符合我的css样式。我想让离子输入变得透明并改变离子按钮的颜色，但这不符合我的.css
我想让背景图像填充输入字段，并使超链接文本按钮为白色。
ion-content {
--background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
}
form {
margin-bottom: 32px;
ion-button {
margin-top: 20px !imp
浏览 0提问于2019-03-06得票数 1
我正在尝试让一些可编辑的文本在离子输入中工作。因此，当用户轻敲离子输入时，用户将能够编辑文本。
如何让editUserName & editUserName的Ng模型等于UserName & UserBio的值
我尝试在ngOnInit上设置editUserName & editUserName的值
就像这样
ngOnInit() {
this.recordRow.EdituserName = this.userName;
或
this.item.EdituserBio = this.item.userBio;
或
this.item.Ed
浏览 51提问于2019-10-31得票数 0
回答已采纳
2回答
当我的数据发生变化时，我想改变颜色项目。我使用这个模板代码：
<ion-view view-title="Evénement" class="content">
<ion-content class="padding">
<ion-list>
<ion-item ng-repeat="myuser in users">
<span>{{myuser.user_name}} </sp
浏览 2提问于2016-02-12得票数 2
回答已采纳
1回答
我想更改类型记录中的离子复选框的颜色。
<ion-item >
<ion-label id="check1">No</ion-label>
<ion-checkbox color="blue" id="box1" [(ngModel)]="todo.check1" name="check1"></ion-checkbox>
</ion-item>
我试试看：
document.getElementById("
浏览 5提问于2017-10-25得票数 0
回答已采纳
我需要更改所选单选输入的背景颜色。 我有以下的离子无线电列表： <ion-list radio-group [(ngModel)]="selectedRadio">
<ion-item *ngFor="let ing of pizzaIng; let i = index">
<ion-label>{{ing.name}}</ion-label>
<ion-radio [value]="ing.name"></ion-radio>
浏览 8提问于2019-06-17得票数 2
回答已采纳
1回答
我已经创建了一个辅助菜单。还有里面的按钮
<ion-content style="background-image: url(assets/imgs/background.jpg)" >
<div id="sideBody">
<ion-list>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{
浏览 2提问于2017-12-12得票数 0
回答已采纳
2回答
单击更改离子项目的背景色
、、、、
我想改变背景颜色的离子项目，当用户点击它，我可以这样做。提前感谢
示例代码：
<ion-item (click)="openDetail(variant)">{{variant.ProductVariantName}
<ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0" fill="clear" color="dark">
<i [class]="variant.showDe
浏览 0提问于2019-03-29得票数 1
回答已采纳
2回答
如果我在html中有输入TypeScript，我正在试图找出如何通过单击按钮改变Ionic class="mess"应用程序中的输入边框颜色：
<form>
<ion-item>
<ion-input class="mess"></ion-input>
</ion-item>
</form>
在.css中使用默认颜色
.mess {
border: 2px solid #88ff00;
}
我找不到方法，如何通过单击将border颜色从#88ff00;更改为不同颜色的#9
浏览 3提问于2021-03-30得票数 0
回答已采纳
1回答
离子范围颜色分割
、、
我想知道为什么我的ion-range在“步骤”之间有颜色分割：
代码现在看起来像这样：
<ion-item>
<ion-range class="IonRange" (ionChange)="cambioDineroyPageviews(Valor)" [(ngModel)]="Valor" min="1" max="5" snaps="true"></ion-range>
</ion-item>
对于这个离子范围，我有以下CSS
.Io
浏览 11提问于2021-02-22得票数 1
回答已采纳
5回答
的情况：
我正在使用Ionic构建一个应用程序。
我需要显示一些人的信息列表。为了获得我正在使用的 <ion-list>和<ion-item>，因为它提供了布局，这正是我所需要的。
唯一的问题是，每个<ion-item>似乎被迫停留在一行上，裁剪它包含的额外文本，如图所示：
代码：
<ion-list>
<ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item>
<ion-i
浏览 4提问于2015-06-19得票数 23
回答已采纳
我试试这个：
.ion-item:disabled {
background-color:#ffffff !important;
}
但它没有任何效果。我不希望它在禁用时有灰色的背景，我试着保持原来的(白色)颜色。
代码如下：
<ion-list>
<button ion-item *ngFor="let item of items [disabled]="!item.enabled" (click)="itemSelected(item)">
{{ item }}
</button&
浏览 0提问于2017-08-30得票数 0
我有一个聊天列表，并且我喜欢根据聊天状态更改离子图标的颜色(来自attribute chat.status)： <ion-list *ngFor = "let chat of chats">
<ion-item>
<ion-icon name="ellipse-outline" slot ="end" color ="primary"></ion-icon>
<ion-label>
<h2> {{chat.userna
浏览 56提问于2020-12-30得票数 2
回答已采纳
我有这个离子导航栏下面的代码，我在右边有一个菜单图标。我想要改变菜单header.But的颜色，当我改变离子导航栏的颜色时，它也在改变菜单标题。我想为离子导航栏和离子菜单分开颜色。
<ion-menu [content]="content" side="right" id="menu2">
<ion-header>
<ion-toolbar class="menu_header">
<ion-title>MyApp</ion-ti
浏览 6提问于2018-11-27得票数 1
1回答
我试图以这样一种方式设置ion-input的样式:当没有文本时，我有一个占位符，如果有文本，文本就是黑色的，如果我正在键入文本，它就是#9933CC。
HTML如下所示：
<ion-item>
<ion-input placeholder="Last Name" autocapitalize="on" [(ngModel)]="user.lastname" value="{{user.lastname}}"></ion-input>
</ion-item>
这已经有了占位符，
浏览 0提问于2019-08-28得票数 0
我正在尝试使用Ionic 6中的新实现一个菜单。
文档中说，当我们在ion-icon插槽中使用ion-item时，会自动添加一个header。它们提供了一个组件属性来更改图标名，甚至使用自定义图标(而不是ion-icon)，但是文档没有提到如何更改默认图标的大小和颜色。
<ion-accordion-group>
<ion-accordion>
<ion-item slot="header">
<ion-label>
Home
</ion-l
浏览 12提问于2022-02-23得票数 5
回答已采纳
我正在尝试在Ionic 4中的离子项目滑动元素中有一个红色按钮。代码如下：
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p
浏览 12提问于2019-07-29得票数 0
回答已采纳
2回答
如何更改一个按钮的颜色？
、、、
我有个问题。我用HTML中的按钮做了一个循环。所以现在我想让他们在我按下按钮时改变颜色。但我的问题是他们都会改变颜色。但是我只想改变按下的按钮的颜色。
HTML
<ion-item *ngFor="let friend of friendsList">
<ion-avatar item-start>
<img src={{friend.img}}>
</ion-avatar>
<button ion-button color="rank" class=&#
浏览 0提问于2018-04-05得票数 5
回答已采纳
请帮助我，我想改变按下的项目背景颜色与Ionic3使用本地存储，所以点击的项目有一个灰色的背景和非点击的项目有一个白色的背景。这是我的html代码：
<ion-item *ngFor="let div of divs; let i = index" >
{{ div.name }}
</ion-item>
这是ts文件上的数组
divs: any[] = [
{ name: '1'},
{ name: '2'},
{ name: '3'},
{ name: '4
浏览 0提问于2018-10-02得票数 0
回答已采纳
1回答
IonicFramework3中带有角4的表单自动验证<ion-input/>和<ion-textareas/>。一旦我模糊了输入字段，它就会被验证，边框颜色(在我的例子中)变成绿色。
<ion-item margin-top>
<ion-label stacked>Form Label</ion-label>
<ion-textarea type="text" rows="6" [(ngModel)]="variable"></ion-textar
浏览 0提问于2018-02-07得票数 0
回答已采纳
3回答
我开始了一个基于sidemenu模板的离子项目。我试图改变每一个元素的边菜单的背景色(我希望每一个项目是一个不同的颜色)。
我尝试添加一个离子颜色类：
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
浏览 8提问于2015-04-26得票数 8
回答已采纳
如果变量‘正确’设置为true，我想将背景颜色更改为绿色，如果设置为false，则将背景颜色更改为红色。我试过了，但没有成功：
<ion-item [style.backgroundcolor]="correct ? 'green' : 'red'">Hello world</ion-item>
有没有什么我可以做的？
浏览 0提问于2017-04-28得票数 1
每当文本在我的Ionic 2(角2)项目中发生变化时，我都会尝试动画一个值。这在Ionic2项目中，但是对于任何Angular2都应该是一样的。
我在标记中有以下内容
<ion-list no-lines>
<ion-item *ngFor="let item of data>
<ion-card [@flyInOut]='cardState'>
<ion-card-content>
<div ><b>{{item.name.d
浏览 2提问于2017-01-27得票数 10
1回答
问题：看起来太简单了--我如何实现标题文本和细节文本的项目？
示例：
Note：我尝试过两种可能的解决方案。这两个结果都会导致一个没有内容的空白白色项。
<ion-item-sliding>
<ion-item>
<ion-icon name="pin" item-start color="primary"></ion-icon>
<ion-list>
<ion-item>
<ion-labe
浏览 7提问于2017-10-02得票数 3
回答已采纳
我有一个Ionic框架应用程序，它有一个消息列表。有4种类型的消息，根据类型的不同，消息应该显示在列表上，并在左边框中显示特定的颜色。
问题是，如何根据消息的类型来指示CSS颜色？
HTML如下所示：
<ion-content class="ionc">
<ion-list class="list">
<ion-item ng-repeat="mensaje in mensajes" class="listitem" ng-click="abrirMensaje($index)&#
浏览 1提问于2015-05-18得票数 1
回答已采纳
1回答
<ion-list radio-group [(ngModel)]="gender">
<ion-item>
<ion-label>Male</ion-label>
<ion-radio value="male" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio value=&
浏览 3提问于2018-06-19得票数 0
回答已采纳
2回答
我需要解析Ionic列表中嵌套的JSON。我的我需要这样的东西
我用的是离子和角度4。
我的JSON格式是：
{
"result": {
"engineering": [{
"name": "Tamil Nadu",
"colleges": {
"list": [{
"id": "1",
浏览 1提问于2018-01-01得票数 1
回答已采纳
1回答
组件使用自定义颜色:离子范围
、、、、
我想为组件使用自定义颜色：ion-range。
我尝试将颜色#ff0000设置为下面的颜色，但没有工作。
<ion-list>
<ion-item>
<ion-range color="#ff0000" min="0" max="120" step="0.1" pin="true" [(ngModel)]="myValue">
<ion-icon range-left small name="cont
浏览 1提问于2018-02-10得票数 2
2回答
在单击时更新按钮文本和事件
、、、、
对不起，如果这听起来很明显，但我对Ionic 2 /角2并不熟悉。在提交表单时，我需要更新按钮文本并单击event，即：
首先单击按钮=提交表单+将按钮文本更新为“下一步”
第二次单击按钮=触发器goToNext()
我成功地更新了按钮文本，但没有更新单击事件(到goToNext() )。
.html
<form (ngSubmit)="logForm(i)">
<ion-item>
<ion-input type="text" [(ngModel)]="form.us
浏览 2提问于2017-11-30得票数 1
回答已采纳
我正在尝试改变一个离子列表中的一个离子项悬停时的背景颜色。在ionic 4中工作。 我已经用*ngFor=“let....”建立了一个列表。在这里面，我放了我的离子物品。这个列表运行得很完美。但是我不明白为什么只有一些ionic提供的CSS自定义属性可以工作。例如，我不能让--背景--悬停来做任何事情。 请参阅ion-item的ionic文档页面。这显示了css自定义属性的完整列表：https://ionicframework.com/docs/api/item。 在.html文件中： <ion-list>
<ion-item *ngFor="let item
浏览 38提问于2019-07-04得票数 2
2回答
我正在开发一个项目，我遇到了一个问题，包括占位符文本在内的离子输入文本略高于它旁边的文本。我需要帮助对齐他们。
这是我的代码。
<ion-item>
<h4 item-left> UserName: </h4>
<ion-input placeholder="UserName" class="ion-padding"></ion-input>
</ion-item>
<ion-item>
<h4 item-left> Profile pict
浏览 28提问于2020-05-25得票数 0
回答已采纳
我想看看是否可以使用css将ionic 4中的datepicker颜色更改为另一种颜色。 这是我的代码； <ion-item>
<ion-icon name="time"></ion-icon>
<ion-label style="padding-left: 10px;">Pickup Time</ion-label>
<ion-datetime class="picker-color" [value]="today" minuteValu
浏览 25提问于2019-12-28得票数 1
回答已采纳
1回答
我正在拉一个项目列表，然后将其填充到下拉列表中。我想要实现的是，当我选择一个产品，它的价格应该填充在数量文本框。
<ion-item>
<ion-label>Item</ion-label>
<ion-select (ionChange)="getProduct()" [(ngModel)]="product">
<ion-option [value]="item.product" *ngFor="let item of items">{{item.pro
浏览 0提问于2018-03-15得票数 0
回答已采纳
下面是电子邮件和密码的两个离子标签：
<ion-item>
<ion-label color="primary" floating>Email id</ion-label>
<ion-input id = "email" type="email" ></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Password&l
浏览 3提问于2017-01-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
