Dwa ngcontent na Kątowymi komponentu

głosy
1

Utworzonego składnika wypustki ( https://stackblitz.com/edit/angulartabs ) używane w następujący sposób:

<tabs>
  <tab title=tab 1>Content 1</tab>
  <tab title=tab 2 active=true>Content 2</tab>
</tabs>

Zakładkach Element HTML jest w następujący sposób:

<div class=head>
  <ul class=tabs>
    <li *ngFor=let tab of tabs (click)=select(tab) class=tab [class.active]=tab.active>
      <a>{{ tab.title }}</a>
    </li>
  </ul>
  <div class=toolbar>Toolbar</div>
</div>
<ng-content></ng-content>

To działa, ale muszę również znaczniki na pasku narzędzi, aby zmienić po wybraniu zakładki zmian.

Tak więc dla każdej karcie muszę określić jej zawartość i jej pasek.

Jak to zrobić?

Aktualizacja

Może znaczników HTML przy użyciu zaczepy powinny być:

<tabs>
  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    Content 1
  </tab>
  <tab title=tab 2 active=true>
    Content 2
  </tab>
</tabs>

W zakładce 2 nie ma pasek narzędzi, który jest również opcja ...

Czy zawartość musi być także owinięte w tagu?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>
Utwórz 18/12/2018 o 11:11
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

Aktualizacja

Chyba mam poprawny pomysł dzięki kodzie stackblitz.

To może być rozwiązany przez CSS stylizacji z ng-content translusion. Oto kody HTML z atrybutem stylu.

app.component.html:

<tabs>
  <tab title="tab 1">
    Content 1
    <div class="toolbar">Toolbar 1</div>
  </tab>
  <tab title="tab 2" active="true">
    Content 2
    <div class="toolbar">Toolbar 2</div>
  </tab>
</tabs>

tabs.component.html:

<div style="position: relative">
  <div class="head">
    <ul class="tabs">
      <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
        <a>{{ tab.title }}</a>
      </li>
    </ul>
  </div>
  <ng-content></ng-content>
</div>

tab.component.html:

<div *ngIf="active" style="position: absolute; right: 0; top: 0">
  <ng-content select=".toolbar"></ng-content>
</div>
<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

Takie podejście nie jest źle myślę.

Odpowiedział 18/12/2018 o 11:22
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more