Uznirstošo logu, brīdinājumu un tostu veidošana, izmantojot Blueprint UI programmā React

Blueprint UI ir populārs React UI rīkkops, kas nodrošina atkārtoti lietojamu komponentu un stilu kopu modernu tīmekļa lietojumprogrammu izveidei. Viena no galvenajām Blueprint UI funkcijām ir tās atbalsts uznirstošo logu, brīdinājumu un tostu izveidei, kas ir būtiski komponenti informācijas un atsauksmju parādīšanai lietotājiem.

Blueprint UI instalēšana

Lai sāktu darbu ar Blueprint UI, vispirms tas ir jāinstalē. To var izdarīt, izmantojot jebkuru pakotņu pārvaldnieku pēc jūsu izvēles.

Lai to instalētu, izmantojot npm, JavaScript pakotņu pārvaldnieks, terminālī palaidiet šādu komandu:

npm instalējiet @blueprintjs/core

Pēc Blueprint UI instalēšanas jums ir jāimportē CSS faili no bibliotēkas:

@importēt"normalize.css";
@importēt"@blueprintjs/core/lib/css/blueprint.css";
@importēt"@blueprintjs/icons/lib/css/blueprint-icons.css";

Importējot šos failus, jūs varēsit integrēt Blueprint UI stilus ar Blueprint UI piedāvātajiem komponentiem.

Uznirstošo logu izveide, izmantojot Blueprint UI

Uznirstošie elementi ir rīka padomi, kas tiek parādīti, kad lietotājs virza kursoru virs elementa vai noklikšķina uz tā. Tie sniedz lietotājam papildu informāciju vai opcijas.

Lai savā React lietojumprogrammā izveidotu uznirstošos logus, izmantojot Blueprint UI, jums ir jāinstalē Blueprint UI Popover2 komponents.

Lai to izdarītu, terminālī palaidiet šādu kodu:

npm instalēt --save @blueprintjs/popover2

Noteikti importējiet pakotnes stila lapu savā CSS failā:

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

Pēc stila lapas importēšanas varat izmantot Popover2 komponents, lai jūsu lietojumprogrammā izveidotu uznirstošos logus.

Piemēram:

imports Reaģēt no"reaģēt";
imports { Button } no"@blueprintjs/core";
imports { Popover2 } no"@blueprintjs/popover2";
funkcijuApp() {
konst popoverContent = (



Uznirstošais virsraksts</h3>


Šis ir uznirstošā loga saturs.</p>
 </div>
 );
atgriezties (




"panākumi" teksts="Noklikšķiniet uz mani" />
 </Popover2>
 </div>
 );
}

eksportētnoklusējuma Lietotne;

Šis kods izveido uznirstošo logu, izmantojot Popover2 komponents. Tas arī definē a popoverContent mainīgais, kas satur JSX kodu uznirstošajam saturam.

The Popover2 komponents aizņem popoverContent kā tā vērtība saturu prop. The saturu prop norāda saturu, kas tiek rādīts uznirstošajā logā. Lūk, Popover2 komponentu aptinumi a Poga komponents. Tādējādi, noklikšķinot uz pogas, tiek parādīts uznirstošais logs.

Popover izskatās vienkāršs, kā parādīts šeit:

Varat veidot popover satura stilu, nododot a klasesNosaukums balsts uz popoverContent JSX kods:

konst popoverContent = (
'popover'>
Uznirstošais virsraksts</h3>


Šis ir uznirstošā loga saturs.</p>
 </div>
);

Pēc tam varat definēt CSS klasi savā CSS failā:

.popover {
polsterējums: 1rem;
fona krāsa: #e2e2e2;
fontu ģimene: kursīvs;
}

Tagad popoveram vajadzētu izskatīties nedaudz labāk:

The Popover2 komponentam ir nepieciešami daži rekvizīti, kas palīdzēs to konfigurēt atbilstoši jūsu vajadzībām. Daži no šiem rekvizītiem ir popoverClassName, par mijiedarbību, ir Atvērts, minimāls, un izvietojumu.

The izvietojumu prop nosaka vēlamo popover pozīciju attiecībā pret mērķa elementu. Tās pieejamās vērtības ir:

• auto
• automātiskā palaišana
• automātiskā beigas
• tops
• top-start
• augstākās klases
• apakšā
• apakšējais sākums
• apakšējais gals
• pa labi
• pareizais sākums
• labais gals
• pa kreisi
• kreisais sākums
• kreisais gals

Ar popoverClassName, varat definēt uznirstošā elementa CSS klases nosaukumu. Vispirms savā CSS failā izveidojiet CSS klasi, lai izmantotu rekvizītu.

Piemēram:

.custom-popover {
fona krāsa: #e2e2e2;
kaste-ēna: 0 10px 15px-3 pikseļirgb(0 0 0 / 0.1);
robeža-rādiuss: 12px;
polsterējums: 1rem;
}

Pēc CSS klases izveidošanas izmantojiet popoverClassName piedāvājums pielāgotā stila lietošanai Popover2 komponentam:

 content={popoverContent}
 izvietojums="apakšā galā"
 popoverClassName="pielāgota popover"
 minimāls={taisnība}
>
"panākumi" teksts="Noklikšķiniet uz mani" />
</Popover2>

The minimāls prop kontrolē popover stilu. Rekvizīts pieņem Būla vērtību. Ja iestatīts uz True, uznirstošajam logam būs minimāls stils, bez bultiņām un vienkāršs lodziņa izskats.

