Siirry pääsisältöön

Dialog

Avaa ChatGPT:ssä
Varjo dwc-dialog 23.06
Java API

Dialog-komponentti näyttää ponnahdusikkunan, joka peittää nykyisen näkymän ja kiinnittää huomiota keskittyvään sisältöön, kuten lomakkeisiin, vahvistuksiin tai tiedollisiin viesteihin.

Dialog rakenne​

Dialog on jaettu kolmeen osioon: otsikkoon, sisältöalueeseen ja alatunnisteeseen. Komponentteja voidaan lisätä kuhunkin osioon käyttämällä addToHeader(), addToContent() ja addToFooter().

Näytä koodi

Käyttötapaukset​

  1. Käyttäjäpalautteet ja vahvistus: Dialog-komponentteja käytetään usein palautteen antamiseen tai käyttäjän vahvistuksen kysymiseen. Ne voivat näyttää erilaisia tärkeitä viestejä käyttäjälle, kuten:
  • Onnistumisviestit
  • Virhevaroitukset
  • Vahvistuslähetykset

  1. Lomakeinput ja muokkaaminen: Voit käyttää dialogeja kerätäksesi käyttäjäinputtia tai salliaksesi heidän muokata tietoja hallitusti ja keskittyneesti. Esimerkiksi, dialogi voi nousta muokkaamaan käyttäjäprofiilitietoja tai täydentämään monivaiheista lomaketta.

  2. Kontekstuaalinen informaatio: Lisäkontekstuaalisen tiedon tai työkalujen näyttäminen dialogissa voi auttaa käyttäjiä ymmärtämään monimutkaisempia ominaisuuksia tai tietoja. Dialogit voivat tarjota syvällisiä selityksiä, kaavioita tai apuasiakirjoja.

  3. Kuvan ja median esikatselut: Kun käyttäjät tarvitsevat nähdä mediaa, Dialog voidaan käyttää isompien esikatselujen tai gallerioiden näyttämiseen, kuten vuorovaikutuksessa:

  • Kuvien
  • Videoiden
  • Muiden medioiden

Tausta ja blurry​

Aktivoimalla webforJ Dialog-komponentin tausta-attribuutti, tausta tulee näkyviin Dialog-ikkunan taakse. Lisäksi, kun se on aktivoitu, dialogin blurry-attribuutti sumentaa dialogin taustan. Nämä asetukset voivat auttaa käyttäjiä tarjoamalla syvyyksiä, visuaalista hierarkiaa ja kontekstia, mikä johtaa selkeämpään ohjaukseen käyttäjälle.

Näytä koodi

Dialog-ikkunan avaaminen ja sulkeminen​

Uuden Dialog-objektin luomisen jälkeen, käytä open()-metodia näyttääksesi dialogin. Tämän jälkeen Dialog-komponentti voidaan sulkea jollakin seuraavista tavoista:

  • Käyttämällä close()-metodia
  • Painamalla ESC näppäintä
  • Napsauttamalla Dialog-ikkunan ulkopuolella

Kehittäjät voivat valita, mitkä vuorovaikutukset sulkevat Dialog-ikkunan käyttämällä setCancelOnEscKey() ja setCancelOnOutsideClick(). Lisäksi setClosable()-metodi voi estää tai sallia sekä ESC-näppäimen painamisen että napsauttamisen dialogin ulkopuolella sulkemaan komponentin.

Näytä koodi

Automaattinen kohdistus​

Kun automaattinen kohdistus on käytössä, se antaa automaattisesti fokuksen ensimmäiselle elementille dialogissa, johon voidaan keskittyä. Tämä on hyödyllistä käyttäjien huomion ohjaamisessa ja sitä voidaan mukauttaa setAutoFocus()-metodin avulla.

Näytä koodi

Siirrettävä​

Dialog:lla on sisäänrakennettu toiminnallisuus olla siirrettävä, jolloin käyttäjä voi siirtää Dialog-ikkunan napsauttamalla ja vetämällä. Dialog-ikkunan sijaintia voidaan muuttaa mistä tahansa sen kentästä: otsikosta, sisällöstä tai alatunnisteesta.

Reunalle napsautus​

On myös mahdollista kalibroida tämä käytös niin, että se napsauttaa näytön reunalle, mikä tarkoittaa, että Dialog-ikkuna linjautuu automaattisesti näytön reunaan, kun se vapautetaan sen raahauksen ja pudotuksen jälkeen. Napsautus voidaan muuttaa setSnapToEdge()-metodin avulla. setSnapThreshold() ottaa määrän pikseleitä, joka määrittää, kuinka kaukana Dialog-ikkunan tulee olla näytön reunoista ennen kuin se automaattisesti napsauttaa reunoihin.

Näytä koodi

Sijoittelu​

Dialogin sijaintia voidaan muokata käyttämällä sisäänrakennettuja setPosx() ja setPosy()-metodeja. Nämä metodit ottavat merkkijonoargumentin, joka voi edustaa mitä tahansa soveltuvaa CSS-pituusmittayksikköä, kuten pikseleitä tai näkymäkorkeutta/leveyttä. Luettelo näistä mittayksiköistä löytyy täältä.

Näytä koodi

Pystysuuntainen kohdistus​

Lisäksi dialogin X- ja Y-sijainnin manuaalisen määrittämisen lisäksi on mahdollista käyttää dialogin sisäänrakennettua enum-luokkaa kohdistamaan Dialog-ikkuna. Kolme mahdollista arvoa ovat TOP, CENTER ja BOTTOM, joista kukin voidaan käyttää setAlignment()-metodin kanssa.

Näytä koodi

Koko näyttö ja katkaisut​

Dialog voidaan asettaa menemään koko näyttö -tilaan. Kun koko näyttö on aktivoituna, Dialog-ikkunaa ei voi siirtää tai sijoittaa. Tätä tilaa voidaan manipuloida Dialog-komponentin katkaisupisteattributilla. Katkaisupiste on mediakysely, joka määrittää, milloin Dialog siirtyy automaattisesti koko näyttö -tilaan. Kun kysely täsmää, Dialog muuttuu koko näyttöön - muuten se sijoitetaan normaalisti.

Autoleveys 26.00​

Oletusarvoisesti Dialog venyy täyttämään saatavilla olevan vaakasuuntaisen tilan. Kun autoleveys on aktivoitu setAutoWidth(true)-metodilla, Dialog asettaa itsensä sen sisällön leveyden mukaan.

Näytä koodi

Tyylitys​

Teemat​

Dialog-komponentit tulevat varustettuna 7 erillisellä teemalla , jotka mahdollistavat nopean tyylityksen ilman CSS:n käyttöä. Nämä teemat ovat ennalta määriteltyjä tyylejä, joita voidaan soveltaa painikkeisiin niiden ulkonäön ja visuaalisen esityksen muuttamiseksi. Ne tarjoavat nopean ja johdonmukaisen tavan mukauttaa painikkeiden ilmettä sovelluksessa.

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

  • Vaarallinen: Toiminnot, joilla on vakavia seurauksia, kuten täytettyjen tietojen tyhjentäminen tai tilin/datan pysyvä poistaminen, on hyvä käyttötilanne vaarallisessa teemassa.
  • Oletus: Oletusteema on sopiva toiminnoille sovelluksessa, jotka eivät vaadi erityistä huomiota ja jotka ovat yleisiä, kuten asetuksen kytkeminen.
  • Pääteema: Tämä teema on sopiva pää "call-to-action" -elementiksi sivulla, kuten ilmoittautumiseksi, muutosten tallentamiseksi tai siirtymiseksi toiselle sivulle.
  • Onnistuminen: Onnistuneet teemat dialogit ovat erinomaisia visualisoidessaan onnistunutta elementin valmistumista sovelluksessa, kuten lomakkeen lähettämistä tai rekisteröitymisprosessin loppuunsaattamista. Onnistumisteema voidaan ohjelmallisesti sovittaa, kun onnistunut toiminto on saatu päätökseen.
  • Varoitus: Varoitusdialogit ovat hyödyllisiä ilmoittamaan käyttäjille, että he ovat tekemässä mahdollisesti riskialtista toimintoa, kuten siirtymistä pois sivulta, jossa on tallentamattomia muutoksia. Nämä toimet ovat usein vähemmän vaikutuksellisia kuin ne, joita käytettäisiin vaarallisessa teemassa.
  • Harmaa: Hyvä hienovaraisille toiminnoille, kuten pienemmille asetuksille tai toiminnoille, jotka ovat enemmän lisäyksiä sivulle eivätkä osa päätoimintoa.
  • Tietoa: Tietoteema on hyvä valinta tarjotakseen selventävää, lisätietoa käyttäjälle, kun se on tarpeen.
Näytä koodi

Loading...