Показать аккордеон на мобильных устройствах и вкладку на других - PullRequest
Новая
       17

Показать аккордеон на мобильных устройствах и вкладку на других

0 голосов
/ 29 апреля 2020

В моем приложении несколько страниц, которые используют ngx-tabs (https://valor-software.com/ngx-bootstrap/# / tabs ), вкладки не очень хорошо подходят для мобильных устройств, поэтому на мобильных устройствах я хочу показать ngx-accordion (https://valor-software.com/ngx-bootstrap/# / аккордеон ) вместо вкладок. Я мог бы достичь этой функциональности, используя angular breakpointobserver, но для конкретной страницы. Мне нужно использовать это в приложении, и я пытался выяснить, как написать пользовательскую директиву или универсальный c компонент, который можно использовать повторно.

ab c .component. html: 


    <div>
      <tabset *ngIf="tabs">
        <tab heading="Basic title" id="tab1">Basic content</tab>
        <tab heading="Basic Title 1">Basic content 1</tab>
        <tab heading="Basic Title 2">Basic content 2</tab>
      </tabset>

    <accordion *ngIf="!tabs">
      <accordion-group heading="Basic title">
            Basic content
      </accordion-group>
      <accordion-group heading="Basic title 1">
           Basic content 1
      </accordion-group>
      <accordion-group heading="Basic title 2">
           Basic content 2
      </accordion-group>
      </accordion>
    </div>

ab c .component.ts 


import { Component, OnInit, ElementRef } from "@angular/core";
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: "app-abc",
  templateUrl: "abc.component.html"
})
export class AbcComponent implements OnInit {
  tabs: boolean = true;

  constructor(private observer: BreakpointObserver) {
    observer.observe([Breakpoints.Small, Breakpoints.Handset, Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
      if (result.matches) this.tabs = false;
      else this.tabs = true;
    });
  }


  ngOnInit(): void {
  }


}

В принципе мне нужно что-то вроде этого, 

<my-tab>
  <my-tab-item heading="Basic title"> Basic content </my-tab-item>
  <my-tab-item heading="Basic title1"> Basic content 1</my-tab-item>
  <my-tab-item heading="Basic title2"> Basic content 2</my-tab-item>
</my-tab>

, который преобразуется в <tab> или <accordion> на основе точки останова.

Спасибо!

...