Question

我尝试让滑块与搜索栏和列表配合使用。

我想做什么：一个用于创建一些输入的站点，用户将逐步浏览幻灯片。在一张幻灯片上，我想要：

顶部->搜索栏
->带有化身的行（仅在复选框中显示选中项的图片）与ng-if
在头像行->列表/复选框中包含所有项目（可通过搜索栏搜索）

我尝试使其与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>

Ionic 4-带有搜索栏，头像列表和头像行的滑块

0 个答案: