Стиль макета карты IONIC выглядит не по центру и не одинаково разнесен

Question

Я создаю приложение IONIC и сделал макет карты, как показано ниже.

<ion-content padding>
        <ion-card *ngFor="let book of booksData.books; let i=index">
              <ion-row>
                <ion-col col-3>
                    <ion-avatar item-start>
                    <img src="/../../img/authorImage.png">
                    </ion-avatar>
                </ion-col>
              <ion-col col-7>
                <ion-card-header>
                  #{‌{i+1}}
                </ion-card-header>
                  <ion-card-content>
                    <p>{‌{book.text}}</p>
                    <p>{‌{book.person}}</p>
                  </ion-card-content>
                </ion-col>
                <ion-col col-2>
                    <ion-row>
                    <ion-icon name="thumbs-up"></ion-icon>
                    </ion-row>
                    <ion-row>
                    <ion-icon name="thumbs-down"></ion-icon>
                    </ion-row>
                </ion-col>
                </ion-row>
                </ion-card>
</ion-content>

Карта разделена на три колонки (как и ожидалось), как бы я ни сталкивался с проблемой ниже

Значок «вверх» и «вниз» отображается, но не в полном объемерост .вместо этого они занимают только часть площади столбца.Как я могу убедиться, что две иконки занимают половину ширины строки этого конкретного столбца.

Любые входные данные о том, как это исправить, пожалуйста.

Answer 1

Хорошо, вот как вы можете решить обе ваши проблемы, вот код для вашей страницы:

<ion-card *ngFor="let book of booksData.books; let i=index">
        <ion-row>
            <ion-col col-3>
                <ion-avatar item-start>
                    <img src="./assets/img/authorImage.png">
                </ion-avatar>
            </ion-col>
            <ion-col col-7>
                <ion-card-header>
                  #{‌{i+1}}
                </ion-card-header>
                <ion-card-content>
                    <p>{‌{book.text}}</p>
                    <p>{‌{book.person}}</p>
                </ion-card-content>
            </ion-col>
            <ion-col col-2>
                <ion-icon name="thumbs-up"></ion-icon>
                <ion-icon name="thumbs-down"></ion-icon>
            </ion-col>
        </ion-row>
</ion-card>

И это CSS для вашей страницы

.col[col-2] {
  display: grid;

  ion-icon {
    display: flex;
    font-size: 2em;
    align-self: center;
    justify-self: center;
  }
}

Поехаличерез код:

Для изображения вам нужно добавить путь относительно вашего index.html файла, так как приложение Ionic - это просто SPA (одностраничное приложение), поэтому каждая страница обслуживается как былачасть вашего index.html.То же самое работает с изображениями, отображаемыми через файлы javascript и CSS.

Для кнопок «вверх» нужно сначала удалить строки из HTML, они не обязательно должны находиться внутри строки.

Затем вы можете манипулировать им с помощью CSS, применить display: grid к элементу col с атрибутом col-2, если хотите, вы можете изменить его на класс или ID и использовать что-то вроде <ion-col col-2 class="thumbs-col">...</ion-col> и изменить селектор CSSна .thumbs-col вместо .col[col-2].

Сетки дисплея достаточно, чтобы разделить на 2 равные строки, но если по какой-либо причине она не разделяется, просто добавьте grid-auto-flow: row; к вашему селектору col.

Для значка я добавил код, чтобы он мог центрировать значок как по вертикали, так и по горизонтали с помощью flexbox.Для размера, так как значок не изображение, а SVG, вам нужно манипулировать его размером с font-size, а не height/width.Например, если вы измените на кнопку со значком, вы можете использовать height/width.

Надеюсь, это поможет.