离子卡旁边的离子图标位置

Question

我在 ion-footer 中有一张 ion-card。它有一个 ion-textarea，因为它将用于聊天 window。我正在尝试在离子卡（箭头）旁边放置一个图标，以便用户可以提交消息。

无论我将图标放在 ion-card 内部、ion-card-content 内部、ion-footer 内部还是外部，它都没有正确的定位。如果我把它放在页脚内，它甚至不会显示。如果我把它放在页脚外面，它显然位于页脚的顶部或底部。

<IonFooter style={{backgroundColor: 'white'}}>
  <IonCard style={{width: '75%'}}>
    <IonCardContent>
      <IonTextarea
        placeholder="Enter message here..." 
        value={text} 
        ionChange={e => setText(e.detail.value)} 
      />
    </IonCardContent>
  </IonCard>
  <IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>

在页脚内（它在下面，但由于某种原因你看不到它，即使我使用黑色图标）在页脚外（奇怪地放在黑盒子里）

Answer 1

你可以尝试在你的ionCard中添加一个网格并调整col的数量

如果你想让图标和文本区分开

<ion-footer>
<ion-card>
  <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
        <ion-col>
          <ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
      </ion-row>
    </ion-grid>
    
  </ion-card-content>
</ion-card>
  </ion-footer>

如果您想要“内部”图标：

<ion-item>
 <!-- <ion-label position="floating">Write Here</ion-label> -->
 <ion-textarea></ion-textarea>
 <ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>

离子卡旁边的离子图标位置

Ion-icon position beside ion-card

css

ionic-framework