Esri Slider CSS Anpassungen

ReneRubalcava

<\/HEAD>

<\/P>

Also hast du eine großartige Webmap erstellt. Deine Webmap ist kicking butt and taking names<\/EM>. Du hast vielleicht einige schön aussehende benutzerdefinierte Tools. Vielleicht hast du ein benutzerdefiniertes Suchtool oder eine ansprechende Anzeige deiner Attributdaten erstellt. Aber du fängst an zu denken, hmm, ich möchte meiner gesamten Anwendung ein Thema geben<\/EM>. Vielleicht konzentriert sie sich auf einige Wasserressourcen oder führt eine Art Walddichteanalyse durch. Aber eines sieht bei all deinen Karten gleich aus... dein Zoom-Slider.<\/P><\/P>Hmm. Es sieht nicht schlecht aus, aber es könnte besser aussehen.<\/P><\/P>Die CSS-Klassen<\/SPAN><\/H2>Es gibt ein paar Dinge, die du ziemlich einfach mit CSS anpassen kannst, um den Slider zu individualisieren. Es erfordert nicht viel Arbeit, aber es kann deiner Anwendung das gewisse Etwas verleihen.<\/P>Hier ist eine Liste der Klassen, die mit dem Slider verbunden sind und nützlich sein werden.<\/P>.esriSimpleSlider<\/SPAN><\/LI>.esriSimpleSlider div<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderIncrementButton<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderHorizontal .esriSimpleSliderIncrementButton<\/SPAN><\/LI> .esriSimpleSliderHorizontal .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:hover,.esriSimpleSliderIncrementButton:hover<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:active,.esriSimpleSliderIncrementButton:active<\/SPAN><\/LI>.esriSimpleSliderDisabledButton,.esriSimpleSliderDisabledButton:active,.esriSimpleSliderDisabledButton:hover<\/SPAN><\/LI><\/UL><\/P>Das mag wie eine lange Liste erscheinen, aber du musst nicht alle ändern, dies sind nur die Klassen, die im Standard-CSS der ArcGIS JS API beschrieben sind. Es gibt noch mehr, die sich auf die Versätze basierend auf der Position des Sliders auf der Seite beziehen. Du kannst mit dem CSS in den Browser-Entwicklertools spielen, wie den Chrome Dev Tools<\/A>. Das ist eine einfache Möglichkeit, mit deiner Anwendung zu experimentieren.<\/P>

<\/P>

Herumprobieren<\/H2>Ein paar nette Dinge, die du tun kannst, sind einen Box-Schatten hinzufügen, den Rahmen entfernen und die Größe der Buttons für dicke Finger auf einem mobilen Gerät vergrößern.<\/P>.esriSimpleSlider {
  border: 0 solid #57585A;
  \/\*shadow*\/
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.12), 5px 5px 5px rgba(0, 0, 0, 0.12);
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}<\/PRE><\/P>Das sieht dann so aus.<\/P>**Tipp: Wenn du die Button-Größe änderst, ändere auch die line-height, um +/- zentriert zu bleiben.<\/EM><\/SPAN><\/P>Kein großer Unterschied, ziemlich subtil, aber es hebt deine Anwendung von anderen ab. Du kannst diese Demo hier<\/A> sehen. Oder vielleicht möchtest du die Farbe aktualisieren, um zum Gesamtthema deiner Anwendung zu passen. Du kannst das CSS so anpassen.<\/P>

.esriSimpleSlider {
  border: 0 solid #57585A;
  background-color: #02a7f8;
  color: #FFF;
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
  border-bottom: 0 solid #57585A; \/\*setting to 0 removes the separator*\/
}<\/PRE><\/P>Das sieht dann so aus.<\/P> **Tipp: Beachte, wie ich den Rahmen auf 0 gesetzt habe, um den Trenner zwischen den Buttons zu entfernen.<\/EM><\/SPAN><\/P>So etwas möchtest du vielleicht machen, wenn deine Anwendung in eine andere Anwendung eingebettet ist und du das Benutzererlebnis nahtloser gestalten möchtest. Du kannst diese 

Demo hier<\/A> sehen.<\/P>

<\/P>

Verschiebe ihn<\/H2>Vergiss nicht, dass der Map-Konstruktor auch Optionen<\/A> hat, um den Slider zu verschieben. Du kannst sliderOrientation & sliderPosition verwenden, um den Slider an deine Bedürfnisse anzupassen. Platziere ihn in der unteren linken Ecke oder oben rechts und horizontal. Probier es aus. Du kannst eine kleine Demo hier<\/A> sehen.<\/P>

<\\/P>P>Also probiere etwas CSS aus und füge deiner Mapping-Anwendung ein wenig Flair hinzu in Bereichen, die sonst weniger beachtet werden. Das kann dir helfen, ein Gesamtthema für deine Karte und App zu erstellen, das sie ein wenig hervorhebt.<\\/BODY>P>