时间戳

首页 > 解决方案 > 如何在 Ionic 3 中实现以下巴士座位布局安排？

ionic3 - 如何在 Ionic 3 中实现以下巴士座位布局安排？

问题描述

检查这张图片

我在 HTML 代码中使用了它 只想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和座位巴士混合座位加载座位。只想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和座位巴士混合座位加载座位。只想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和座位巴士混合座位加载座位。

这是我的 HTML 代码：

        <div text-right>
            <img src="assets/imgs/ic_steering.png" alt="" style="height: 25px; width: 25px;" />
        </div>

        <div *ngFor="let rowItem of multiDimArray" no-padding>

            <div class="seatrow container">

                <div *ngFor="let colItem of rowItem">

                    <div class="space" *ngIf="!colItem  ||(colItem&& colItem.name == '') "> &nbsp; </div>

                    <div *ngIf="colItem && colItem.length =='1' && colItem.width =='1'">
                        <div *ngIf="colItem && colItem.available =='true' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_seater_unselected.png"
                                alt="" class="unspace" />

                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_seater_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colItem && colItem.available =='false' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_seater_selected.png"
                                alt="" class="unspace" />


                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_women_seater_selected.png"
                                alt="" class="unspace" />
                        </div>
                    </div>

                    <div *ngIf="colItem && colItem.length =='2' && colItem.width =='1'">
                        <div *ngIf="colItem && colItem.available =='true' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_sleeper_unselected.png"
                                alt="" class="unspace" />

                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_sleeper_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colItem && colItem.available =='false' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_sleeper_selected.png"
                                alt="" class="unspace" />


                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_women_sleeper_selected.png"
                                alt="" class="unspace" />
                        </div>
                    </div>

                    <div *ngIf="colItem && colItem.length =='1' && colItem.width =='2'">
                        <div *ngIf="colItem && colItem.available =='true' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_sleeper_unselected.png"
                                alt="" class="unspace" />

                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_sleeper_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colItem && colItem.available =='false' && colItem.name != ''">
                            <img *ngIf="colItem.ladiesSeat =='false'" src="assets/imgs/ic_sleeper_selected.png"
                                alt="" class="unspace" />


                            <img *ngIf="colItem.ladiesSeat =='true'" src="assets/imgs/ic_women_sleeper_selected.png"
                                alt="" class="unspace" />
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>

标签： ionic3

解决方案

尝试添加 display: flex 并为整个 div 指定一个包装器。喜欢以下

<div style:"display: flex" cols="12">
//first row    
<div style:"display: flex" cols="6">
</div>
//second row
<div style:"display: flex" cols="6">
</div>
</div>

推荐阅读