Текстовое поле с левой и правой стрелкой - Ionic4

Question

Я пытаюсь добиться функциональности, подобной показанной на изображении, используя ionic. Стрелка влево и вправо должна изменить месяцы на предыдущий месяц и следующий месяц соответственно (вместе с годом). Есть ли в ионике какой-либо компонент, у которого уже есть такие стрелки? В настоящее время я пытаюсь добиться использования текстового поля и заставить стрелки отображаться внутри них, используя свойство position: absolute. Есть ли более эффективный способ сделать это? Можно ли изменить месяц вместе с годом?

 <div class='year'>
        <ion-icon name="ios-arrow-back" (click) ="previousMonth()"></ion-icon>
        <input class='year-text-box' type="text" name="year" value='November 2019'>
        <ion-icon name="ios-arrow-forward" (click) ="nextMonth()"></ion-icon>
  </div>

Answer 1

Ionic имеет поддержку grid / row / col, поэтому что-то подобное получит макет, который вы ищете:

<div class='year'>
    <ion-row>
        <ion-col size="1">
            <ion-icon name="ios-arrow-back" (click)="previousMonth()"></ion-icon>
        </ion-col>
        <ion-col size="10">
            <input class='year-text-box' type="text" name="year" value='November 2019'>
        </ion-col>
        <ion-col size="1">
            <ion-icon name="ios-arrow-forward" (click)="nextMonth()"></ion-icon>
        </ion-col>
    </ion-row>
</div>

См. Документы здесь:

• ion-grid - Ионная документация

, которая производит что-то вроде этого: