Ponnahdusikkunoiden, hälytysten ja toastien luominen Blueprint-käyttöliittymällä Reactissa

Blueprint UI on suosittu React UI -työkalusarja, joka tarjoaa joukon uudelleenkäytettäviä komponentteja ja tyylejä nykyaikaisten verkkosovellusten rakentamiseen. Yksi Blueprint UI: n tärkeimmistä ominaisuuksista on tuki ponnahdusikkunoiden, hälytysten ja toastien luomiseen, jotka ovat olennaisia ​​osia tietojen ja palautteen näyttämisessä käyttäjille.

Blueprint UI: n asentaminen

Aloita Blueprint UI: n käyttö asentamalla se ensin. Voit tehdä tämän käyttämällä mitä tahansa valitsemaasi paketinhallintaa.

Asenna se käyttämällä npm, JavaScript-pakettien hallinta, suorita seuraava komento terminaalissasi:

npm asennus @blueprintjs/core

Blueprint UI: n asentamisen jälkeen sinun on tuotava CSS-tiedostot kirjastosta:

@tuonti"normalisoi.css";
@tuonti"@blueprintjs/core/lib/css/blueprint.css";
@tuonti"@blueprintjs/icons/lib/css/blueprint-icons.css";

Tuomalla nämä tiedostot voit integroida Blueprint UI -tyylejä Blueprint UI: n tarjoamiin komponentteihin.

Ponnahdusikkunoiden luominen Blueprint UI: n avulla

Ponnahdusikkunat ovat työkaluvihjeitä, jotka tulevat näkyviin, kun käyttäjä vie hiiren elementin päälle tai napsauttaa sitä. Ne tarjoavat käyttäjälle lisätietoja tai vaihtoehtoja.

Jos haluat luoda ponnahdusikkunoita React-sovelluksessasi Blueprint UI: n avulla, sinun on asennettava Blueprint UI Popover2 komponentti.

Voit tehdä tämän suorittamalla seuraavan koodin päätteessäsi:

npm install --save @blueprintjs/popover2

Muista tuoda paketin tyylisivu CSS-tiedostoosi:

@tuonti"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Kun olet tuonut tyylitaulukon, voit käyttää Popover2 komponentti ponnahdusikkunoiden luomiseen sovellukseesi.

Esimerkiksi:

tuonti Reagoi alkaen"reagoi";
tuonti { Button } alkaen"@blueprintjs/core";
tuonti { Popover2 } alkaen"@blueprintjs/popover2";
toimintoSovellus() {
konst popoverContent = (



Popover-otsikko</h3>


Tämä on ponnahdusikkunan sisältö.</p>
 </div>
 );
palata (




"menestys" teksti ="Klikkaa minua" />
 </Popover2>
 </div>
 );
}

viedäoletuksena Sovellus;

Tämä koodi luo ponnahdusikkunan käyttämällä Popover2 komponentti. Se määrittelee myös a popoverContent muuttuja, joka sisältää JSX-koodin popover-sisällölle.

The Popover2 komponentti vie popoverContent sen arvona sisältö prop. The sisältö prop määrittää ponnahdusikkunassa näkyvän sisällön. Tässä, Popover2 komponenttikääreet a Painike komponentti. Tämä saa ponnahdusikkunan näkyviin, kun napsautat painiketta.

Ponnahdusikkuna näyttää yksinkertaiselta, kuten tässä näkyy:

Voit muokata popover-sisällön tyyliä ohittamalla a luokan nimi tuki siihen popoverContent JSX koodi:

konst popoverContent = (
"popover">
Popover-otsikko</h3>


Tämä on ponnahdusikkunan sisältö.</p>
 </div>
);

Voit sitten määrittää CSS-luokan CSS-tiedostossasi:

.popover {
pehmuste: 1rem;
taustaväri: #e2e2e2;
font-perhe: kursiivinen;
}

Nyt popoverin pitäisi näyttää hieman paremmalta:

The Popover2 komponentti vaatii joitain rekvisiitta, jotka auttavat sinua määrittämään sen tarpeidesi mukaan. Jotkut näistä rekvisiitta on popoverClassName, on Interaction, on auki, minimaalinen, ja sijoitus.

The sijoitus prop määrittää ponnahdusikkunan ensisijaisen sijainnin kohdeelementtiin nähden. Sen saatavilla olevat arvot ovat:

• auto
• automaattinen käynnistys
• automaattinen loppu
• alkuun
• huippualoitus
• huippuluokan
• pohja
• alhaalta aloitus
• alapäätä
• oikein
• oikea aloitus
• oikea pää
• vasemmalle
• vasen aloitus
• vasen pää

Kanssa popoverClassName, voit määrittää ponnahduselementille CSS-luokan nimen. Luo ensin CSS-luokka CSS-tiedostoosi käyttääksesi prop.

Esimerkiksi:

.custom-popover {
taustaväri: #e2e2e2;
laatikko-varjo: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
raja-säde: 12px;
pehmuste: 1rem;
}

Kun olet luonut CSS-luokan, käytä popoverClassName ehdotus mukautetun tyylin soveltamiseksi Popover2-komponenttiin:

 content={popoverContent}
 sijoitus ="alaosa"
 popoverClassName="custom-popover"
 minimi={totta}
>
"menestys" teksti ="Klikkaa minua" />
</Popover2>

