UI Components

Avaa ChatGPT:ssä

WebforJ:ssä sovelluksia rakennetaan modulaarisista yksiköistä, joita kutsutaan komponenteiksi, jotka mahdollistavat nopean ja tehokkaan käyttöliittymän kehittämisen. Kehys tarjoaa joukon olennaisia komponentteja, kuten painikkeita, syöte-elementtejä ja asettelukontteja. Perusasioiden hallinnan jälkeen voit tutustua JavaDocs -asiakirjaan saadaksesi yksityiskohtaisen yleiskatsauksen kaikista komponenteista ja niiden toiminnallisuuksista.

Asettelu

Asettelukomponentit tarjoavat perustan käyttöliittymien rakenteelle, mahdollistaen kehittäjien järjestää sisältöä tehokkaasti. Nämä komponentit tarjoavat erilaisia tapoja hallita lapsikomponenttien järjestystä, olipa kyseessä yksinkertainen tai monimutkainen asettelu.

Seuraavat asettelukomponentit on suunniteltu käsittelemään laajaa valikoimaa käyttötapauksia, aina responsiivisesta suunnittelusta edistyneeseen sisällönhallintaan.

AppLayout

Konttikomponentti, joka tarjoaa rakenteellisen asettelun yläkerran sovelluksen navigaatiolle ja sisällön järjestämiselle.

Työkalupalkki

Vaakasuuntainen konttikomponentti, joka pitää koossa joukon toimintonäppäimiä, ikoneita tai muita ohjaimia, joita käytetään yleensä tehtävien suorittamiseen nykyisestä kontekstista riippuen.

FlexLayout

Asettelukomponentti, joka järjestää lapsensa joustavien laatikoiden (flexbox) sääntöjen mukaisesti responsiivista suunnittelua ja kohdistusta varten.

SarakkeetLayout

Asettelukomponentti, joka järjestää lapsensa useisiin pystysuoriin sarakkeisiin, hyödyllinen lomakkeiden ja ruudukon kaltaisten rakenteiden luomiseen.

Jakaja

Asettelukomponentti, joka jakaa käytettävissä olevan tilan kahden lapsikomponentin kesken, mahdollistaen käyttäjien muuttaa niiden kokoa vetämällä jakolaitaa.

Laatikko

Liukuva paneelikomponentti, jota käytetään tyypillisesti sivunavigaatioon tai ylimääräisen sisällön vuokraamiseen, joka voidaan näyttää tai piilottaa.

Vuoropuhelu

Modaalinen ikkuna, joka peittää sisällön näyttää tärkeää tietoa tai kehottaa käyttäjää vuorovaikutukseen, usein vaaditaan käyttäjän toimintaa sulkemiseen.

Kirjautuminen

Komponentti, joka tarjoaa valmiin käyttöliittymän käyttäjätodennukseen, tyypillisesti sisältäen kentät käyttäjänimeä ja salasanaa sekä lähetysnäppäimen.

Accordion

Pystysuunnassa pinottu kokoelma taitettavia paneeleja, joista jokaisessa on napsautettava otsikko, joka vaihtaa sen sisällön näkyvyyttä.

Välilehtipaneeli

Konttikomponentti, joka järjestää sisällön useisiin välilehtiin, mahdollistaen käyttäjien vaihtaa eri näkymien tai osioiden välillä.

Tietojen syöttö

Tietojen syöttökomponentit tarjoavat olennaiset työkalut käyttäjätietojen tallentamiseen ja vuorovaikutusten hallintaan sovelluksessasi. Nämä komponentit ovat monipuolisia, mikä helpottaa vuorovaikutteisten lomakkeiden rakentamista ja erilaisten tietotyyppien keräämistä.

Tekstikenttä

Yhdellä rivillä oleva syöttökomponentti tekstidatan syöttämiseen ja muokkaamiseen.

MaskattuTekstikenttä

Tekstisyöttökomponentti, joka rajoittaa käyttäjän syötteen tiettyyn muotoon tai kaavaan, tyypillisesti käytettävä kentissä kuten puhelinnumerot, päivämäärät tai luottokorttinumerot.

NumeroKenttä

Komponentti, joka tarjoaa oletusarvoisen selainpohjaisen syöttökentän numeroarvojen syöttämiseen, sisäänrakennetuilla ohjaimilla arvon suurentamiseen tai pienentämiseen.

MaskattuNumeroKenttä

Numeraalinen syöttökomponentti, joka rajoittaa käyttäjän syötteen tiettyyn numeeriseen muotoon tai kaavaan, varmistaen kelvollisen numeroiden syötön, kuten valuutta, prosentit tai muut muotoillut numerot.

