Siirry pääsisältöön

Spinner

Avaa ChatGPT:ssä
Shadow dwc-spinner 24.10
Java API

Spinner-komponentti tarjoaa visuaalisen indikaattorin, joka osoittaa käynnissä olevaa käsittelyä tai latausta taustalla. Sitä käytetään usein näyttämään, että järjestelmä hakee tietoja tai kun prosessi vie aikaa loppuun. Spinner antaa käyttäjille palautetta, signaloiden, että järjestelmä työskentelee aktiivisesti.

Perusasiat​

Spinner-komponentin luomiseksi voit määrittää teeman ja koon. Perussyntaksi sisältää Spinner-instanssin luomisen ja sen ulkoasun sekä käytöksen määrittämisen metodeilla kuten setTheme() ja setExpanse().

Näytä Koodi

Nopeuden hallinta ja pysäyttäminen​

On mahdollista asettaa nopeus millisekunteina Spinner-komponentille ja pysäyttää/jatkaa animaatiota vaivatta.

Sovelluskohteet nopeuden säätämiseksi sisältävät latausprosessien erottamisen. Esimerkiksi nopeammat Spinnerit sopivat pienempiin tehtäviin, kun taas hitaammat Spinnerit ovat parempia suuremmille tehtäville. Pysäyttäminen on hyödyllistä, kun käyttäjän toimintaa tai vahvistusta tarvitaan ennen kuin prosessi jatkuu.

Nopeuden säätäminen​

Voit hallita, kuinka nopeasti Spinner pyörii säätämällä sen nopeutta millisekunteina setSpeed()-metodin avulla. Alhaisempi arvo tekee Spinneristä nopeamman, kun taas korkeammat arvot hidastavat sitä.

spinner.setSpeed(500); // Pyörii nopeammin
Oletusnopeus

Oletusarvoisesti Spinner vie 1000 millisekuntia yhden täydellisen kierroksen suorittamiseen.

Pysäyttäminen ja jatkaminen​

Spinnerin pysäyttäminen on hyödyllistä, kun ohjelma on tilapäisesti pysähtynyt tai odottaa käyttäjän syötettä. Se ilmoittaa käyttäjille, että ohjelma on tauolla, eikä aktiivisesti käynnissä, mikä parantaa selkeyttä monivaiheisissa prosesseissa.

Voit pysäyttää ja jatkaa Spinneriä käyttämällä setPaused()-metodia. Tämä on erityisen hyödyllistä, kun tarvitset tilapäisesti pysäyttää pyörivän animaation.

spinner.setPaused(true);  // Pysäytä spinner
spinner.setPaused(false); // Jatka spinner

Tässä esimerkissä näytetään, kuinka nopeus asetetaan ja kuinka Spinner pysäytetään/jatketaan:

Näytä Koodi

Pyörimissuunta​

Spinnerin suuntaa voidaan hallita pyörimään myötäpäivään tai vastapäivään. Voit määrittää tämän käyttäytymisen setClockwise()-metodin avulla.

spinner.setClockwise(false);  // Pyörii vastapäivään
spinner.setClockwise(true);   // Pyörii myötäpäivään

Tämä vaihtoehto ilmoittaa visuaalisesti erityisestä tilasta tai toimii ainutlaatuisena muotoiluvaihtoehtona. Pyörimissuunnan muuttaminen voi auttaa erottamaan prosessityypit, kuten edistyminen vs. käänteinen, tai antaa erottuvan visuaalisen vihjeen tietyissä yhteyksissä.

Näytä Koodi

Muotoilu​

Teemat​

Spinner-komponentissa on useita sisäänrakennettuja teemoja, jotka mahdollistavat tyylin nopean soveltamisen ilman tarvetta muokata CSS:ää. Nämä teemat muuttavat spinnerin visuaalista ulkoasua, mikä tekee siitä sopivan erilaisiin käyttötarkoituksiin ja konteksteihin. Näiden ennalta määriteltyjen teemojen käyttö varmistaa tyylin johdonmukaisuuden sovelluksessasi.

Vaikka spinnerit palvelevat erilaisia tilanteita, tässä on joitakin esimerkkitapauksia eri teemoille:

  • Pääteema: Ihanteellinen korostamaan lataustilaa, joka on keskeinen osa käyttäjän kulkua, kuten lomakkeen lähettämisen tai tärkeän toiminnon käsittelyn aikana.

  • Onnistuminen: Hyödyllinen edustamaan onnistuneita taustaprosesseja, kuten silloin, kun käyttäjä lähettää lomakkeen ja sovellus suorittaa prosessin viimeisiä vaiheita.

  • Vaara: Käytä tätä riskialttiille tai suureen panokseen liittyville toiminnoille, kuten tärkeiden tietojen poistamiselle tai peruuttamattomien muutosten tekemiselle, jolloin visuaalinen indikaattori kiireellisyydestä tai varovaisuudesta on tarpeen.

  • Varoitus: Käytä tätä varovaisen tai vähemmän kiireellisen prosessin ilmoittamiseen, kuten kun käyttäjä odottaa tietojen validointia, mutta ei tarvitse välitöntä toimintaa.

  • Harmaa: Toimii hyvin hienovaraisille taustaprosesseille, kuten matalan prioriteetin tai passiivisille lataustehtäville, kuten täydentävien tietojen hakemiseen, jotka eivät vaikuta suoraan käyttäjäkokemukseen.

  • Tieto: Sopii lataustilanteisiin, joissa tarjoat lisätietoja tai selvennystä käyttäjälle, kuten näyttämällä spinnerin viestin yhteydessä, joka selittää käynnissä olevaa prosessia.

Voit soveltaa näitä teemoja ohjelmallisesti spinneriin, mikä antaa visuaalisia vihjeitä, jotka vastaavat toiminnan kontekstia ja tärkeyttä.

Voit määrittää tämän käyttäytymisen käyttämällä setTheme()-metodia.

Näytä Koodi

Koot​

Voit säätää spinnerin kokoa, jota kutsutaan kooksi, sopimaan visuaaliseen tilaan, jota tarvitset. Spinner tukee useita kokoja, mukaan lukien Expanse.SMALL, Expanse.MEDIUM ja Expanse.LARGE.

Näytä Koodi

Loading...