Angular Material mdTabs: Ist es möglich, vertikale Tabs zu haben?

8

Ich suche Tabs, die von oben nach unten angezeigt werden, mit der Tab-Navigation auf der linken Seite. Gibt es das überhaupt in der Angular Material Bibliothek?

    
Udaya Bhaskar Reddy 24.11.2015, 09:54
quelle

1 Antwort

3
___ tag123angularjs ___ Für Fragen zu AngularJS (1.x), dem Open-Source-JavaScript-Framework. Verwenden Sie dieses Tag NICHT für Angular 2 oder höhere Versionen. Verwenden Sie stattdessen das [eckige] -Tag. ___ tag123angularjsdirective ___ AngularJS-Direktiven sind eine Möglichkeit HTML neue Tricks beizubringen, indem das HTML-Vokabular erweitert wird. Mit Direktiven können Sie DOM-Elemente in einem deklarativen Muster verwalten, wodurch Sie von DOM-Manipulationsaufgaben auf niedriger Ebene befreit werden. ___ qstnhdr ___ Angular Material mdTabs: Ist es möglich, vertikale Tabs zu haben? ___ qstntxt ___

Ich suche Tabs, die von oben nach unten angezeigt werden, mit der Tab-Navigation auf der linken Seite. Gibt es das überhaupt in der Angular Material Bibliothek?

    
___ tag123angularmaterial ___ Das Angular-Material-Projekt ist eine Implementierung von Material Design in Angular. Dieses Projekt stellt eine Reihe wiederverwendbarer, gut getesteter und zugänglicher UI-Komponenten bereit, die auf dem Material Design-System basieren. Verwenden Sie dieses Tag nicht für AngularJS Material, die Implementierung von Material Design für das ältere AngularJS-Framework. ___ antwort43389018 ___

Dieser Codepen von Rahul Sagore verwendet Vanille-Material, nicht speziell für Angular, aber es ist genau das, was du willst. Ich habe nach dem gleichen gesucht wie du; Es ist eine Schande, dass das Material dies nicht anbietet, aber ich kann sehen, wie es gegen ihre Prinzipien gehen und das Material zu umfangreich machen würde.

Es besteht aus benutzerdefinierten CSS (möglicherweise überschreiben, ich bin mir nicht sicher) und Verwendung von bestimmten Material Klassennamen. Im Folgenden habe ich den Inhalt in ein Snippet eingefügt.

Ich hatte ein Problem mit den mdl-cell--n-col -Klassen, also habe ich den Inhalt von 10-col auf 6-col geändert, damit der Inhalt nicht unter die Registerkarten im restriktiven Bereich dieses Beitrags verschoben wird. Sie müssen wahrscheinlich selbst damit experimentieren, oder verwerfen und Material-Stile verwenden, wie Sie es wissen. Ebenso kann ich nicht sehen, was die .hollow-circle Spannen tun, also werden sie vielleicht nicht benötigt.

%Vor% %Vor%
    
___
Henry Blyth 13.04.2017 09:53
quelle