Esri Slider CSS-aanpassingen

ReneRubalcava

<\/HEAD>

<\/P>

Dus je hebt een geweldige webmap gemaakt. Je webmap is de beste en doet het fantastisch<\/EM>. Misschien heb je wat mooi uitziende aangepaste tools. Misschien heb je een aangepaste zoektool gebouwd of een mooie weergave van je attribuutgegevens. Maar je begint te denken, hmm, ik wil mijn hele applicatie een thema geven<\/EM>. Misschien richt het zich op wat waterbronnen of doet het een soort bosdichtheidsanalyse. Maar één ding ziet er hetzelfde uit op al je kaarten... je zoom slider.<\/P><\/P>Hmm. Het ziet er niet slecht uit, maar het kan beter.<\/P><\/P>De CSS-klassen<\/SPAN><\/H2>Er zijn een paar dingen die je vrij eenvoudig kunt doen om de slider aan te passen met CSS. Het kost niet veel werk, maar het kan net dat beetje flair aan je applicatie toevoegen.<\/P>Hier is een lijst van de klassen die bij de slider horen en handig zullen zijn.<\/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>Dat lijkt misschien een lange lijst, maar je hoeft ze niet allemaal aan te passen, dit is gewoon wat beschreven wordt in de standaard css van de ArcGIS JS API. Er zijn er zelfs nog meer die te maken hebben met de offsets gebaseerd op de locatie van de slider op de pagina. Je kunt beginnen met experimenteren met de CSS in browser dev tools, zoals Chrome Dev Tools<\/A>. Dit is een gemakkelijke manier om met je applicatie te experimenteren.<\/P>

<\/P>

Speel ermee<\/H2>Een paar leuke dingen die je kunt doen zijn bijvoorbeeld een box shadow toevoegen, de rand verwijderen en de grootte van de knoppen vergroten voor dikke vingers op een mobiel apparaat.<\/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>Dit ziet er dan zo uit.<\/P>**Tip: Als je de knopgrootte verandert, verander dan ook de line-height om het ongeveer gecentreerd te houden.<\/EM><\/SPAN><\/P>Niet een enorm verschil, vrij subtiel, maar het onderscheidt je applicatie van anderen. Je kunt deze demo hier<\/A> bekijken. Of misschien wil je de kleur aanpassen om bij het algemene thema van je applicatie te passen. Je kunt de CSS als volgt aanpassen.<\/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; \/\*instellen op 0 verwijdert de scheiding*\/
}<\/PRE><\/P>Dit ziet er dan zo uit.<\/P> **Tip: Let erop hoe ik de rand op 0 zet om de scheiding tussen de knoppen te verwijderen.<\/EM><\/SPAN><\/P>Je wilt misschien zoiets doen als je applicatie ingebed is in een andere applicatie en je de gebruikerservaring naadlozer wilt maken. Je kunt deze 

demo hier<\/A> bekijken.<\/P>

<\/P>

Verplaats het<\/H2>Vergeet niet dat de map constructor ook opties<\/A> heeft om de slider te verplaatsen. Je kunt sliderOrientation & sliderPosition gebruiken om de slider aan te passen aan jouw wensen. Zet hem in de linkerbenedenhoek of rechtsboven en horizontaal. Speel ermee. Je kunt een kleine demo hier<\/A> zien.<\/P>

<\\/P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P>P