这是我的代码：
<ion-item *ngFor="let column of columns" item-icon-right>
{{column.title}}
<ion-icon name="star" item-end></ion-icon>
</ion-item>
我需要的是将图标放到行的远端，但是当我加载页面时，图标只在内容的右侧，而不是整个行的右侧。
我关注了ionic文档，但我找不到他们的demo源代码，例如:这里：，他们的代码不能生
浏览 1提问于2017-06-12得票数 2
回答已采纳
6回答
我正在尝试将ionic应用程序中的菜单图标替换为图像图标。我有一个如下的menu.html：
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</i
浏览 6提问于2016-09-22得票数 11
1回答
从列表中选择图标更改图标
、、、、
简介：
我已经在home.html上放置了一个图标，我也有一些图标列表。我只想用我从列表中选择的图标替换图标。下面是我的home.html代码
<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
&
浏览 0提问于2018-02-13得票数 1
回答已采纳
1回答
创建离子卡列表
、、、、
我正在尝试使用angular在Ionic 5上创建联系人列表，但无法访问此样式。我是IONIC的初学者，你能帮我吗？如何将渲染图像留在卡片的开头，带有图标和标题，以及带有副标题的图标，如下图所示？
我的形象：
我的代码：
<ion-content padding>
<ion-card>
<ion-grid>
<ion-row>
<ion-col>
<img src="https://material.angular.io/assets/img/examples/sh
浏览 16提问于2020-05-17得票数 1
回答已采纳
我正在尝试使用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
回答已采纳
我有一个带有图标的离子项目列表，后面跟着文字。当图标大小较小时，如下图所示，文本似乎垂直地与ion-item的中心对齐。但是当图标更大时，对齐就有点偏离了。
这就是我要补充的所有内容：
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
Recent
</ion-item>
和CSS：
.icon {
font-size: 35px;
color: #ffC977;
}
我该怎么解决这个问题。我试过使用vertical-al
浏览 2提问于2016-02-25得票数 29
回答已采纳
在我的项目中，我想使用一个带有标签和图标的'ion-item‘。大概是这样的： <ion-item>
<ion-label>Itens</ion-label>
<ion-label><i class="icon-search"></i></ion-label>
</ion-item> 问题是IOS默认已经在'ion-item‘中使用了一个图标。我不想仅仅为了android而改变按钮模式，我仍然希望使用原生元素的样式。 我的问题是:有没有办法根据平台隐藏/
浏览 17提问于2020-07-07得票数 0
回答已采纳
我正在尝试制作一个链接列表，图标在右边，图标在左边。
你能帮我清理一下吗？
代码：
<ion-list>
<ion-item class="item-icon-left item-icon-right" href="#" ng-click="goToNextSlide()">
<i class="icon ion-male blueicon"></i>
浏览 0提问于2016-03-09得票数 0
5回答
我从客户那里得到了一个设计。我想把小图标嵌入到我的小图标中。
我现在的代码
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Ba
浏览 6提问于2014-08-07得票数 3
回答已采纳
1回答
我期待ti添加一个图标到一个离子化身列表项目的右边。
我的代码：
<ion-item class="animated flipInX item-divider gold" ng-show="(myArray.length > 0)">My Stuff</ion-item>
<div ng-repeat="item in array">
<ion-list>
<ion-item class="animated flipIn
浏览 4提问于2016-10-11得票数 0
回答已采纳
2回答
我为密码视图/非视图创建了一个眼睛图标按钮
但是有一页我需要做“恢复密码”页面
在这个页面中有三个输入，上面有相同的按钮.
当我点击其中一个时，它们都会被切换。
如何将每个函数分别绑定到同一个函数？
守则如下：
HTML
<ion-item>
<ion-input placeholder="Senha antiga" [type]="isSenhaView ? 'password' : 'text'">
</ion-input>
<button ion-button icon-
浏览 5提问于2017-04-18得票数 0
回答已采纳
在我的应用程序中，我得到了一个，如文档中所描述的：
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
它按预期工作，我可以通过指向reoder图标(参见自由循环)来拖动ion-items：
在我发现的平板电脑上对潜在用户进行测试，很多用户一开始没有看到图标，并且/或试图在没有指向图标的情况下拖动ion-item。他们期望整个ion-item是可拖的：
我
浏览 1提问于2018-02-09得票数 5
1回答
重新排序功能似乎将重新排序图标附加到我的ngFor列表中的所有嵌套项上。因此，有两个项目是一个复选框和一个文本输入，我得到2个额外的(总共3个)重新排序图标每个列表项。它们中只有一个可以工作，其他两个只是视觉上的。我需要删除其他2个，只有一个干净的重新排序图标每一项，或东西的效果。
我尝试删除嵌套项，但复选框和文本输入不起作用。
/这是HTML /
<ion-list no-lines [reorder]="reorderIsEnabled" (ionItemReorder)="itemReordered($event)" id="lowtriml
浏览 2提问于2019-06-15得票数 1
我正在使用Ionic 2，在我的应用程序上，我正在创建一个表单，如果存在验证错误，信息图标将出现在其相关输入字段的右侧。HTML如下所示，
<ion-list inset padding>
<ion-item>
<ion-input type="text" placeholder="Email"></ion-input>
<ion-icon name="ios-information-circle-outline" item-ri
浏览 5提问于2016-04-12得票数 5
回答已采纳
我正在尝试下面的代码来移动图标到右侧。
<ion-menu [content]="content" side= "right">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button
浏览 2提问于2018-11-08得票数 0
来自UX团队的要求是添加日历图标到ion 5中的离子日期时间。请帮助我添加日历图标，它必须对齐到右边。 <ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-i
浏览 33提问于2020-08-06得票数 1
我有一个包含ion-datetime和ion-icon的ion-item。在这两个平台上，当单击datetime容器时，都会打开日期选择器。在iOS中，当单击图标(日历图标)时，将打开日期选择器。但在Android中，它什么也做不了。
我曾尝试将.calendar-icon的z-index更改为-X，但它删除了datetime输入中的图标。
.calendar-icon {
position: absolute;
right: 5px;
bottom: 4px;
}
<ion-item >
<ion-datetime displayFormat="
浏览 0提问于2018-12-28得票数 1
1回答
我有一个数据库，其中为我返回一些值：
id：整数
nome：string
status：布尔型
只有当status变量的值为true时，我才会显示该项。
见我的
<ion-list ion-item *ngFor="let item of itens">
<ion-item >
<ion-label>{{ item.name }}</ion-label>
<ion-icon name="checkmark" color="secondar
浏览 0提问于2017-02-19得票数 0
回答已采纳
我对Ionic图标有意见。我使用Ionic 4和角8，试图添加QR代码图标，没有运气。
我使用的是Ionic doc：
<ion-menu-toggle auto-hide="false">
<ion-item (click)="scanBarcode()">
<ion-icon name="qr-code-outline" slot="start"></ion-icon>
<ion-label>
浏览 3提问于2020-03-12得票数 2
回答已采纳
我需要删除离子菜单上的汉堡包默认图标菜单。我已经添加了自定义菜单，我需要删除默认图标。
所以我的密码是：
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
浏览 3提问于2019-09-09得票数 1
回答已采纳
1回答
大家好！ 我正在构建我的第一个ionic 4移动应用程序，我有一个关于如何将标签、图标和其他元素连接到表单输入的问题。 在普通HTML表单中，您可以使用"for“属性在标签和输入之间建立关系，如下所示： <label for="name">Please enter name</label>
<input type="text" id="name" name="name"/> 有了这种关系，当您单击标签或输入本身以获得输入的焦点时，输入字段就会获得焦点。 在ionic中，您使用ion-
浏览 21提问于2019-02-08得票数 1
回答已采纳
3回答
我想用离子型2 -> 创建这样的设计
它是具有隐藏/显示密码的登录功能。
这是我的HTML代码
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label floating primary>Username</ion-label>
浏览 3提问于2017-10-18得票数 19
回答已采纳
1回答
什么方法，我仍然可以显示我想要的图标，(在本例中，字符的科普特字母表)，但仍然保留和不覆盖菜单返回图标？由于您将能够在图像中看到，后退图标是不显示的。我想将这个图标从其他图标中排除在外，这样字符仍然可以正确显示，而后面的图标也可以正确显示。
我试过了
:not(ion-icon name="menu") {
}
但那不管用。
HTML代码
<!--
Generated template for the CopticLanguagePage page.
See http://ionicframework.com/docs/components/#navigatio
浏览 0提问于2018-04-10得票数 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
回答已采纳
我想在单击按钮时更改自定义svg图标的颜色
<ion-item>
<ion-icon src="../../assets/img/icon-qr.svg"></ion-icon>
<ion-label>Qr Scan</ion-label>
</ion-item>
浏览 6提问于2019-10-21得票数 7
1回答
我有一些单选按钮，但文本似乎远离单选按钮，我希望文本更接近单选按钮。
这是我的密码
ion-row radio-group (ionChange)="onChange($event)">
<ion-col width-30>
<ion-item>
<ion-label>Yes</ion-label>
<ion-radio value='{{checklists.controls["yesradio"].value}}-yes&#
浏览 3提问于2017-02-17得票数 0
回答已采纳
1回答
我动态地在列表的右侧显示/隐藏图标。但是，当图标显示时，ion-item会稍微放大一点。
你知道怎么解决这个问题吗？这绝对不是一个好的用户体验。
<ion-list>
<ion-item-divider color="primary">
Select
</ion-item-divider>
<button ion-item *ngFor="let property of properties; let i = index" (click)="propertySelected(p
浏览 0提问于2018-05-14得票数 0
1回答
我试图做一个简单的演示在离子.I有一个页脚有一个图标，左图标)，我点击那个图标，它显示一个弹出屏幕，我在文本字段中输入名称，然后按下保存按钮.then，它生成一行，其文本与弹出屏幕文本字段中的文本相同，需要在行中添加图标按钮(比如删除按钮、编辑按钮)，我们在动态生成的行上添加图标，就像我在页脚(左下角离子-composer)中所做的那样。请在行中加入离子
这是我的密码
<ion-item ng-repeat="item in items">
{{item.testcase}}
<ion-r
浏览 12提问于2015-04-25得票数 0
我正在开发一个反应本地应用程序。我用了反应-原生元素库。SearchBar组件不接受图标属性。我已经导入了反应-本机-矢量-图标包以及。如何将图标放到SearchBar上？
<SearchBar
placeholder="Type Comment"
inputStyle={[styles.searchBar]}
// noIcon={true}
icon = {{type: 'MaterialCommunityIcons', color: '#86939e', name: &#
浏览 1提问于2018-04-05得票数 0
回答已采纳
1回答
我试着做一个简单的离子演示。我有一个页脚有一个图标离子合成(左下角图标)。当我单击该图标时，它会显示一个弹出屏幕，我在文本字段中输入名称，然后按保存按钮。然后生成一个具有与弹出屏幕文本字段相同的文本的行。我需要添加图标按钮的行(如删除按钮，编辑按钮)。我们可以在动态生成的行上添加图标吗，就像我在页脚(左下角离子-编写器)中所做的那样？
请在行中加入离子
这是我的密码
<ion-item ng-repeat="item in items">
{{item.testcase}}
<ion-re
浏览 2提问于2015-04-25得票数 0
回答已采纳
5回答
如何将Info.plist中指定类型的文件(或选择在查找器中打开)放到我的停靠图标上，然后使用该文件的完整路径调用方法？
浏览 11提问于2010-03-22得票数 18
回答已采纳
1回答
如何动态改变图标？
、、、、
我正在建立一个应用程序使用离子角，字体和条纹。我希望根据在.ts页面中从服务器获得的值来更改HTML页面上的图标。 这就是我所拥有的： <ion-item *ngFor="let transaction of myRecentTransactions">
<fa-icon [icon]="['fab', 'cc-visa']"></fa-icon><span>{{ transaction.source.last4 }}</span>
</ion-item&
浏览 11提问于2020-04-20得票数 1
5回答
我试图改变图标时，点击按钮，它的显示隐藏的内容，我需要改变上下箭头图标
<button clear text-center (click)="toggle()">
<ion-icon name="arrow-dropdown-circle"></ion-icon>
</button>
<ion-col [hidden]="!visible" class="accountBalance animated slideInUp">
<ion-list&
浏览 13提问于2016-09-06得票数 16
回答已采纳
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
1回答
我有一个html格式的表格(使用vue.js框架)。我想把删除按钮放到每一行，并将该按钮作为图标。我的代码是： <div>
<table class="table table-bordered">
<thead>
<tr>
<th>Task Title</th>
<th>Priority</th>
浏览 48提问于2020-06-26得票数 0
在Ionic2文档中有一些非常好的输入示例，但是有没有人尝试过创建一个普通的标签(不是浮动的或类似的)，在标签的左边有一个输入和一个图标？
我想可能是这样的：
<ion-item>
<ion-icon name="logo-playstation"></ion-icon>
<ion-label>PSN</ion-label>
<ion-input clearInput type="text"></ion-input>
</io
浏览 0提问于2017-02-03得票数 9
回答已采纳
2回答
在离子项目中内联显示信息图标。
、、、、
我想在输入框的末尾显示离子信息图标。但是，下面的代码段只显示输入框，而不是图标：
<ion-header>
<ion-navbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<form novalidate offset-lg-3 offset-xl-4 col-lg-6 col-xl-4>
<ion-list inset>
<p>Forget password</p>
浏览 1提问于2018-05-05得票数 1
回答已采纳
我开发了一个Outlook2010外接程序，我有包含Office.CommandBarButton Office.CommandBars cmdBars，我设置了buttonTemp_Dial.Style = Office.MsoButtonStyle.msoButtonIconAndCaption和buttonTemp_Dial.Picture有一个图标图片的引用。加载项中的图标很小，如何将其更改为大图标？
外接程序在Outlook的单独选项卡中，有没有方法将外接程序放到“主页”选项卡中？
浏览 0提问于2013-06-23得票数 1
回答已采纳
2回答
您是否可以在复选框中添加文本以替换滴答图标。
我无法用这段代码实现它，有人可以建议我如何制作一个带有文本的大小选择框。
<ion-col>
<p>Choose the size</p>
<ion-item>
<ion-checkbox >S</ion-checkbox>
</ion-item>
</ion-col>
帮我拿出这种用户界面
浏览 3提问于2017-06-01得票数 1
回答已采纳
1回答
如何将我自己的功能添加到负责删除小部件的方法中(当我将其拖放到回收图标上时)。我需要能够添加一些额外的实现。我该怎么做呢？
浏览 0提问于2012-04-23得票数 0
回答已采纳
如何将JSF resources文件夹中的图标放到由org.primefaces.model.MenuModel创建的动态菜单中；menu的setIcon方法只接受一个字符串作为参数。
浏览 10提问于2012-08-21得票数 2
回答已采纳
1回答
离子导航侧杆
、、
我有问题，删除一个动画到我的离子应用程序。主要的问题是，我不知道如何禁用侧栏打开屏幕刷。我希望我的侧栏只是打开点击导航图标，而不是打开页面上的滑动。我的导航码在这里：
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-traveler">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title class="hede
浏览 2提问于2016-12-01得票数 1
回答已采纳
我是新的离子2，在离子图标前面，我想要一些文本在同一行，这意味着在默认情况下有div标签，在div标签有文本，通过单击删除图标文本应该消失。下面是我的代码：
<ion-list>
<ion-item no-lines (click)="toggleLanguages()" class="content">
<ion-icon name="create" item-left class="sai"></ion-icon>
Language
浏览 1提问于2016-12-22得票数 0
回答已采纳
1回答
.html文件 <ion-list>
<ion-item *ngFor="let loan of loans" [routerLink]="['/detail']">
<ion-label>
<ion-icon [name] = 'status.icon'></ion-icon>
<p>Username: {{loan.username}}</p>
&
浏览 14提问于2021-01-11得票数 0
在尝试实现特定的select设计之后(请参阅另一个线程上的帮助：)，我决定尝试并使用ionic提供的离子选择。
这就是我目前所拥有的：
有人知道如何删除：-每个选项下的线条-单选图标
以及如何在select下拉列表中添加子标题，其中"My Filters“为子标题：
我尝试了no -line，但没有成功，并尝试更改弹出窗口的模式，以删除无线图标，但也没有成功。任何帮助都是最好的。
到目前为止我的代码如下：
<ion-grid *ngIf="toggled">
<ion-row>
<ion-col col-4>
浏览 18提问于2017-07-25得票数 2
1回答
我正在使用ion-select，我想在select标题中有一个关闭图标按钮。我做不到。有没有人能帮我实现。 ? 我的代码： <ion-item>
<ion-label>Pet</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Cat</ion-select-option>
<ion-select-option value="
浏览 18提问于2020-06-30得票数 0
我使用输入文本字段从用户那里获取数据。我还在文本输入标签旁边使用了一些离子图标。我需要将这些图标放在文本字段中。这样，当用户选择或触摸该字段时，标签将是浮动的，并且图标将保持不变。
目前，标签是浮动的，但我需要将离子图标放置在文本字段中。
这怎么可能呢？请帮我解决这个问题。
.icon-input {
display: flex;
align-items: flex-end;
position: absolute;
padding-right: 10px;
bottom: 0;
font-size: 18px;
min-width: 0 !important;
浏览 0提问于2018-07-30得票数 3
我从ion-select中获取数值，并在ion-input中输入一个数字。如何将原始页面中的选定值和输入值显示到另一个页面？我使用的是ionic 4 <ion-item>
<ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad"
name="userCount" (keypress)="numberOnlyValidati
浏览 20提问于2020-01-04得票数 0
回答已采纳
4回答
我正试着在列表中列出两个可以点击的按钮图标。我试过这样做，但图标重叠了：
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{ item.Info }}
<button class="button button-positive" ng-click="Accept(item)">
<i c
浏览 0提问于2014-10-15得票数 3
我在代码中使用了一个离子范围，在开头和结尾有两个图标。但是这两个图标并没有出现--只有range出现了。我查阅了他们的官方文档(https://ionicframework.com/docs/api/range)，下面是我的代码(我基本上复制了他们的代码)： <ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-r
浏览 7提问于2019-02-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
