是否可以在离子选择中为离子选项添加图标?类似于
<ion-select name="type">
<ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
<ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
</ion-select>
是否可以在离子选择中为离子选项添加图标?类似于
<ion-select name="type">
<ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
<ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
</ion-select>
6条答案
按热度按时间qyswt5oh1#
这对我很有效。
使用CSS修改每个选项的button标签中的内部跨度,去掉半径并指定一个背景图像
选项保持相同的顺序,这就是为什么属性选择器对我有用
ha5z0ras2#
嘿你可以试试这个...
这对我很有效。。看看这个网站:https://www.alt-codes.net/star_alt_code.php
我用这个代码:✰
我的代码如下所示:
结果是这样的(屏幕截图在我的手机上导致即时通讯测试在我的手机上):
screenshot of what the results would be like
vawmfj5a3#
图标选择中的图标:
x1c 0d1x的数据
离子选择选项只返回字符串,但是,所有的离子选择技术上做的是显示一个界面,看起来像一个下拉菜单。
简而言之,在本例中,您可以创建一个弹出组件,将下拉列表放在一个可单击的ion-item中,禁用该下拉列表,使其看起来已启用(对于UX),在单击ion-item时单击该下拉列表,然后使用该引用在该位置打开一个弹出组件。
所以,我在做这件事的时候做了一些考虑:
1.我不想重新创建下拉框和图标,我只想更改它的显示内容
1.我还希望图标是可点击的
解决方案我结束了(注意,这也是使用ReactiveForms):
菜单选项界面ts
MenuOptions将保存按下按钮时要显示的值和要运行的函数
主要组件ts
主要.组件.html
1.将Ion-Label/Ion-Select Package 在一个可点击的Ion-Item中。这将是注册第一次点击的内容。
1.确保禁用离子选择:
selectionType: new FormControl({value: '', disabled: true}),
1.使Ion-Select看起来已启用的enableItem类:
.enableItem {opacity: 1 !important;}
1.将id设置为标记离子选择的位置
弹出窗口.组件.html
确保设置图标列的大小
弹出窗口组件.ts
我还没有在物理设备上做过测试,但当我这样做时,如果这不起作用,我会更新,但目前,有了这个模式,我可以让任何我想出现在下拉列表中,仍然使用离子模板...巨大的权力,责任和所有这一切。
blmhpbnm4#
我能想到的最好的方法是使用unicode字符作为ion-option内容。📊
c9x0cxw05#
Ionic. See comment from Kensodeman on this issue不支持此功能
所以我想这是唯一可能的某种变通办法,如路易斯建议。
bkhjykvo6#
我找到了一个可能的快速解决方案
global.css
根据接口替换css类