Brīdinājumu izveide

Brīdinājumi ir paziņojumi, kas tiek parādīti ekrānā, lai informētu lietotāju par svarīgu informāciju vai darbībām. Tos parasti izmanto, lai parādītu kļūdu ziņojumus, veiksmes ziņojumus vai brīdinājumus.

Brīdinājumu izveide Blueprint UI ir līdzīga brīdinājumu izveide, izmantojot Chakra UI. Jūs izmantosit brīdinājuma komponentu, lai izveidotu brīdinājumu savā React lietojumprogrammā, izmantojot Blueprint UI.

Šeit ir piemērs:

imports Reaģēt no"reaģēt";
imports { Alert, Button } no"@blueprintjs/core";
funkcijuApp() {
konst [isOpen, setIsOpen] = React.useState(viltus);
konst rokturisAtvērt = () => {
 setIsOpen(taisnība);
 };
konst rokturisAizvērt = () => {
 setIsOpen(viltus);
 };
atgriezties (



"Aizvērt">
Šis ir brīdinājuma ziņojums</p>
 </Alert>
"Noklikšķiniet uz mani" nolūks ="panākumi" onClick={handleOpen} />
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šis piemērs parāda, kā jums ir jāimportē Brīdinājums komponents no @blueprintjs/core iepakojums. The Brīdinājums komponents parāda brīdinājuma ziņojumu ekrānā. Tam nepieciešami arī trīs rekvizīti: ir Atvērts, onClose, un apstiprinātButtonTeksts.

The ir Atvērts prop nosaka, vai brīdinājums ir redzams vai nē. Iestatiet to uz True, lai parādītu brīdinājumu, un uz False, lai to paslēptu. The onClose prop ir atzvanīšanas funkcija, kas darbojas, kad lietotājs aizver brīdinājumu.

Visbeidzot, apstiprinātButtonTeksts prop nosaka tekstu, kas tiek parādīts uz apstiprinājuma pogas.

Brīdinājuma paziņojums šajā piemērā izskatīsies šādi:

Tostu izveide, izmantojot Blueprint UI

Tosti ir paziņojumi, kas tiek parādīti ekrānā, lai informētu lietotāju par svarīgu informāciju vai notikumiem. Tie ir līdzīgi brīdinājumiem, taču parasti ir mazāk traucējoši un ātri pazūd.

Lai savā React lietojumprogrammā izveidotu tostu, izmantojot Blueprint UI, izmantojiet OverlayTosteris komponents. The OverlayTosteris komponents izveido Toaster gadījumu, ko pēc tam izmanto, lai izveidotu atsevišķus grauzdiņus.

Piemēram:

imports Reaģēt no"reaģēt";
imports { OverlayToaster, Button } no"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ pozīciju: "augšējā labajā pusē" });
funkcijuApp() {
konst showToast = () => {
 toasterInstance.show({
 ziņa: "Šis ir grauzdiņš",
 nolūks: "primārs",
 pārtraukums: 3000,
 isCloseButtonShown: viltus,
 ikona: "grāmatzīme",
 });
 };
atgriezties (



"Noklikšķiniet uz mani" nolūks ="panākumi" onClick={showToast} />
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Iepriekš minētais koda bloks izmanto OverlayToaster.create metodi, lai ģenerētu tostera gadījumu, un norāda tā pozīciju, izmantojot pozīciju prop.

Tas arī nosaka funkciju parādītToast. Šī funkcija izmanto parādīt metode tosterisInstance lai parādītu tostu, kad tiek zvanīts. The parādīt metode aizņem objektu ar ziņa, nolūks, pārtraukums, isCloseButtonShown, un ikonu rekvizīti.

The ziņa prop norāda grauzdiņa teksta saturu, savukārt nolūks prop norāda grauzdiņa veidu. Grauzdiņa stils mainīsies atkarībā no tā vērtības.

Varat kontrolēt, cik ilgi tiek rādīts paziņojums par grauzdiņiem, izmantojot pārtraukums prop. The ikonu prop norāda ikonas elementu, kas jāparāda grauzdiņā. Ar isCloseButtonShown prop, varat kontrolēt, vai grauzdiņā tiek rādīta aizvēršanas poga.

Iepriekš minētais koda bloks radīs skaistu grauzdiņu, kad noklikšķināsit uz pogas, kā redzams zemāk esošajā attēlā.

Ja vēlaties savā React lietojumprogrammā izveidot pievilcīgus paziņojumus par grauzdiņiem, Blueprint UI ir lieliska iespēja. Tas nodrošina plašu iepriekš definētu komponentu klāstu, ko varat izmantot, lai izveidotu paziņojumus, kas atbilst jūsu lietojumprogrammas stilam.

Tomēr, ja strādājat pie neliela projekta, kuram nav nepieciešamas visas Blueprint UI funkcijas, React Toastify ir viegla alternatīva skaistu paziņojumu izveidei.

Lietotāju pieredzes uzlabošana ar grauzdiņiem, uznirstošajiem logiem un brīdinājumiem

Jūs esat iemācījies izveidot uznirstošos logus, brīdinājumus un tostus savā React lietojumprogrammā, izmantojot Blueprint UI. Šie komponenti ir būtiski, lai lietotājiem sniegtu informāciju un atsauksmes, un tie var ievērojami uzlabot jūsu lietojumprogrammas lietošanas pieredzi. Jūs varat viegli izveidot šos komponentus, izmantojot iegūto informāciju ar minimālu piepūli un pielāgošanu.