Отображать значок информации, встроенный в ion-item
Я хочу отобразить значок ионной информации в конце поля ввода. Однако в следующем фрагменте показано только поле ввода, а не значок:
<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>
<ion-item>
<ion-input placeholder = "Email or Phone" name = "email">
</ion-input>
<button ion-button clear >
<ion-icon name = "ios-information-circle-outline" ></ion-icon>
</button>
</ion-item>
</ion-list>
<button ion-button round full type = "submit">Submit</button>
</form>
</ion-content>
Я хотел бы отображать справочный текст, когда пользователь нажимает на значок. Я определенно что-то упускаю. Что я должен был сделать, чтобы появился значок?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
<ion-item>
<ion-input placeholder = "Email or Phone" name = "email">
</ion-input>
<button ion-button clear item-end icon-only>
<ion-icon name = "ios-information-circle-outline" ></ion-icon>
</button>
</ion-item>
Вы должны использовать ионный значок внутри ионной метки
Вам нужно событие щелчка на значке?
Не понимаю ваш вопрос, теперь обновленный ответ. Надеюсь, это будет полезно.
Нет проблем, спасибо! Однако в дополнение к ответу Сураджа, если я добавлю событие щелчка на кнопке, он отправит форму, чего я не хочу. Я просто хочу показать предупреждение. Что можно сделать, чтобы предотвратить эту отправку? Вернет ложную справку? Я думаю Должен. Дай мне попробовать.
add type = "button" там все кнопки имеют тип submit в html @Kumar
Удалите (ngSubmit) = "submitForm ()" из <form (ngSubmit) = "submitForm ()"> и добавьте submitForm () для отправки кнопки при нажатии. <button ion-button round full type = "button" (click) = "submitForm"> Отправить </button>
Да, это так, спасибо Сагару.
ion-item устанавливает содержимое в одну строку. Вам не хватало атрибута item-end на кнопке. Я бы также рекомендовал добавить icon-only, чтобы получить полную кнопку в качестве указанного значка.
Код:
<ion-content padding>
<form novalidate offset-lg-3 offset-xl-4 col-lg-6 col-xl-4>
<ion-list inset>
<p>Forget password</p>
<ion-item>
<ion-input placeholder = "Email or Phone" name = "email">
</ion-input>
<button ion-button clear item-end icon-only><!-- here -->
<ion-icon name = "ios-information-circle-outline" ></ion-icon>
</button>
</ion-item>
</ion-list>
<button ion-button round full type = "submit">Submit</button>
</form>
</ion-content>
О да, я попробовал, чтобы значок отображался слева, а событие щелчка не было доступно внутри метки.