我正在尝试将图像放入SelectIonic 2 中的组件:
我已将图像源文件放入www/img
我的 Ionic 2 项目中的文件夹。
然而,使用一个简单的img
-tag 使用此代码不显示任何图像:
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming">
<ion-option value="nes">
NES
<img src="img/myImage.png">
</ion-option>
</ion-select>
</ion-item>
</ion-list>
有人有什么主意吗?
ion-select 组件不允许直接对其自身进行自定义,并且您添加到 ion-select 和 ion-option 中的任何不符合 ionic 文档的内容都将在生成的输出中被忽略。
您无法向组件添加类或样式。
一种方法是将 ion-select 放在父元素中,例如 div 或 ion-row 等,并使用 class 来应用 CSS 规则.parentclass childElement
选择器。
要在选项中显示图像,请检查以下功能:
prepareImageSelector() {
setTimeout(() => {
let buttonElements = document.querySelectorAll('div.alert-radio-group button');
if (!buttonElements.length) {
this.prepareImageSelector();
} else {
for (let index = 0; index < buttonElements.length; index++) {
let buttonElement = buttonElements[index];
let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
let image = optionLabelElement.innerHTML.trim();
buttonElement.classList.add('imageselect', 'image_' + image);
if (image == this.image) {
buttonElement.classList.add('imageselected');
}
}
}
}, 100);
}
我已经使用离子选择实现了颜色和图像选择器。请参考https://github.com/ketanyekale/ionic-color-and-image-selector
您还可以在以下位置查看答案离子选择颜色输入
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)