2016-04-24 11 views
-1

Ich möchte den Stil des Seitenmenüs ändern, aber nach mehreren Änderungen an Onsen-CSS-Komponenten-blue-basic-theme.css Ich kann das Element, das den Rand Schatten enthält nicht finden (siehe unter Bild). Ich möchte den Schatten aus dem Menü entfernen - mit welcher Datei wird das gehandhabt?Änderung Onsen UI Menü Stil

<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu> 

enter image description here

Antwort

0

Im Allgemeinen ist es eine bessere Idee, nicht zu generierten Dateien, als ob an einem bestimmten Punkt berühren Sie sich entscheiden, um das Thema zu wechseln oder die Version der Änderungen außer Kraft gesetzt werden aktualisieren. Anstatt also zu versuchen, das Framework CSS zu ändern, ist es normalerweise besser, wenn Sie Ihre Styles einfach in eine separate Datei schreiben (zumindest bis Sie sich entscheiden, die Dinge in die Produktion zu schieben).

Und über die Frage: diese Dinge können gefunden werden, indem Sie right click => inspect element tun. Wenn Sie das für das Element tun, können Sie sehen, woher die Stile kommen. Die Art, wie du deine Frage formulierst, klingt, als ob du versucht hast, sie zu finden, aber es nicht geschafft hast. Wahrscheinlich, wenn du noch länger nachgesehen hättest, hättest du es finden können.

Nach der oben beschriebenen Methode konnte ich feststellen, dass es tatsächlich in element.style des Hauptinhalts definiert ist. Einige Bibliotheken tun dies, obwohl es nicht sehr empfohlen wird, dennoch ist es der sicherste Weg, um sicherzustellen, dass der Stil angewendet wird. Um es zu entfernen, können Sie einfach tun.

.onsen-sliding-menu__main { 
    box-shadow:none !important; 
} 

Demo

Die Klasse variieren auf der onsen je nach Ausführung kann. Es ist nicht die eleganteste Lösung, aber ons-sliding-menu ist eine relativ alte Komponente. In Onsen 2 gibt es tatsächlich ein ons-splitter Element, das die Verhaltensweisen von ons-sliding-menu und ons-split-view kombiniert. Wenn Sie das verwenden, werden Sie sehen, dass der Schatten dort entfernt wurde.