是否可以在离子选择中向ion-option添加图标?
之类的东西<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>
答案 0 :(得分:1)
这对我有用。
使用CSS修改每个选项的按钮标签中的内部跨度,删除半径并指定一个托盘图像
选项保持相同的顺序,这就是属性选择器为我工作的原因
.alert-radio-icon{
border-radius: 0 !important;
border: none !important;
height: 40px !important;
width: 40px !important;
background-size: 40px 40px !important;
background-repeat: no-repeat ;
}
[id^="alert-input-"][id$="-0"] .alert-radio-icon{
background-image: url("../assets/images/menu/flag_ni.png") !important;
}
[id^="alert-input-"][id$="-1"] .alert-radio-icon{
background-image: url("../assets/images/menu/flag_gt.png") !important;
}
.alert-radio-inner{
background-color: transparent !important;
}
答案 1 :(得分:0)
我能想到的最好的事情是使用unicode字符作为离子选项内容。像这样:
答案 2 :(得分:0)
Ionic不支持此功能。 See comment from Kensodeman on this issue
所以我想只有Luis建议的某种解决方法才有可能。
答案 3 :(得分:0)
嘿,你可以试试这个...
这对我有用.. 看看这个网站: https://www.alt-codes.net/star_alt_code.php
我使用此代码:✰
所以我的代码如下:
<ion-item>
<ion-label>Member's Overall Rating</ion-label>
<ion-select [(ngModel)]="newreport.memberstatus">
<ion-option value="✰">✰</ion-option>
<ion-option value="✰✰">✰✰</ion-option>
<ion-option value="✰✰✰">✰✰✰</ion-option>
<ion-option value="✰✰✰✰">✰✰✰✰</ion-option>
<ion-option value="✰✰✰✰✰">✰✰✰✰✰</ion-option>
</ion-select>
</ion-item>
结果是这样的(我手机上的屏幕截图导致我的手机上进行了即时测试):
答案 4 :(得分:0)
IonSelect中的离子图标:
ion-select-option仅返回字符串,但Ion-Select在技术上所做的只是显示一个看起来像下拉菜单的界面。
简而言之,在此示例中,您可以做的是,通过将下拉菜单置于可点击的离子项目中,禁用下拉菜单,使其变为启用状态,来创建一个弹出菜单组件,而不是正常的下拉菜单。 UX),单击离子项目后单击下拉菜单,然后使用该引用在该位置打开弹出式组件。
因此,在执行此操作时需要考虑一些因素:
我不想重新创建下拉框和图标,我只想更改其显示内容
我还希望该图标可点击
我最终得到的解决方案(请注意,这也使用ReactiveForms):
menu-options.interface.ts
export interface MenuOptions {
key: string;
fn: () => {};
}
MenuOptions将保存要显示的值和按下按钮时要运行的功能
main.component.ts
constructor(private cd: ChangeDetectorRef){}
menuOptions: MenuOptions[] = [
{
key: "Text",
fn: () =>
this._showAlert("Select this option if you want to type in values"),
},
{
key: "List",
fn: () =>
this._showAlert(
"Select this option if you want to use a pre-defined list of values"
),
},
{
key: "Textbox",
fn: () =>
this._showAlert(
"Select this option if you want an area to type a block of text"
),
},
];
// Find location of where popover is to appear and click the element
// which will then trigger the (click) event
onSelectionClick(event: any) {
let element: HTMLElement = document.getElementById('popoverLoc') as HTMLElement;
element.click();
}
async openPopover(event: any) {
const popover = await this.popover.create({
component: SelectionTypePopoverComponent,
componentProps: {
menuOptions: this.menuOptions
},
event,
translucent: true,
});
await popover.present();
const {data} = await popover.onWillDismiss();
// Get return from popover and set selection value
this.itemFeatureForm.get('selectionType').setValue(data['selectionType']);
// If you hardcode the menu options directly in the popover component and pass them back
// you will need to trigger change detection manually and set array to have 1 value
// otherwise your dropdown wont appear properly
// menuOptions: MenuOptions[] = [{ key: '', fn: () => '' }]
//this.cd.detectChanges();
}
main.component.html
<ion-item button (click)="onSelectionClick($event)" detail="false">
<ion-label class="enableItem">Selection Type</ion-label>
<ion-select
formControlName="selectionType"
class="enableItem"
id="popoverLoc"
(click)="openPopover($event)"
>
<ion-select-option
*ngFor="let option of menuOptions"
[value]="option.key"
>{{ option.key }}</ion-select-option
>
</ion-select>
</ion-item>
在可单击的离子项目中包装离子标签/离子选择。这将是注册第一次点击的地方。
确保禁用离子选择:selectionType: new FormControl({value: '', disabled: true}),
enableItem类以使您的Ion-Select外观启用:.enableItem {opacity: 1 !important;}
设置ID以标记离子选择的位置
popover.component.html
<ion-list>
<div *ngFor="let option of menuOptions; let i = index">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col class="ion-no-padding">
<ion-item button detail="false" (click)="onSelection(i)">
<ion-label>{{ option.key }}</ion-label>
</ion-item>
</ion-col>
<ion-col class="ion-no-padding" size="2">
<ion-item class="ion-no-padding">
<ion-button class="ion-no-padding" fill="clear" (click)="onInfo(i)">
<ion-icon
name="information-circle-outline"
slot="icon-only"
></ion-icon>
</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-list>
请确保设置图标列的大小
popover.component.ts
onSelection(index: number) {
this.popoverCtrl.dismiss({
selectionType: this.menuOptions[index].key,
});
}
onInfo(index: number) {
this.menuOptions[index].fn();
}
我还没有在物理设备上完成测试,但是当我这样做时,如果这不起作用,我会进行更新,但是目前,通过这种模式,我可以使我想要显示在下拉菜单中的所有内容仍然使用离子模板...强大的力量,负责任的一切。