我在使用ionic时遇到了一个样式问题。我试着做一个类似WhatsApp的输入框。问题是在ion-input中将两个图标作为按钮放在右边。现在,这两个图标都在同一个位置,并且重叠。这是我目前的代码:
<ion-footer>
<ion-item lines="none">
<ion-input placeholder="Nachricht" class="message-eingabe" autoGrow="true" rows="1" maxlength="150"
[(ngModel)]="msg">
<ion-button class="buttonright" fill="clear">
<ion-icon slot="end" class="rand" name="attach-outline"></ion-icon>
</ion-button>
<ion-button class="buttonright" fill="clear">
<ion-icon slot="end" class="rand" name="camera"></ion-icon>
</ion-button>
</ion-input>
<ion-icon name="send">
</ion-icon>
</ion-item>
</ion-footer>
和CSS:
.buttonright {position: absolute; top: 0; right: 0;}
我喜欢离子输入从左边开始,包括两个图标作为附件和相机的按钮。另外,文字在图标下面。这是另一个问题。离子输入后,应该有“发送”按钮在右边,但不在离子输入。希望有人能帮助。
1条答案
按热度按时间p5fdfcr11#
请尝试以下代码: