Ajustements CSS pour Esri Slider

ReneRubalcava

<\/HEAD>

<\/P>

Alors vous avez créé une webmap impressionnante. Votre webmap déchire tout et fait sensation<\/EM>. Vous avez peut-être de jolis outils personnalisés. Peut-être avez-vous construit un outil de recherche personnalisé ou une belle présentation de vos données attributaires. Mais vous commencez à penser, hmm, j'aimerais donner un thème à toute mon application<\/EM>. Peut-être qu'elle est axée sur certaines ressources en eau ou réalise une sorte d'analyse de densité forestière. Mais une chose reste la même sur toutes vos cartes... votre curseur de zoom.<\/P><\/P>Hmm. Ce n'est pas mal, mais ça pourrait être mieux.<\/P><\/P>Les classes CSS<\/SPAN><\/H2>Il y a quelques choses que vous pouvez faire pour personnaliser le slider assez facilement avec du CSS. Cela ne demande pas beaucoup de travail, mais cela peut ajouter ce petit plus à votre application.<\/P>Voici donc une liste des classes associées au slider qui vous seront utiles.<\/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>Cela peut sembler une longue liste, mais vous n'avez pas besoin de modifier toutes ces classes, c'est juste ce qui est décrit dans le css par défaut de l'ArcGIS JS API. Il y en a encore plus qui concernent les décalages basés sur la position du slider sur la page. Vous pouvez commencer à jouer avec le CSS dans les outils de développement du navigateur, comme Chrome Dev Tools<\/A>. C'est un moyen facile d'expérimenter avec votre application.<\/P>

<\/P>

Jouez un peu<\/H2>Donc, quelques trucs sympas que vous pouvez faire sont d'ajouter une ombre portée, supprimer la bordure et augmenter la taille des boutons pour les gros doigts sur un appareil mobile.<\/P>.esriSimpleSlider {
  border: 0 solid #57585A;
  \/\*ombre*\/
  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>Cela donne ceci.<\/P>**Astuce : Si vous changez la taille du bouton, changez la hauteur de ligne (line-height) pour garder le +\/- centré.<\/EM><\/SPAN><\/P>Pas une énorme différence, assez subtil, mais cela distingue votre application des autres. Vous pouvez voir cette démo ici<\/A>. Ou peut-être voulez-vous mettre à jour la couleur pour correspondre au thème général de votre application. Vous pouvez ajuster le CSS comme ceci.<\/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; \/\*mettre à 0 supprime le séparateur*\/
}<\/PRE><\/P>Cela donne ceci.<\/P> **Astuce : Notez comment j'ai mis la bordure à 0 pour enlever le séparateur entre les boutons.<\/EM><\/SPAN><\/P>Vous voudrez peut-être faire quelque chose comme ça si votre application est intégrée dans une autre application et que vous souhaitez rendre l'expérience utilisateur plus fluide. Vous pouvez voir cette 

démo ici<\/A>.<\/P>

<\/P>

Déplacez-le<\/H2>N'oubliez pas que le constructeur de carte a aussi des options<\/A> pour déplacer le slider. Vous pouvez utiliser sliderOrientation & sliderPosition pour changer le slider selon vos besoins. Mettez-le dans le coin inférieur gauche ou en haut à droite et horizontalement. Amusez-vous avec ça. Vous pouvez voir une petite démo ici<\/A>.<\/P>

Alors jouez un peu avec du CSS et ajoutez un peu de style aux zones moins exploitées de votre application cartographique. Cela peut vous aider à construire un thème global pour votre carte et votre application qui la distingue un peu.