Siirry pääsisältöön

Slider

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

Slider-komponentti tarjoaa käyttäjille mahdollisuuden valita numeerinen arvo vetämällä nuppia radalla minimi- ja maksimirajan välillä. Askelväli, viivamarkkerit ja tarrat voidaan määrittää valinnan ohjaamiseksi.

Perusteet​

Slider on suunniteltu toimimaan suoraan laatikosta ilman lisäasetuksia. Oletuksena se kattaa alueen 0-100, ja lähtöarvo on 50, mikä tekee siitä ihanteellisen kiireelliseen integroimiseen mihin tahansa sovellukseen. Tarkempia käyttötapauksia varten Slider-komponenttia voidaan mukauttaa ominaisuuksilla, kuten suunta, viivamarkkerit, tarrat ja työkaluvinkit.

Tässä on esimerkki Slider-komponentista, joka mahdollistaa käyttäjien säätää äänenvoimakkuuden tasoja ennalta määritellyssä alueessa:

Näytä koodi

Slider-arvo​

Slider-arvo edustaa nuppien nykyistä sijaintia liukusäätimessä ja se määritellään kokonaislukuna Slider-aluetta sisällä. Tämä arvo päivittyy dynaamisesti käyttäjän vuorovaikutuksen aikana liukusäätimen kanssa, mikä tekee siitä tärkeän ominaisuuden käyttäjän syötteen seuraamiseksi.

Oletusarvo

Oletuksena Slider alkaa arvolla 50, olettaen oletusalueen 0-100.

Arvon asettaminen ja saaminen​

Voit asettaa Slider-arvon alustamisen aikana tai päivittää sen myöhemmin setValue()-menetelmällä. Nykyisen arvon hakemiseen käytetään getValue()-menetelmää.

Slider slider = new Slider();  
slider.setValue(25); // Asettaa liukusäätimen arvoksi 25

Integer value = slider.getValue();  
System.out.println("Nykyinen liukusäätimen arvo: " + value);

Minimialueet ja maksimaalalueet​

Minimi- ja maksimiarvot määrittävät Slider-säädin hyväksyttävän alueen, joka määrittää rajat, joissa liukusäätimen nuppi voi liikkua. Oletuksena alue asetetaan väliin 0-100, mutta voit mukauttaa nämä arvot tarpeidesi mukaan.

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

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

Nämä väli on jaettu tasaisesti liukusäätimen radan varrella, ja niiden välinen etäisyys riippuu Slider-komponentin mitoista.

Alla on esimerkki Slider-komponentin luomisesta mukautetulla alueella:

Näytä koodi

Viivamarkkerin asetukset​

Slider-komponentti tarjoaa joustavat viivamarkkerin asetukset, jolloin voit mukauttaa sitä, kuinka viivamarkkerit esitetään ja miten liukusäätimen nuppi vuorovaikuttaa niiden kanssa. Tämä sisältää suurten ja pienten viivamarkkerien välin säätämisen, viivamarkkereiden näyttämisen/piilottamisen sekä napsautuksen aktivoimisen viivamarkkereille tarkkaa käyttäjän syötettä varten.

Suurten ja pienten viivamarkkerien väli​

Voit määrittää suurten ja pienten viivamarkkerien välit, mikä määrittää kuinka usein ne ilmestyvät Slider-radalle:

  • Suuret viivamarkkerit ovat suurempia ja usein merkittyjen arvojen edustamiseksi.
  • Pienet viivamarkkerit ovat pienempiä ja ilmestyvät suurten viivamarkkerien väliin tarjoten hienompia väliä.

Aseta viivamarkkerivälit käyttämällä seuraavia setMajorTickSpacing() ja setMinorTickSpacing() -menetelmiä:

slider.setMajorTickSpacing(10); // Suuret viivamarkkerit 10 yksikön välein
slider.setMinorTickSpacing(2);  // Pienet viivamarkkerit 2 yksikön välein

Viivamarkkereiden näyttäminen tai piilottaminen​

Voit kytkeä viivamarkkereiden näkyvyyden päälle tai pois päältä käyttämällä setTicksVisible() -menetelmää. Oletuksena viivamarkkerit ovat piilotettuja.

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

