Html Größe ändern Inhalt nach Breite ändern (Anuglar4) wie md-sidenav

Question

Ich habe einige Inhalte mit Menü auf der linken Seite, und ich habe eine Schaltfläche im Menü, wenn ich diese Taste drücken, Breite des Menüs wurde kleiner, und ich will das In diesem Moment wird die Breite meines Inhalts größer (Anpassung an die Größe).

Dieser Effekt ist in https://material.angular.io/components/sidenav/examples md-sidenav vorhanden, wenn Sie die Taste + drücken, Inhalt wird größer oder kleiner.

Ich möchte diese Größe auf meinem Knopf :), mb gibt es einige CSS oder Javascript/Typoskript ...?

Ich bin mit Angular 4

Answer 1

Der einfachste Weg ist wahrscheinlich durch den Flex-Layout verwenden - das Seitenmenü würde eine feste Breite und der Inhalt würde eine flexible Breite haben. Siehe hierzu plunker. Um mit den Flex-Optionen zu spielen, können Sie dies überprüfen flex playground. Um eine einfache Größenanimation hinzuzufügen, verwenden Sie die Angular animations guide - erstellen Sie zwei Zustände, die die width Eigenschaft des Seitenmenüs animieren.