angular - buttons - ionic tabs

Ionic: pestaña de desplazamiento horizontal para Categorías

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo usar content.scrollTo () para ion-scroll en ionic2? 5 respuestas

Estoy trabajando en una aplicación web / móvil con dispositivos móviles y tenemos esta pestaña de desplazamiento horizontal en la parte superior que representa las categorías. En dispositivos móviles está bien, pero en la web debo agregar 2 flashes, uno en el lado derecho y otro en el lado izquierdo. Cuando el usuario hace clic en ellos, el desplazamiento debe moverse en esa dirección.

<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>

¿Es posible lograr eso?

Answer 1

Si bien estas preguntas pueden considerarse como un duplicado de otra pregunta, todavía agregaré esta respuesta porque creo que hay una mejor manera de manejar las categorías (al menos, desde el punto de vista de UI / UX).

El resultado final se vería así:

Básicamente, estamos usando el componente de control deslizante Ionic para mostrar las categorías, pero mostrando hasta 3 categorías por diapositiva.

Ver:

En la vista solo necesitamos agregar una barra de herramientas con una fila, que incluirá 3 columnas dentro: una para la flecha izquierda, otra para el control deslizante y la última para la flecha derecha. Tenga en cuenta también que estamos configurando la slidesPerView="3" en el elemento ion-slides .

<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>

Código de componente :

Luego solo tenemos que manejar qué hacer cuando se selecciona cualquier categoría o cuando cambia la diapositiva actual:

// 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();
}
}

Estilos:

 .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;
}
}