Siirry pääsisältöön

Dialog

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

Dialog-komponentti näyttää ponnahdusikkunan, joka peittää nykyisen näkymän, kiinnittäen huomiota keskittyneeseen sisältöön, kuten lomakkeisiin, vahvistuksiin tai tiedotusviesteihin.

Dialog rakenne​

Dialog on järjestetty kolmeen osaan: otsikkoon, sisältöalueeseen ja alatunnisteeseen. Komponentteja voidaan lisätä jokaiselle osalle käyttämällä addToHeader(), addToContent() ja addToFooter().

Näytä koodi

Käyttötarkoitukset​

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

  1. Lomake syöte ja muokkaus: Voit käyttää dialogeja kerätäksesi käyttäjäsyötteitä tai salliaksesi heidän muokata tietoja hallitulla ja keskittyneellä tavalla. Esimerkiksi, dialogi voi ilmestyä muokataksesi käyttäjäprofiilin tietoja tai viimeistelläksesi monivaiheista lomaketta.

  2. Kontekstuaalinen tieto: Lisäkontekstuaalisen tiedon tai työkaluvihjeiden 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 apudokumentaatiota.

  3. Kuvan ja median esikatselut: Kun käyttäjät tarvitsevat medioiden tarkastelua, Dialog voi toimia suurempien esikatselujen tai gallerioiden näyttämiseen, kuten vuorovaikutuksessa:

  • Kuvien
  • Videoiden
  • Muiden medioiden

Taustakuva ja sumeus​

Ottamalla käyttöön webforJ Dialog-komponentin taustakuvan attribuutin, taustakuva näytetään Dialogin taustalla. Lisäksi, kun se on käytössä, Dialogin sumea attribuutti sumentaa Dialogin taustakuvaa. Näiden asetusten muuttaminen voi auttaa käyttäjiä tarjoamalla syvyyttä, visuaalista hierarkiaa ja kontekstia, mikä johtaa selkeämmän ohjeistuksen antamiseen käyttäjälle.

Näytä koodi

Dialogin avaaminen ja sulkeminen​

Uuden Dialog-objektin luomisen jälkeen käytä open()-metodia näyttämään dialogi. Sitten Dialog-komponentti voidaan sulkea jollakin seuraavista toiminnoista:

  • Käyttämällä close()-metodia
  • Paina ESC -näppäintä
  • Klikkaamalla dialogin ulkopuolella

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

Näytä koodi

Automaattinen tarkennus​

Kun se on käytössä, automaattinen tarkennus antaa automaattisesti tarkennuksen ensimmäiselle elementille dialogissa, joka voi saada tarkennuksen. Tämä on hyödyllistä käyttäjien huomion ohjaamisessa ja se on mukautettavissa setAutoFocus()-metodin avulla.

Näytä koodi

Vedettävä​

Dialog-komponentilla on sisäänrakennettu toiminnallisuus olla vedettävä, mikä sallii käyttäjän siirtää Dialog-ikkunaa klikkaamalla ja vetämällä. Dialogin sijaintia voidaan muokata mistä tahansa kentästä sen sisällä: otsikosta, sisällöstä tai alatunnisteesta.

Reunaan napsauttaminen​

On myös mahdollista kalibroida tämä käyttäytyminen napsauttamaan näytön reunaan, mikä tarkoittaa, että Dialog asettuu automaattisesti näyttölaitteen reunalle, kun se vapautetaan vedolta. Napsautus voidaan muuttaa setSnapToEdge()-metodin avulla. setSnapThreshold() ottaa määrän pikseleitä, mikä määrittää, kuinka kaukana Dialogin tulisi olla näytön reunoista ennen kuin se automaattisesti napsauttaa reunoihin.

Näytä koodi

Sijoittaminen​

Dialogin sijaintia voidaan muokata sisäänrakennetuilla setPosx() ja setPosy() -metodeilla. Nämä metodit ottavat merkkijonon argumenttina, joka voi edustaa mitä tahansa soveltuvaa CSS-mittayksikköä, kuten pikseleitä tai näkymän korkeutta/leveyttä. Lista näistä mittauksista löytyy tästä linkistä.

Näytä koodi

Pystysuora kohdistus​

Manuaalisen määrityksen lisäksi dialogin X- ja Y-sijainnille, on mahdollista käyttää dialogin sisäänrakennettua enum-luokkaa kohdistamaan Dialog. On kolme mahdollista arvoa, TOP, CENTER ja BOTTOM, joista kutakin voidaan käyttää setAlignment()-metodin kanssa.

Näytä koodi

Koko näyttö ja murtopisteet​

Dialog voidaan asettaa siirtymään koko näyttö -tilaan. Kun koko näyttö on käytössä, Dialogia ei voi siirtää tai sijoittaa. Tätä tilaa voidaan muuttaa Dialogin murtopisteattribuutilla. Murtopiste on media kysely, joka määrittää, milloin Dialog siirtyy automaattisesti koko näyttö -tilaan. Kun kysely täsmää, Dialog muuttuu koko näyttöön - muuten se on sijoitettu.

Tyylittely​

Teemat​

Dialog-komponenteissa on 7 erilaista teemaa , jotka mahdollistavat nopean tyylittelyn ilman CSS:ää. Nämä teemat ovat ennalta määriteltäviä tyylejä, joita voidaan soveltaa painikkeisiin niiden ulkoasun ja visuaalisen esityksen muuttamiseksi. Ne tarjoavat nopean ja johdonmukaisen tavan muokata painikkeiden ulkoasua koko sovelluksessa.

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

  • Vaara: Toimet, joilla on vakavia seurauksia, kuten täytettyjen tietojen tyhjentäminen tai tilin/tietojen pysyvä poistaminen, edustavat hyvää käyttötilannetta Vaara-teemalla varustetuille dialogeille.
  • Oletus: Oletusteema on sopiva toimiin koko sovelluksessa, jotka eivät vaadi erityistä huomiota ja ovat geneerisiä, kuten asetuksen vaihtaminen.
  • Pääasiallinen: Tämä teema on sopiva pää "toimintakehotteeksi" sivulla, kuten rekisteröityminen, muutosten tallentaminen tai siirtyminen toiselle sivulle.
  • Onnistuminen: Onnistumistason dialogit ovat erinomaisia visualisoimaan onnistumisen päätöstä sovelluksessa, kuten lomakkeen lähettämiseen tai rekisteröitymisprosessin täydentämiseen. Onnistumistason voidaan ohjelmallisesti soveltaa, kun onnistunut toimi on suoritettu.
  • Varoitus: Varoitusdialogit ovat hyödyllisiä ilmoittamaan käyttäjille, että he ovat tekemässä mahdollisesti riskialtista toimintoa, kuten siirtyessään sivulta, jolla on tallentamattomia muutoksia. Nämä toimet ovat usein vähemmän vaikutusvaltaisia kuin ne, jotka käyttävät Vaara-teemaa.
  • Harmaa: Hyvä hienovaraisille toiminnoille, kuten pienille asetuksille tai toiminnoille, jotka ovat enemmän lisäyksiä sivulle eikä päätoiminnallisuudelle.
  • Tieto: Tietoteema on hyvä valinta tarjota selventävää, lisätietoa käyttäjälle tarvittaessa.
Näytä koodi

Loading...