SalasanaKenttä

Yhdellä rivillä oleva syöttökomponentti salasanapoissa syöttämiseen ja peittämiseen.

PäivämääräKenttä

Komponentti, joka tarjoaa oletusarvoisen selainpohjaisen päivämäärävalitsimen päivämäärän valitsemiseksi syöttökentän kautta.

MaskattuPäivämääräKenttä

Päivämääräsyöttökomponentti, joka pakottaa tietyn päivämäärämuodon tai -kaavan, varmistaen, että käyttäjä syöttää kelvollisen päivämäärän määritellyn maskin mukaisesti.

AikaKenttä

Komponentti, joka tarjoaa oletusarvoisen selainpohjaisen aikavalitsimen aikavälin valitsemiseksi syöttökentän kautta.

MaskattuAikaKenttä

Aikasyöttökomponentti, joka pakottaa tietyn aikamuodon tai -kaavan, varmistaen, että käyttäjä syöttää kelvollisen ajan määritellyn maskin mukaisesti.

PäivämääräAikaKenttä

Komponentti, joka tarjoaa oletusarvoisen selainpohjaisen päivämäärä- ja aikavalitsimen, jonka avulla voidaan valita sekä päivämäärä että aika yhdestä syöttökentästä.

VäriKenttä

Komponentti, joka tarjoaa oletusarvoisen selainpohjaisen värivalitsimen, jonka avulla käyttäjät voivat valita värin syöttökentästä.

Tekstialue

Monirivinen tekstisyöttökomponentti, joka mahdollistaa käyttäjien syöttää tai muokata suurempia tekstikappaleita.

Valintaruutu

Komponentti, joka edustaa binäärivaihtoehtoa, mahdollistaen käyttäjien vaihtaa valitun (tosi) tai valitsemattoman (epätosi) tilan välillä.

Radiopainike

Komponentti, joka mahdollistaa käyttäjien valita yhden vaihtoehdon keskinäisten valintojen joukosta.

Kytkin

Vaihtoehtokomponentti, joka mahdollistaa käyttäjille vaihtaa kahden tilan, kuten päällä/pois tai tosi/epätosi, välillä liukuvan toiminnon avulla.

Valintaruutu

Komponentti, joka tarjoaa pudotusvalikon ennalta määritetyistä vaihtoehdoista, mahdollistaen käyttäjien valita yhden vaihtoehdon luettelosta.

Yhdistelmälaatikko

Komponentti, joka yhdistää pudotuslistan muokattavaan tekstisyöttöön, mahdollistaen käyttäjien joko valita vaihtoehdon listalta tai syöttää mukautetun arvon.

Luettelo

Komponentti, joka näyttää vieritettävän luettelon vaihtoehdoista, mahdollistaen käyttäjien valita yhden tai useamman kohteen luettelosta.

Lataa

Rivivaihtoehtokomponentti, joka mahdollistaa käyttäjien valita yhden tai useamman tiedoston omalta koneeltaan ja ladata ne palvelimelle, tukien drag-and-drop -toimintoa, suodattimia ja tiedostokohtaisia tapahtumaseurantaa.

Valintaikkunat

Valintaikkunat tarjoavat tavan esittää käyttäjille vaihtoehtoja tai pyytää heitä vahvistamaan ennen toimenpiteen jatkamista. Nämä komponentit ovat olennaisia vuorovaikutteisten, päätöksentekoon perustuvien työnkulkujen luomiseksi, mahdollistaen käyttäjien vahvistaa, peruuttaa tai valita erilaisista vaihtoehdoista selkeällä ja rakenteellisella tavalla.

ViestiIkkuna

Dialogikomponentti, jota käytetään esittämään käyttäjälle informatiivisia viestejä tai hälytyksiä, tyypillisesti yhdellä OK -painikkeella viestin vahvistamiseksi.

VahvistusIkkuna

Dialogikomponentti, joka kysyy käyttäjältä vahvistusta tai peruutusta toiminnolle, tyypillisesti tarjoamalla Kyllä ja Ei tai OK ja Peruuta -painikkeita.

SyöttöIkkuna

Dialogikomponentti, joka kehottaa käyttäjää syöttämään tekstiä tai tietoa, tyypillisesti tarjoamalla syöttökentän sekä toimintopainikkeita kuten OK ja Peruuta.

TiedostovalintaIkkuna

Dialogikomponentti, joka mahdollistaa käyttäjien selata ja valita tiedostoja palvelimen tiedostojärjestelmästä.

TiedostonLatausIkkuna

Dialogikomponentti, joka mahdollistaa käyttäjien ladata tiedostoja omasta tiedostojärjestelmästään sovellukseen.

