Siirry pääsisältöön

Slider

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

Slider-komponentti tarjoaa käyttäjille tavan valita numeerinen arvo vetämällä nuppia radalla minimi- ja maksimiarvojen välillä. Askelväliä, tikkumerkkejä ja etikettejä voidaan konfiguroida ohjaamaan valintaa.

Uusi Slider kattaa alueen 0-100, ja sen lähtöarvo on 50, joten se toimii ilman mitään asetuksia. Ominaisuudet, kuten suunta, tikkumerkit, etiketit ja työkaluvihjeet käsittelevät tarkempia tapauksia, kuten alla olevaa äänenvoimakkuuden säätöä.

Näytä koodi

Slider-arvo​

Slider-arvo edustaa nuppia nykyistä sijaintia sliderissa ja se määritellään kokonaislukuna Slider-arvojen alueella. Tämä arvo päivittyy dynaamisesti käyttäjän vuorovaikutuksen aikana, mikä tekee siitä olennaisen ominaisuuden käyttäjän syötteen seuraamiseen.

Oletusarvo

Oletuksena Slider alkaa arvosta 50, olettaen oletusarvoisen alueen 0-100.

Arvon asettaminen ja saaminen​

Voit asettaa Slider-arvon alustusvaiheessa tai päivittää sen myöhemmin käyttämällä setValue()-metodia. Jotta saisit nykyisen arvon, käytä getValue()-metodia.

Slider slider = new Slider();
slider.setValue(25); // Asettaa sliderin arvoon 25

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

Minimiyksiköt ja maksimiarvot​

Minimi- ja maksimiarvot määrittelevät sallitun alueen Slider-yhteydessä, jolloin määritellään rajat, joiden sisällä Slider-nuppi voi liikkua. Oletuksena alue on asetettu 0-100, mutta voit mukauttaa nämä arvot tarpeidesi mukaan.

Slider-askelväli on oletuksena 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 tasaisesti jaettu slittiradalla, ja niiden väli riippuu Slider-mitoista.

Alla on esimerkki Slider-komponentista, jossa on mukautettu alue:

Näytä koodi

Tikkukonfiguraatio​

Slider-komponentti tarjoaa joustavan tikkukonfiguraation, joka mahdollistaa tikkumerkkien näyttämisen ja sen, miten slider-nuppi vuorovaikuttaa niihin. Tämä sisältää suurten ja pienten tikkujen väliasettelun säätämisen, tikkujen näyttämisen/piilottamisen ja tikkujen kiinnittämisen mahdollistamisen tarkkaa käyttäjäinputia varten.

Suurten ja pienten tikkujen väli​

Voit määrittää suuret ja pienet tikkumerkit, mikä määrää kuinka usein ne esiintyvät Slider-radalla:

  • Suuret tikut ovat suurempia ja usein merkittyjä edustamaan avainarvoja.
  • Pienet tikut ovat pienempiä ja näkyvät suurten tikkujen väliin tarjoamaan hienompia välejä.

Aseta tikkujen väli käyttäen seuraavia setMajorTickSpacing() ja setMinorTickSpacing() -metodeja:

slider.setMajorTickSpacing(10); // Suuret tikut joka 10. yksikössä
slider.setMinorTickSpacing(2);  // Pienet tikut joka 2. yksikössä

Tikkujen näyttäminen tai piilottaminen​

Voit kytkeä tikkujen näkyvyyden päälle tai pois käyttämällä setTicksVisible()-metodia. Oletuksena tikut ovat piilossa.

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

Kiinnittäminen​

Varmistaaksesi, että Slider-nuppi kohdistuu lähimpään tikkumerkkiin käyttäjän vuorovaikutuksen aikana, mahdollista kiinnitys käyttämällä setSnapToTicks()-metodia:

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

Tässä on esimerkki täysin konfiguroidusta Slider-komponentista, joka näyttää suurten ja pienten tikkuasetusten lisäksi kiinnitysominaisuuden tarkkoja säätöjä varten:

Näytä koodi

Suunta ja kääntäminen​

Slider-komponentti tukee kahta suuntaa: vaakasuuntaista (oletus) ja pystysuuntaista. Voit vaihtaa suuntaa vastaamaan käyttöliittymäsi asettelu- ja sovellusvaatimuksia.

Suuntaamisen lisäksi Slider voidaan myös kääntää. Oletuksena:

  • Vaakasuuntainen Slider kulkee minimistä (vasen) maksimiksi (oikea).
  • Pystysuuntainen Slider kulkee minimistä (alempi) maksimiksi (ylempi).

Käännettäessä tämä suunta muuttuu. Ota kääntäminen käyttöön käyttämällä setInverted(true)-metodia.

Näytä koodi

Etiketit​

Slider-komponentti tukee etikettejä tikkujen kohdalla, jotta käyttäjät voivat tulkita arvoja helpommin. Voit käyttää oletusnumerollisia etikettejä tai tarjota mukautettuja, ja voit kytkeä niiden näkyvyyden tarpeen mukaan.

Oletusetiketit​

Oletuksena slider voi näyttää numeerisia etikettejä suurilla tikkumerkeillä. Nämä arvot määrätään setMajorTickSpacing()-asetuksen mukaan. Ota oletusetiketit käyttöön seuraavasti:

slider.setLabelsVisible(true);

Mukautetut etiketit​

Voit korvata oletusnumerolliset etiketti mukautetuilla teksteillä käyttämällä setLabels()-metodia. Tämä on hyödyllistä, kun haluat näyttää merkityksellisempiä arvoja (esim. lämpötila, valuutta tai kategoriat).

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

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

Etiketin näkyvyyden kytkeminen​

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

Näytä koodi

Työkaluvihjeet​

Työkaluvihjeet parantavat käytettävyyttä näyttämällä Slider-arvon suoraan nuppia ylle tai alle, auttaen käyttäjiä tekemään tarkempia säätöjä. Voit määrittää työkaluvihjeen käyttäytymistä, näkyvyyttä ja muotoa tarpeidesi mukaan.

Ota työkaluvihjeet käyttöön käyttämällä setTooltipVisible()-metodia. Oletuksena työkaluvihjeet ovat pois päältä:

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

Työkaluvihjeitä voidaan myös määrittää näkymään vain, 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ä visuaalisten häiriöiden vähentämiseen samalla, kun se tarjoaa hyödyllistä palautetta vuorovaikutuksen aikana.

Tässä on esimerkki täysin konfiguroidusta Slider-komponentista, jossa on työkaluvihjeet:

Työkaluvihjeen mukauttaminen​

Oletuksena Slider näyttää työkaluvihjeen nykyisellä arvolla. Jos haluat mukauttaa tätä tekstiä, käytä setTooltipText()-metodia. Tämä on hyödyllistä, kun haluat, että työkaluvihje näyttää staattista tai kuvailevaa tekstiä sen sijaan, että se näyttäisi reaaliaikaisen arvon.

Voit myös käyttää JavaScript-lauseketta työkaluvihjeen muotoiluun dynaamisesti. Jos lauseke sisältää return-avaimen, sitä käytetään sellaisenaan. Jos ei, se kehystetään automaattisesti return- ja ;-merkeillä muodostaakseen kelvollisen funktion. Esimerkiksi:

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

Tai yksinkertaisesti:

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

Tyylitys​

Teemat​

Slider tarjoaa kuusi valmista teemaa nopeaa tyylittelyä varten ilman CSS:n käyttöä. Teemaa tuetaan sisäänrakennetun enum-luokan avulla. Alla on esimerkkejä slidereista, joissa jokin tuetuista teemoista on käytössä:

Näytä koodi

Loading...