Wie mache ich das Material UI -Seitenleiste gleitet und drückt?
Posted: 02 Apr 2025, 02:55
Ich habe eine React-App erstellt, die eine Seitenleiste verwendet, die sich entlasten soll, aber nicht. Es wird einfach angezeigt, während es den Inhalt erfolgreich nach rechts drückt, und wird beim Wieder klicken. < /P>
Der Code verwendet < /p>
transition: transform 0.3s ease-in-out;
transform: translateX(-250px);
< /code>
Um die Seitenleiste auf und aus Leinwand zu verschieben. Aber es scheint nicht im Sandbox -Beispiel zu funktionieren. Es funktioniert in meiner realen App, aber nicht animiert.
Hier ist ein Bild, das erweitert ist. Collapsed :
Beachten Sie, dass der Seitenbär alle weiß ist. Ich kann es nicht zu einer anderen Farbe bringen. Ich möchte, dass der Knopf an Ort und Stelle bleibt, wenn das Tablett darunter ein- und aussieht. Die meisten Beispiele drücken den Header auch über, wodurch Sie die Maus an einen anderen Ort bringen müssen, um ihn zu schließen. Ich habe einen aus der Haupt -App abschnüffelten portiert, aber jetzt geht der Inhalt unter das Menü anstatt rechts davon. Ich hoffe, einer von euch Experten kann mir zeigen, was mir fehlt!
Der Code verwendet < /p>
transition: transform 0.3s ease-in-out;
transform: translateX(-250px);
< /code>
Um die Seitenleiste auf und aus Leinwand zu verschieben. Aber es scheint nicht im Sandbox -Beispiel zu funktionieren. Es funktioniert in meiner realen App, aber nicht animiert.
Hier ist ein Bild, das erweitert ist. Collapsed :
Beachten Sie, dass der Seitenbär alle weiß ist. Ich kann es nicht zu einer anderen Farbe bringen. Ich möchte, dass der Knopf an Ort und Stelle bleibt, wenn das Tablett darunter ein- und aussieht. Die meisten Beispiele drücken den Header auch über, wodurch Sie die Maus an einen anderen Ort bringen müssen, um ihn zu schließen. Ich habe einen aus der Haupt -App abschnüffelten portiert, aber jetzt geht der Inhalt unter das Menü anstatt rechts davon. Ich hoffe, einer von euch Experten kann mir zeigen, was mir fehlt!