TiedostonTallennusIkkuna

Dialogikomponentti, joka mahdollistaa käyttäjille tallentaa tiedoston tiettyyn sijaintiin palvelimen tiedostojärjestelmässä.

Vuorovaikutus ja esitys

Tämä kategoria sisältää komponentteja, jotka helpottavat käyttäjän vuorovaikutuksia ja visuaalisesti näyttävät dataa tai sovellustiloja. Nämä komponentit auttavat käyttäjiä navigoimaan sovelluksessa, laukaisevat toimintoja ja ymmärtävät edistymistä tai tuloksia dynaamisten visuaalisten elementtien avulla.

Taulukko

Komponentti, jota käytetään näyttämään dataa rakenteellisessa, taulukoivassa muodossa riveillä ja sarakkeilla, tukien ominaisuuksia kuten lajittelua ja sivutusta.

GoogleDiagrammit

Komponentti, joka integroituu Google Diagrammien kanssa näyttämään erilaisia kaavioita ja visuaalisia datan esityksiä sovelluksessa.

Painike

Napsautettava komponentti, joka laukaisee toiminnon tai tapahtuman, kun sitä painetaan.

Toast

Kevyt, ei-estävä ilmoituskomponentti, joka lyhyesti näyttää viestin käyttäjälle ennen kuin se automaattisesti häviää.

Ilmoitus

Komponentti, joka näyttää tärkeitä viestejä tai varoituksia näkyvässä muodossa käyttäjän huomion kiinnittämiseksi.

Merkki

Pieni etiketti-komponentti, joka näyttää laskentaa, tiloja tai lyhyitä metatietoja, tukien teemoja, kokoja ja ikoneita.

TyöpöytäIlmoitus

Komponentti, joka hyödyntää selaimen natiivia Ilmoitus-API:a varoittaakseen käyttäjiä mukautetuilla työpöytäilmoituksilla.

Navigaattori

Mukautettava sivutuskomponentti datan läpikäymiseen, tukien asetteluja, joissa on ensimmäinen, viimeinen, seuraava, edellinen painiket ja nopeita hyppyjä.

Edistyspalkki

Komponentti, joka visuaalisesti esittää tehtävän tai prosessin edistymistä, tyypillisesti esitettynä vaakasuorana palkkina, joka täyttyy edistymisen myötä.

Liukusäädin

Komponentti, joka mahdollistaa käyttäjän valita arvon määritellyltä alueelta vetämällä kahvaa pitkin rataa.

ToiminnassaOsa

Sovelluksen laajuinen visuaalinen indikaattori, tyypillisesti pyörijä, joka osoittaa, että globaali prosessi on käynnissä.

Lataus

Skaalautuva latausindikaattori, joka näyttää tietyn vanhemman komponentin sisällä, osoittaen, että sisältöä tai dataa ladataan kyseisessä osassa.

Pyörimisnäyttö

Komponentti, joka näyttää pyörivän animaation, tyypillisesti käytetään osoittamaan, että prosessi tai toimenpide on käynnissä.

SovellusNavigaatiO

Komponentti, joka tarjoaa navigaatiovalikon sovellukselle, tyypillisesti käytetään linkkien tai navigointielementtien luetteloimiseen, jotta voidaan vaihtaa eri osioiden tai näkymien välillä.

Ikoni

Komponentti, joka näyttää graafisen symbolin tai kuvan, jota käytetään usein toimintojen, tilojen tai kategorioiden edustamiseen käyttöliittymässä.

Pääte

Komponentti, joka simuloi komentoriviliittymää (CLI) sovelluksessa, mahdollistaen käyttäjien syöttää ja suorittaa tekstipohjaisia komentoja.

PäättymätönVieritys

Komponentti, joka lataa lisää kohteita vierittäessä, näyttää latauskuvakkeen ja seuraa, milloin kaikki sisältö on haettu.

Päivitys

Komponentti, joka mahdollistaa vetämisen päivityksiin vieritettävissä säiliöissä — ihanteellinen dynaamiseen datan lataamiseen.

Puu

Komponentti, joka näyttää hierarkkista dataa, mahdollistaen käyttäjien laajentaa, supistaa ja vuorovaikuttaa sisäkkäisten kohteiden kanssa.

Profiilikuva

Komponentti, joka näyttää käyttäjän profiilikuvia tai alkukirjaimia, tukien erilaisia kokoja, muotoja ja teemoja.

MarkdownKatsoja

Komponentti, joka näyttää markdown-sisältöä progressiivisella merkeittäin renderöinnillä, ihanteellinen AI-keskusteluliittymille ja virtaavalle tekstille.