The minimaalinen prop hallitsee ponnahdusikkunan tyyliä. Prop hyväksyy loogisen arvon. Jos asetus on tosi, ponnahdusikkunassa on minimaalinen tyyli, ei nuolta ja yksinkertainen laatikko.

Hälytysten luominen

Hälytykset ovat näytöllä näkyviä ilmoituksia, jotka kertovat käyttäjälle tärkeistä tiedoista tai toimista. Niitä käytetään yleisesti virheilmoitusten, onnistumisilmoitusten tai varoitusten näyttämiseen.

Hälytysten luominen Blueprint UI: ssa on samanlaista kuin hälytysten luominen Chakra-käyttöliittymällä. Käytät Alert-komponenttia hälytyksen luomiseen React-sovelluksessasi Blueprint UI: n avulla.

Tässä on esimerkki:

tuonti Reagoi alkaen"reagoi";
tuonti { Alert, Button } alkaen"@blueprintjs/core";
toimintoSovellus() {
konst [isOpen, setIsOpen] = React.useState(väärä);
konst kahvaAvaa = () => {
 setIsOpen(totta);
 };
konst HandsClose = () => {
 setIsOpen(väärä);
 };
palata (



"Kiinni">
Tämä on hälytysviesti</p>
 </Alert>
"Klikkaa minua" tarkoitus ="menestys" onClick={handleOpen} />
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä esimerkki näyttää, kuinka sinun on tuotava Varoitus komponentti @blueprintjs/core paketti. The Varoitus komponentti näyttää varoitusviestin näytöllä. Se vaatii myös kolme rekvisiittaa: on auki, onClose, ja VahvistaButtonText.

The on auki prop määrittää, onko hälytys näkyvissä vai ei. Aseta se arvoon tosi näyttääksesi hälytyksen ja false piilottaaksesi sen. The onClose prop on takaisinsoittotoiminto, joka suoritetaan, kun käyttäjä sulkee hälytyksen.

Lopuksi, VahvistaButtonText prop määrittää vahvistuspainikkeessa näkyvän tekstin.

Tämän esimerkin hälytysilmoitus näyttää tältä:

Toastien luominen Blueprint-käyttöliittymällä

Toast ovat ilmoituksia, jotka ilmestyvät näytölle kertomaan käyttäjälle tärkeistä tiedoista tai tapahtumista. Ne muistuttavat hälytyksiä, mutta ovat yleensä vähemmän häiritseviä ja katoavat nopeasti.

Voit luoda maljan React-sovelluksessasi Blueprint UI: n avulla käyttämällä OverlayLeivänpaahdin komponentti. The OverlayLeivänpaahdin komponentti luo leivänpaahdin, jota käytetään sitten yksittäisten paahtoleipien luomiseen.

Esimerkiksi:

tuonti Reagoi alkaen"reagoi";
tuonti { OverlayToaster, Button } alkaen"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ asema: "Yläoikea" });
toimintoSovellus() {
konst showToast = () => {
 toasterInstance.show({
 viesti: "Tämä on malja",
 tahallisuus: "ensisijainen",
 Aikalisä: 3000,
 isCloseButtonShown: väärä,
 kuvake: "kirjanmerkki",
 });
 };
palata (



"Klikkaa minua" tarkoitus ="menestys" onClick={showToast} />
 </div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodilohko käyttää OverlayToaster.create menetelmä leivänpaahtimen luomiseen ja määrittää sen sijainnin käyttämällä asema prop.

Se myös määrittelee toiminnon näytäToast. Tämä toiminto käyttää näytä menetelmä leivänpaahdinInstance näyttää paahtoleivän, kun sitä kutsutaan. The näytä menetelmä ottaa objektin kanssa viesti, tahallisuus, Aikalisä, isCloseButtonShown, ja kuvake rekvisiitta.

The viesti prop määrittää paahtoleivän tekstisisällön, kun taas tahallisuus prop määrittää paahtoleivän tyypin. Paahtoleivän tyyli vaihtelee sen arvon mukaan.

Voit hallita, kuinka kauan paahtoleipäilmoitus näkyy käyttämällä Aikalisä prop. The kuvake prop määrittää paahtoleivässä näytettävän kuvakeelementin. Kanssa isCloseButtonShown prop, voit hallita, näkyykö sulkupainike paahtoleipää.

Yllä oleva koodilohko luo kauniin paahtoleivän, kun napsautat painiketta, kuten alla olevasta kuvasta näkyy.

Jos haluat luoda houkuttelevia paahtoleipäilmoituksia React-sovelluksessasi, Blueprint UI on loistava vaihtoehto. Se tarjoaa laajan valikoiman ennalta määritettyjä osia, joiden avulla voit luoda ilmoituksia, jotka vastaavat sovelluksesi tyyliä.

Jos kuitenkin työskentelet pienessä projektissa, joka ei vaadi kaikkia Blueprint UI: n ominaisuuksia, React Toastify on kevyt vaihtoehto kauniiden ilmoitusten luomiseen.

Paranna käyttökokemusta paahtoleipien, ponnahdusikkunoiden ja hälytysten avulla

Olet oppinut luomaan ponnahdusikkunoita, hälytyksiä ja toasteja React-sovelluksessasi Blueprint UI: n avulla. Nämä komponentit ovat välttämättömiä tiedon ja palautteen antamiseksi käyttäjille, ja ne voivat parantaa merkittävästi sovelluksesi käyttökokemusta. Voit helposti luoda nämä komponentit käyttämällä saamiasi tietoja vähäisellä vaivalla ja mukauttamisella.