Button

Avaa ChatGPT:ssä

Varjo dwc-button 23.02

Java API

Button on napsautettava elementti, joka laukaisee toiminnon, kun sitä painetaan. Se voi näyttää tekstiä, kuvakkeita tai molempia yhdistelminä. Nappulat tukevat useita visuaalisia teemoja ja kokoja, ja ne voidaan estää, jotta estetään vuorovaikutus pitkien operaatioiden aikana tai kun tietyt ehdot eivät täyty.

Käytännöt

Button-luokka on monipuolinen komponentti, jota käytetään yleisesti eri tilanteissa, joissa käyttäjävuorovaikutuksia ja toimintoja on tarpeen laukaista. Tässä on joitakin tyypillisiä tilanteita, joissa saatat tarvita nappia sovelluksessasi:

1. Lomakkeen lähettäminen: Nappeja käytetään usein lomaketietojen lähettämiseen. Esimerkiksi sovelluksessa voit käyttää:

• "Lähetä"-painiketta tietojen lähettämiseen palvelimelle
• "Tyhjennä"-painiketta poistamaan lomakkeella jo olevat tiedot

2. Käyttäjän toiminnot: Nappeja käytetään antamaan käyttäjille mahdollisuus suorittaa tiettyjä toimintoja sovelluksessa. Esimerkiksi voit olla napin merkinnällä:

• "Poista", joka aloittaa valitun kohteen poistamisen
• "Tallenna" muuttaakseen asiakirjan tai sivun muutoksia.

3. Vahvistusdialogit: Nappeja sisältyy usein Dialog -komponentteihin, jotka on rakennettu eri tarkoituksia varten, jotta käyttäjille tarjotaan vaihtoehtoja vahvistaa tai peruuttaa toiminto, tai mitä tahansa muuta toimintoa, joka on rakennettu käyttämällesi Dialog.

4. Vuorovaikutuksen laukaisijat: Nappeja voidaan käyttää vuorovaikutusten tai tapahtumien laukaisemiseen sovelluksessa. Napsauttamalla nappia käyttäjät voivat aloittaa monimutkaisia toimintoja tai laukaista animaatioita, päivittää sisältöä tai päivittää näyttöä.

5. Navigaatio: Nappeja voidaan käyttää navigointitarkoituksiin, kuten siirtymiseen eri osien tai sivujen välillä sovelluksessa. Navigointinappeja voisivat olla:

• "Seuraava" - vie käyttäjän seuraavalle sivulle tai osioon nykyisessä sovelluksessa tai sivulla.
• "Edellinen" - palauttaa käyttäjän edelliselle sivulle sovelluksessa tai osioon, jossa he ovat.
• "Takaisin" - palauttaa käyttäjän sovelluksen tai sivun ensimmäiseen osaan, jossa he ovat.

Seuraavassa esimerkissä demonstroidaan nappien käyttö lomakkeen lähettämisessä ja syötteen tyhjentämisessä:

Näytä koodi

Java

Kuvakkeiden lisääminen nappeihin 24.11

Kuvakkeen sisällyttäminen napin yhteyteen voi parantaa sovelluksesi suunnittelua huomattavasti, mikä mahdollistaa käyttäjien nopean tunnistamisen toimivista kohteista näytöllä. Icon komponentti tarjoaa laajan valikoiman valittavia kuvakkeita.

Hyödyntämällä setPrefixComponent() ja setSuffixComponent() -menetelmiä, sinulla on joustavuutta päättää, näytetäänkö Icon ennen tai jälkeen tekstin napissa. Vaihtoehtoisesti setIcon() -menetelmää voidaan käyttää Icon-kuvakkeen lisäämiseksi tekstin jälkeen, mutta ennen napin suffix-slotia.

vinkki

Oletusarvoisesti Icon perii napin teeman ja koon.

Alla on esimerkkejä napeista, joissa teksti on vasemmalla ja oikealla, sekä nappi, jossa on vain kuvake:

Näytä koodi

Java

Nimet

Button-komponentti hyödyntää nimeämistä, jota käytetään saavutettavuudessa. Kun nimeä ei ole asetettu erikseen, käytetään nappulan etikettiä. Kuitenkin jotkin kuvakkeet eivät omaa etikettejä, ja näyttävät vain ei-tekstimäisiä osia, kuten kuvakkeita. Tässä tapauksessa on tarpeellista käyttää setName() -menetelmää varmistaaksesi, että luotu Button-komponentti täyttää saavutettavuusstandardit.

Napin estäminen

Nappikomponentit, kuten monet muut, voidaan estää ilmoittamaan käyttäjälle, että tietty toiminto ei ole vielä tai ei enää käytettävissä. Estetty nappi vähentää napin opasiteettia, ja se on saatavilla kaikille napin teemoille ja kokoille.

Näytä koodi

Java

Napin estäminen voidaan tehdä milloin tahansa koodissa käyttämällä setEnabled(boolean enabled) -funktiota. Lisämukavuutta varten nappi voidaan myös estää napsauttamalla käyttäen sisäänrakennettua setDisabledOnClick(boolean enabled) -funktiota.

Joissakin tapauksissa napin napsauttaminen laukaisee pitkään kestäviä toimintoja. Napin estäminen, kun sovelluksesi käsittelee toimintoa, estää käyttäjää napsauttamasta nappia useita kertoja, erityisesti korkealaatuisten ympäristöjen aikana.

vinkki

Napsautustapahtuman estäminen ei ainoastaan optimoi toimintojen käsittelyä, vaan myös estää kehittäjää toteuttamasta tätä käyttäytymistä itse, sillä tämä menetelmä on optimoitu vähentämään takaisinmatkaviestintää.

Tyylit

Teemat

Button-komponentit tulevat 14 erilaista teemaa valmiina nopeaa tyylittelyä varten ilman CSS:n käyttöä. Nämä teemat ovat ennalta määriteltyjä tyylit, jotka voidaan soveltaa nappeihin niiden ulkonäön ja visuaalisen esityksen muuttamiseksi. Ne tarjoavat nopeat ja johdonmukaiset tavat mukauttaa nappien ulkoasua koko sovelluksessa.

Vaikka jokaiselle eri teeman käyttötarkoitukselle on monia mahdollisuuksia, joitakin esimerkkejä käytöstä ovat:

• Vaarallinen: Paras toimille, joilla on vakavia seurauksia, kuten täytetyn tiedon tyhjentäminen tai tilin/tietojen pysyvä poistaminen.
• Oletus: Sopii sovelluksessa käytettäville toiminnoille, jotka eivät vaadi erityistä huomiota ja ovat geneerisiä, kuten asetuksen vaihtaminen.
• Pääasiallinen: Sopii pää "toimintaan" sivulla, kuten rekisteröityminen, muutosten tallentaminen tai siirtyminen toiselle sivulle.
• Onnistuminen: Erinomainen visualisoimaan onnistunutta loppuosa-asiaa sovelluksessa, kuten lomakkeen tai rekisteröitymisprosessin lopettamista. Onnistuminen-teeman voi ohjelmallisesti soveltaa, kun onnistunut toiminta on suoritettu.
• Varoitus: Kätevä indikoimaan, että käyttäjä on aikeissa suorittaa potentiaalisesti riskialttiina toimintoja, kuten siirtyä sivulta, jossa on tallentamattomia muutoksia. Nämä toiminnot ovat yleensä vähemmän vaikuttavia kuin vaaralliset teemat.
• Harmaa: Hyvä hienovaraisille toimille, kuten pienille asetuksille tai toiminnoille, jotka ovat enemmän täydentäviä eivätkä tha-osa päätoiminnallisuudesta.
• Tieto: Hyvä lisäävän selventävän tiedon tarjoamiseen käyttäjälle.

Alla olevat esimerkit esittelevät nappeja, joihin on sovellettu jokainen tuettu teema:

Näytä koodi

Java

CSS

Koot

Seuraavat Koot arvot mahdollistavat nopean tyylittelyn ilman CSS:n käyttöä. Tämä mahdollistaa napin ulottuvuuden manipuloinnin ilman, että sitä tarvitsee säättää eksplisiittisesti minkään tyyli-menetelmän kautta. Yhdessä yksinkertaistuksen tyylittelyn kanssa se auttaa myös luomaan ja ylläpitämään yhtenäisyyttä sovelluksessasi. Oletusarvoinen Button-koko on Expanse.MEDIUM.

Eri kokoja on usein sopivampi käyttää eri tarkoituksiin:

• Suuremmat koon arvot sopivat nappeille, jotka ovat huomion kiinnittämiseksi, korostavat toiminnallisuutta tai ovat keskeisiä sovelluksen tai sivun toiminnalle.
• Keskikokoiset napit, oletuskoko, olisivat nappien standardikoko. Näiden napin toimintojen tulisi olla yhtä tärkeitä kuin samankaltaisten komponenttien.
• Pienemmät koon arvot tulisi käyttää nappeille, joilla ei ole keskeisiä toimintoja sovelluksessa, ja jotka palvelevat enemmän täydentäviä tai utilitaarisia rooleja, eikä tärkeitä osia käyttäjän vuorovaikutuksessa. Tämä sisältää Button-komponentit, joita käytetään vain kuvakkeilla utilitaarisista syistä.

Alla ovat erilaiset koot, jotka ovat tuettu Button-komponentille:

Näytä koodi

Java

Loading...

Parhaat käytännöt

Varmistaaksesi optimaalisen käyttäjäkokemuksen käytettäessä Button-komponenttia, harkitse seuraavia parhaita käytäntöjä:

1. Oikea teksti: Käytä selkeää ja ytimekästä tekstiä Button-komponentissasi, jotta sen tarkoituksen ymmärtäminen on selkeää.

2. Sopiva visuaalinen tyylitys: Huomioi napin visuaalinen tyyli ja teema varmistaaksesi johdonmukaisuuden sovelluksesi suunnittelun kanssa. Esimerkiksi:

• "Peruuta" Button-komponentti tulisi tyylittää asianmukaisella teemalla tai CSS-tyylillä, jotta käyttäjät ovat varmoja siitä, että he haluavat peruuttaa toiminnon.
• "Vahvista" Button-komponentti olisi erilainen tyyliltään kuin "Peruuta" nappi, mutta erottuisi myös varmistaakseen, että käyttäjät tietävät, että tämä on erityinen toiminto.

3. Tehokas tapahtumakäsittely: Käsittele Button-tapahtumat tehokkaasti ja anna käyttäjille asianmukaista palautetta. Viittaa Tapahtumat tarkastellaksesi tehokkuuden lisäämistä tapahtumakäyttäytymiseen.

4. Testaus ja saavutettavuus: Testaa napin käyttäytymistä eri tilanteissa, kuten silloin, kun se on estetty tai saa fokuksen, varmistaaksesi sujuvan käyttäjäkokemuksen. Noudata saavutettavuusohjeita varmistaaksesi, että Button on käytettävissä kaikille käyttäjille, mukaan lukien ne, jotka luottavat apuvälineisiin.