Napsahdus​

Varmistaaksesi, että Slider-nuppi kohdistuu lähimpään viivamarkkeriin käyttäjän vuorovaikutuksen aikana, ota napsautus käyttöön käyttämällä setSnapToTicks() -menetelmää:

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

Tässä on esimerkki täysin konfiguroidusta Slider-komponentista, joka näyttää suurten ja pienten viivamarkkerien asetukset sekä napsautusmahdollisuuden tarkkoja säätöjä varten:

Näytä koodi

Suunta ja kääntö​

Slider-komponentti tukee kahta suuntaa: vaaka (oletus) ja pystysuora. Voit muuttaa suuntaa sovelluksesi käyttöliittymän ja vaatimusten mukaisesti.

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

  • Vaakasuora Slider kulkee minimiarvosta (vasen) maksimiarvoon (oikea).
  • Pystysuora Slider kulkee minimiarvosta (alas) maksimiarvoon (ylös).

Kun se käännetään, tämä suunta muuttuu. Käytä menetelmää setInverted(true) ottaaksesi käännön käyttöön.

Näytä koodi

Tarrat​

Slider-komponentti tukee tarroja viivamarkkereilla auttaakseen käyttäjiä tulkitsemaan arvoja helpommin. Voit käyttää oletusarvoisia numeerisia tarroja tai antaa mukautettuja, ja voit kytkeä niiden näkyvyyden päälle tai pois päältä tarpeen mukaan.

Oletustarrat​

Oletuksena liukusäätimessä voi näkyä numeerisia tarroja suurilla viivamarkkereilla. Nämä arvot määräytyvät asetuksen setMajorTickSpacing() mukaan. Ota oletustarrat käyttöön:

slider.setLabelsVisible(true);

Mukautetut tarrat​

Voit korvata oletusarvoiset numeeriset tarrat mukautetulla tekstillä käyttämällä setLabels() -menetelmää. Tämä on hyödyllistä, kun haluat näyttää merkityksellisimpiä arvoja (esim. lämpötila, valuutta tai kategoriat).

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

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

Tarran näkyvyyden kytkeminen​

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

Näytä koodi

Työkaluvinkit​

Työkaluvinkit parantavat käytettävyyttä näyttämällä Slider-arvon suoraan nuppien ylä- tai alapuolella, mikä auttaa käyttäjiä tekemään tarkempia säätöjä. Voit määrittää työkaluvinkkien käyttäytymistä, näkyvyyttä ja formaattia tarpeidesi mukaan.

Ota työkaluvinkit käyttöön käyttämällä setTooltipVisible() -menetelmää. Oletuksena työkaluvinkit ovat pois käytöstä:

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

Työkaluvinkit voidaan myös määrittää näkyväksi vain, kun käyttäjä vuorovaikuttaa Slider-komponentin kanssa. Käytä setTooltipVisibleOnSlideOnly() -menetelmää tämän käyttäytymisen mahdollistamiseksi. Tämä on erityisen hyödyllistä visuaalisen hälyn vähentämiseksi samalla kun tarjotaan hyödyllistä palautetta vuorovaikutuksessa.

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

Työkaluvinkkien mukauttaminen​

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

Voit myös käyttää JavaScript-lauseketta työkaluvinkkien dynaamiseen muotoiluun. Jos lausekkeesi sisältää return-avaimen, sitä käytetään sellaisenaan. Jos ei, se kääritään automaattisesti return-sanan ja ;-merkinnän ympärille muodostaaksesi kelvollisen funktion. Esimerkiksi:

// Näyttää arvon, jonka jälkeen tulee dollari
slider.setTooltipText("return x + '$'");

Tai yksinkertaisesti:

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

Tyylittely​

Teemat​

Slider tarjoaa 6 sisäänrakennettua teemaa nopeaa tyylittelyä varten ilman CSS:ää. Teemaa tuetaan sisäänrakennetun enum-luokan avulla. Alla on liukusäätimiä jokaisella tuetulla teemalla:

Näytä koodi

Loading...