Ionic 2 - вкладки в нижнем и нижнем колонтитулах и области содержимого

Каков подход с Ionic, если нам нужно реализовать страницу, на которой вкладки изменяют только пространство нижнего колонтитула, в то время как основная область содержимого остается прежней (там есть карта Google, а вкладки меняют различные инструменты, которые пользователь может применить к ней).

Я прочитал все документы из ionic framework, но мне трудно понять, как искать шаблон, который мне нужен для этого.

Какие-либо предложения?

введите здесь описание изображения


user-interface ionic3 ionic2
person Sergey Rudenko    schedule 04.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Лучшим вариантом было бы использовать Segments, так как Tabs заставит вас разные страницы для каждой вкладки.

Вы можете создать ion-footer внизу и поместить туда SegmentButtons. Затем вы можете установить высоту карты, например, 60% содержимого, а затем добавить div с остальной высотой (40%). Внутри этого div вы должны разместить содержимое каждого сегмента. Это будет что-то вроде этого:

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Your PageName</ion-title>
    </ion-navbar>   
</ion-header>

<ion-content>

    <!-- Map section -->
    <div class="map" style="height:60%;">
        <!-- Here you would display the map -->
    </div>

    <!-- Additional UI section -->
    <div class="additional-div" style="height:40%;">

        <div [ngSwitch]="selectedSection">

            <div *ngSwitchCase="'tabButtonOne'">
                <!-- Content to show when the fist tab button is selected -->
                <!-- ... -->
            </div>

            <div *ngSwitchCase="'tabButtonTwo'">
                <!-- Content to show when the second tab button is selected -->
                <!-- ... -->
            </div>

            <div *ngSwitchCase="'tabButtonThree'">
                <!-- Content to show when the third tab button is selected -->
                <!-- ... -->
            </div>

        </div>

    </div>

</ion-content>
<ion-footer>
    <ion-toolbar color="primary">
        <ion-segment [(ngModel)]="selectedSection" color="light">
            <ion-segment-button value="tabButtonOne">
                Tab button 1
            </ion-segment-button>
            <ion-segment-button value="tabButtonTwo">
                Tab button 2
            </ion-segment-button>
            <ion-segment-button value="tabButtonThree">
                Tab button 3
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-footer>

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

@Component(...)
export class YourPage {

    // Select the first segment by default...
    public selectedSection = 'tabButtonOne';

    // ...
}
person sebaferreras    schedule 04.08.2017