Ionic 4 - слайдер с панелью поиска, списком и рядом аватаров - PullRequest
Новая
       35

Ionic 4 - слайдер с панелью поиска, списком и рядом аватаров

0 голосов
/ 16 января 2019

Я пытаюсь заставить слайдер работать с панелью поиска и списком.

Что я хочу сделать: сайт для создания некоторых входов, пользователь проходит через слайды шаг за шагом. На одном слайде я хочу иметь:

  • top -> панель поиска

  • под строкой поиска -> строка с аватарами (показывает только изображение отмеченного элемента в флажке) с нг-если

  • под аватар-строкой -> список / флажок со всеми элементами (поиск можно найти через панель поиска)

Я пытаюсь заставить его работать с grid / col, но это приводит к некоторым странным ошибкам проектирования. Я также пробовал фиксированную позицию, но у меня будет пробел между строкой поиска и флажком, когда ни один элемент не отмечен…

Есть идеи?

// Редактировать: пример кода 

<ion-slides>
    <ion-slide> <!-- slide 1 -->
        <ion-grid>
            <ion-row size="12" no-padding>
                <ion-col>
                    <ion-searchbar></ion-searchbar>
                </ion-col>
            </ion-row>
            <ion-row size="12" no-padding *ngIf="avatars">
                <ion-avatar *ngFor="let number of [0,1,2,3,4]">
                    <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png">
                </ion-avatar>
            </ion-row>
            <ion-row size="12" no-padding>
                <ion-col>
                    <ion-list>
                        <ion-item>
                            <ion-label>some label</ion-label>
                            <ion-checkbox slot="end"></ion-checkbox>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-slide>
    <ion-slide> <!-- slide 2 -->
    </ion-slide>
</ion-slides>
...