web-dev-qa-db-fra.com

Ionic - Onglet de défilement horizontal pour les catégories

Je travaille sur une application web/mobile avec mobile et nous avons cet onglet de défilement horizontal ci-dessus qui représente les catégories. Sur mobile, c'est bien, mais sur le web, je dois ajouter 2 flashs un sur le côté droit et un sur le côté gauche. Lorsque l'utilisateur clique dessus, le défilement doit se déplacer dans cette direction.

<ion-scroll scrollX="true">
       <ion-segment [(ngModel)]="SelectedSubCategory">
         <ion-segment-button value="" (ionSelect)="SelectSubCategory('')">
                <h6>
                   All Groups
                 </h6>
         </ion-segment-button>
         <ion-segment-button value="{{item.CategoryId}}" (ionSelect)="SelectSubCategory(item.CategoryId)" *ngFor="let item of SubCategories">
            <h6 class="subcategorytext">
                {{item.CategoryName}}
            </h6>
         </ion-segment-button>
       </ion-segment>
     </ion-scroll>

Est-il possible d'y parvenir?

angulartypescriptionic-frameworkionic2ionic3
10
Missak Boyajian

Bien que ces questions puissent être considérées comme un doublon d'une autre question, j'ajouterai toujours cette réponse car je pense qu'il existe une meilleure façon de gérer les catégories (du moins, du point de vue UI/UX).

Le résultat final ressemblerait à ceci:

Categories Demo

Fondamentalement, nous utilisons le composant curseur Ionic pour afficher les catégories, mais en affichant jusqu'à 3 catégories par diapositive.

Affichage:

Dans la vue, nous avons juste besoin d'ajouter une barre d'outils avec une ligne, qui comprendra 3 colonnes à l'intérieur: une pour la flèche gauche, une autre pour le curseur et la dernière pour la flèche droite. Veuillez également noter que nous définissons le slidesPerView="3" propriété dans le ion-slides élément.

<ion-header>
    <ion-navbar color="primary">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>App Name</ion-title>
    </ion-navbar>
    <ion-toolbar>
        <ion-row class="filters">
            <ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1>
                <ion-icon *ngIf="showLeftButton" name="arrow-back"></ion-icon>
            </ion-col>
            <ion-col no-padding col-10>
                <ion-slides (ionSlideDidChange)="slideChanged()" slidesPerView="3">
                    <ion-slide (click)="filterData(category.id)" *ngFor="let category of categories">
                        <p [class.selected]="selectedCategory?.id === category.id">{{ category.name }}</p>
                    </ion-slide>
                </ion-slides>
            </ion-col>
            <ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1>
                <ion-icon *ngIf="showRightButton" name="arrow-forward"></ion-icon>
            </ion-col>
        </ion-row>

    </ion-toolbar>
</ion-header>

Code composant :

Ensuite, nous avons juste besoin de savoir quoi faire lorsqu'une catégorie est sélectionnée, ou lorsque la diapositive actuelle change:

// Angular
import { Component, Injector, ViewChild } from '@angular/core';

// Ionic
import { IonicPage, Slides } from 'ionic-angular';

// Models
import { CategoryModel } from './../../models/category.model';

@Component({ ... })
export class HomePage {
    @ViewChild(Slides) slides: Slides;

    public selectedCategory: CategoryModel;
    public categories: Array<CategoryModel>;
    public showLeftButton: boolean;
    public showRightButton: boolean;

    constructor(public injector: Injector) { ... }

    // ...

    private initializeCategories(): void {

        // Select it by defaut
        this.selectedCategory = this.categories[0];

        // Check which arrows should be shown
        this.showLeftButton = false;
        this.showRightButton = this.categories.length > 3;
    }

    public filterData(categoryId: number): void {
        // Handle what to do when a category is selected
    }

    // Method executed when the slides are changed
    public slideChanged(): void {
        let currentIndex = this.slides.getActiveIndex();
        this.showLeftButton = currentIndex !== 0;
        this.showRightButton = currentIndex !== Math.ceil(this.slides.length() / 3);
    }

    // Method that shows the next slide
    public slideNext(): void {
        this.slides.slideNext();
    }

    // Method that shows the previous slide
    public slidePrev(): void {
        this.slides.slidePrev();
    }
}

Styles: 

    .filters {

        ion-col {
            text-align: center;
            font-size: 1.6rem;
            line-height: 1.6rem;

            ion-icon {
                color: #ccc;
            }

            &.col-with-arrow {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        p {
            color: #fff;
            margin: 0;
            font-size: 1.6rem;
            line-height: 1.6rem;
        }

        .selected {
            font-weight: 700;
        }
    }
22
sebaferreras