Question

我想使用Ionic2在模态之外添加一个元素，如下图所示。

蓝色边框包围的区域是我想要添加的元素。红色边框包围的区域是我创建的自定义模式。

自定义Modal.html

<ion-header>
    <ion-navbar class="select-header">
        <ion-buttons left (click)="close()">
            <button ion-button>
                <img class="close" src="assets/images/close.png"/>
            </button>
        </ion-buttons>
        <ion-title>{{title}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="region-selection">  
    <div class="select-all">
        <img class="selection not-selected" src="assets/images/region/check_none.png"/>
        <span>{{title}}</span>
    </div>
    <div class="select-region">
        <ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
            <ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
                <img class="selection not-selected" src="assets/images/region/check_none.png"/>
                <span [innerHtml]="region"></span>
            </ion-col>
        </ion-row>
    </div>
</ion-content>

Answer 1

尝试将所有商品放在ion-content中，然后移除ion-header以获得此类结构

<ion-content class="region-selection">

    <div class="outside-element">
        <!--element outside of modal-->
    </div>

    <!--This is your modal header wrapper-->
    <div class="modal-header">
        <ion-buttons left (click)="close()">
            <button ion-button>
                <img class="close" src="assets/images/close.png" />
            </button>
        </ion-buttons>
        <ion-title>{{title}}</ion-title>
    </div>

    <!--This is your modal header wrapper-->
    <div class="modal-content">
        <div class="select-all">
            <img class="selection not-selected" src="assets/images/region/check_none.png" />
            <span>{{title}}</span>
        </div>
        <div class="select-region">
            <ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
                <ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
                    <img class="selection not-selected" src="assets/images/region/check_none.png" />
                    <span [innerHtml]="region"></span>
                </ion-col>
            </ion-row>
        </div>
    </div>
</ion-content>

现在，您可以使用css来设置元素的样式和位置，使用类.outside-element，.modal-header，.modal-content

另外，请务必将background-color设置为transparent

ionic2如何将元素放在模态之外

1 个答案: