Siirry pääsisältöön

Slider

Avaa ChatGPT:ssä
Varjo dwc-slider 24.10
Java API

Slider -komponentti antaa käyttäjille mahdollisuuden valita numeerinen arvo vetämällä nuppia raidan yli, joka on määritelty minimirajan ja maksimirajan välillä. Askelväli, viivamerkit ja etiketit voidaan määrittää ohjaamaan valintaa.

Perusteet​

Slider on suunniteltu toimimaan suoraan laatikosta ilman lisäasetuksia, jotta se toimii tehokkaasti. Oletusarvoisesti se kattaa alueen 0-100, ja sen alkuarvo on 50, mikä tekee siitä ihanteellisen nopeaan integroimiseen mihin tahansa sovellukseen. Tarkempia käyttötarkoituksia varten Slider-komponenttia voidaan mukauttaa ominaisuuksilla, kuten suunta, viivamerkit, etiketit ja työkaluvinkit.

Tässä on esimerkki Slider-komponentista, joka mahdollistaa käyttäjien säätää äänenvoimakkuutta ennalta määritellyn alueen sisällä:

Näytä koodi

Slider arvo​

Slider-arvo edustaa nuppien nykyistä sijaintia sliderilla ja se on määritelty kokonaislukuna Slider-komponentin alueella. Tämä arvo päivittyy dynaamisesti, kun käyttäjä vuorovaikuttaa sliderin kanssa, mikä tekee siitä olennaisen ominaisuuden käyttäjän syötteen seuraamiseksi.

Oletusarvoinen arvo

Oletusarvoisesti Slider aloittaa arvolla 50, olettaen oletusalueen 0-100.

Arvon asettaminen ja saaminen​

Voit asettaa Slider-arvon alkuperäisen asennuksen aikana tai päivittää sen myöhemmin käyttäen setValue()-metodia. Nykyisen arvon hakemiseksi käytä getValue()-metodia.

Slider slider = new Slider();  
slider.setValue(25); // Aseta slider 25:een

Integer value = slider.getValue();  
System.out.println("Nykyinen Slider Arvo: " + value);

Minimimäärät ja maksimit​

Minimi- ja maksimiarvot määrittelevät Slider-komponentin sallitun alueen, joka määrittää rajat, joiden sisällä Slider-nuppi voi liikkua. Oletusarvoisesti alue on asetettu 0-100, mutta voit mukauttaa näitä arvoja tarpeidesi mukaan.

Slider-komponentin askelväli on oletusarvoisesti 1, mikä tarkoittaa, että välin määrä määräytyy alueen mukaan. Esimerkiksi:

  • Slider, jonka alue on 0-10, sisältää 10 väliä.
  • Slider, jonka alue on 0-100, sisältää 100 väliä.

Nämä väliä on jaettu tasaisesti sliderin radalla, ja niiden väli määräytyy Slider-komponentin mittojen mukaan.

Alla on esimerkki Slider-komponentista, jonka alue on määritelty mukautetusti:

Näytä koodi

Viivamerkkien määrittäminen​

Slider-komponentti tarjoaa joustavan viivamerkkien määrittämisen, jonka avulla voit mukauttaa, miten viivamerkit näytetään ja miten slider-nuppi vuorovaikuttaa niiden kanssa. Tämä sisältää pää- ja alaviivamerkkien välin säätämisen, viivamerkkien näyttämisen/piilottamisen ja viivamerkkien mukaantuloan mahdollistamisen tarkkoja käyttäjäsyötteitä varten.

Pää- ja alaviivamerkkien väli​

Voit määrittää pää- ja alaviivamerkkien välin, mikä määrittää, kuinka usein ne näkyvät Slider-radalla:

  • Pääviivamerkit ovat suurempia ja usein merkittyjä edustamaan avainarvoja.
  • Alaviivamerkit ovat pienempiä ja näkyvät pääviivamerkkien välissä tarjoten hienompia välejä.

Määritä viivamerkkiväli käyttäen seuraavia setMajorTickSpacing() ja setMinorTickSpacing() metodeja:

slider.setMajorTickSpacing(10); // Pääviivamerkit joka 10 yksikkö
slider.setMinorTickSpacing(2);  // Alaviivamerkit joka 2 yksikkö

Näytä tai piilota viivamerkit​

Voit kytkeä viivamerkkien näkyvyyden päälle tai pois päältä käyttäen setTicksVisible()-metodia. Oletusarvoisesti viivamerkit ovat piilotettu.

slider.setTicksVisible(true); // Näytä viivamerkit
slider.setTicksVisible(false); // Piilota viivamerkit

Tarttuminen​

Jotta Slider-nuppi olisi linjassa lähimmän viivamerkin kanssa käyttäjän vuorovaikutuksessa, ota käyttöön tarttuminen käyttäen setSnapToTicks()-metodia:

slider.setSnapToTicks(true); // Ota käyttöön tarttuminen

Tässä on esimerkki täysin konfiguroidusta Slider-komponentista, joka näyttää pää- ja alaviivamerkkien asetukset sekä tarttumiskyvyn tarkkoja säätöjä varten:

Näytä koodi

Suunta ja kääntö​

Slider-komponentti tukee kahta suuntaa: vaakasuora (oletus) ja pystysuora. Voit muuttaa suuntaa mukauttaaksesi sen käyttöliittymän asettelua ja sovelluksen vaatimuksia.

Lisäksi Slider-komponentti voidaan myös kääntää. Oletusarvoisesti:

  • Vaakasuora Slider kulkee minimistä (vasen) maksimiin (oikea).
  • Pystysuora Slider kulkee minimistä (alas) maksimiin (ylös).

Kun komponenteille on asetettu käännös, tämä suunta käännetään. Ota käyttöön kääntö käyttäen setInverted(true)-metodia.

Näytä koodi

Etiketit​

Slider-komponentti tukee etikettejä viivamerkeillä, jotta käyttäjät voivat tulkita arvot helpommin. Voit käyttää oletusarvoisia numeerisia etikettejä tai tarjota mukautettuja, ja voit kytkeä niiden näkyvyyden päälle tai pois tarpeen mukaan.

Oletusarvoiset etiketit​

Oletusarvoisesti slider voi näyttää numeerisia etikettejä pääviivamerkeillä. Nämä arvot määräytyvät setMajorTickSpacing()-asetuksen mukaan. Ottaaksesi käyttöön oletusarvoiset etiketit, käytä:

slider.setLabelsVisible(true);

Mukautetut etiketit​

Voit korvata oletusarvoiset numeeriset etiketit mukautetuilla teksteillä käyttäen setLabels()-metodia. Tämä on hyödyllistä, kun haluat näyttää merkityksellisempiä arvoja (esim. lämpötila, valuutta tai kategorioita).

Map<Integer, String> customLabels = Map.of(
  0, "Kylmä",
  30, "Viileä",
  50, "Kohtuullinen",
  80, "Lämmin",
  100, "Kuuma"
);

slider.setLabels(customLabels);
slider.setLabelsVisible(true);

Etiketin näkyvyyden kytkeminen​

Olitpa sitten käyttämässä oletusarvoisia tai mukautettuja etikettejä, voit hallita niiden näkyvyyttä setLabelsVisible(true)-metodilla tai piilottaa ne käyttäen setLabelsVisible(false).

Näytä koodi

Työkaluvinkit​

Työkaluvinkit parantavat käytettävyyttä näyttämällä Slider-arvon suoraan nuppien yläpuolella tai alapuolella, auttaen käyttäjiä tekemään tarkkoja säätöjä. Voit konfiguroida työkaluvinkkien käyttäytymistä, näkyvyyttä ja muotoa tarpeidesi mukaan.

Ottaaksesi työkaluvinkit käyttöön, käytä setTooltipVisible()-metodia. Oletusarvoisesti työkaluvinkit ovat pois päältä:

slider.setTooltipVisible(true); // Ota käyttöön työkaluvinkit
slider.setTooltipVisible(false); // Poista työkaluvinkit käytöstä

Työkaluvinkkejä voidaan myös konfiguroida näkyviksi vain silloin, kun käyttäjä vuorovaikuttaa Slider-komponentin kanssa. Käytä setTooltipVisibleOnSlideOnly()-metodia ottaaksesi tämän käyttäytymisen käyttöön. Tämä on erityisen hyödyllistä visuaalisen hälyn vähentämiseksi samalla, kun tarjotaan hyödyllistä palautetta vuorovaikutuksen aikana.

Tässä on esimerkki täysin konfiguroidusta Slider-komponentista työkaluvinkkien kanssa:

Työkaluvinkkien mukauttaminen​

Oletusarvoisesti Slider näyttää työkaluvinkin sen nykyisellä arvolla. Jos haluat mukauttaa tätä tekstiä, käytä setTooltipText()-metodia. Tämä on hyödyllistä, kun haluat, että työkaluvinkit näyttävät staattista tai kuvailevaa tekstiä elävän arvon sijaan.

Voit myös käyttää JavaScript-lauseketta työkaluvinkkien muotoilemiseksi dynaamisesti. Jos lausekkeesi sisältää avainsanan return, se käytetään sellaisenaan. Muuten se kääritään automaattisesti return- ja ;-merkkien väliin muodostaen kelvollisen funktion. Esimerkiksi:

// Näyttää arvon, jota seuraa dollarimerkki
slider.setTooltipText("return x + '$'");

Tai yksinkertaisesti:

// Interpretoituu: return x + ' yksikköä'; 
slider.setTooltipText("x + ' yksikköä'");

Muotoilu​

Teemat​

Slider-komponentti tulee kuuden teeman kanssa valmiina nopeaa muotoilua varten ilman CSS:n käyttöä. Teeman tukeminen tapahtuu käyttöönottamalla valmiiksi rakennettu enum-luokka. Alla on esitelty sliders, joihin on sovellettu kutakin tuettua teemaa:

Näytä koodi

Loading...