Crearea popovers, alerte și toasts cu Blueprint UI în React

de
Tweet
Share
Share
Pin

Blueprint UI reprezintă o colecție de instrumente populare pentru React, oferind o selecție vastă de componente și stiluri ce pot fi reutilizate, destinate dezvoltării de aplicații web contemporane. Un avantaj major al Blueprint UI este suportul său pentru crearea de elemente precum popover-uri, alerte și toast-uri, esențiale pentru prezentarea de informații și feedback către utilizatori.

Instalarea Blueprint UI

Pentru a începe utilizarea Blueprint UI, este necesară instalarea bibliotecii. Acest proces se poate realiza folosind orice manager de pachete preferat.

Pentru a efectua instalarea cu npm, managerul de pachete JavaScript, introduceți următoarea comandă în terminal:

 npm install @blueprintjs/core

Odată instalat Blueprint UI, este necesar să importați fișierele CSS asociate bibliotecii:

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

Prin importarea acestor fișiere, stilurile Blueprint UI pot fi integrate cu componentele oferite de bibliotecă.

Crearea de Popover-uri cu Blueprint UI

Popover-urile sunt sfaturi vizuale care apar atunci când utilizatorul interacționează (trece cu mouse-ul sau dă clic) cu un element. Acestea oferă informații suplimentare sau opțiuni utilizatorului.

Pentru a crea popover-uri în aplicația React, folosind Blueprint UI, este necesar să instalați componenta Popover2.

Aceasta se realizează prin executarea următoarei comenzi în terminal:

 npm install --save @blueprintjs/popover2

Nu uitați să importați foaia de stil corespunzătoare în fișierul CSS al aplicației:

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

După importarea stilurilor, componenta Popover2 devine disponibilă pentru crearea de popover-uri.

Exemplu de utilizare:

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
function App() {
  const popoverContent = (
    <div>
      <h3>Titlu Popover</h3>
      <p>Acesta este conținutul din popover.</p>
    </div>
  );
  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Click Aici" />
      </Popover2>
    </div>
  );
}
export default App;

Acest fragment de cod demonstrează cum se creează un popover folosind componenta Popover2, definind o variabilă `popoverContent` care conține JSX-ul pentru conținutul popover-ului.
Componenta Popover2 primește `popoverContent` ca valoare pentru proprietatea `content`, care specifică ce va fi afișat. În acest caz, Popover2 include și un buton. Popover-ul va apărea la click pe buton.

Popover-ul rezultat va avea un aspect simplu, similar cu următorul:

Pentru a stiliza conținutul popover-ului, adăugați o proprietate `className` la codul JSX `popoverContent`:

 const popoverContent = (
  <div className="popover">
    <h3>Titlu Popover</h3>
    <p>Acesta este conținutul din popover.</p>
  </div>
);

Ulterior, definiți clasa CSS corespunzătoare în fișierul CSS:

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

Astfel, aspectul popover-ului va fi îmbunătățit:

Componenta Popover2 vine cu diverse proprietăți care permit configurarea sa detaliată. Dintre acestea, menționăm: `popoverClassName`, `onInteraction`, `isOpen`, `minimal` și `placement`.

Proprietatea `placement` determină poziția preferată a popover-ului față de elementul țintă. Valorile permise sunt:

  • auto
  • auto-start
  • auto-end
  • top
  • top-start
  • top-end
  • bottom
  • bottom-start
  • bottom-end
  • right
  • right-start
  • right-end
  • left
  • left-start
  • left-end

Cu `popoverClassName`, puteți aloca un nume de clasă CSS pentru elementul popover, creând astfel o clasă CSS particularizată.

Exemplu:

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

După definirea clasei CSS, utilizați proprietatea `popoverClassName` pentru a aplica stilul dorit componentei Popover2:

 <Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Aici" />
</Popover2>

Proprietatea `minimal` controlează stilul popover-ului. Dacă este setată la adevărat, popover-ul va avea un stil minimalist, fără săgeată și cu un aspect simplu.

Crearea Alertelor

Alertele sunt notificări care apar pe ecran, destinate informării utilizatorului despre acțiuni sau informații importante. Acestea sunt utilizate frecvent pentru a afișa mesaje de eroare, succes sau avertismente.

Crearea alertelor în Blueprint UI este similară cu cea din Chakra UI. Componenta Alert este folosită pentru a crea o alertă în aplicația React cu Blueprint UI.

Un exemplu:

 import React from "react";
import { Alert, Button } from "@blueprintjs/core";
function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => {
    setIsOpen(true);
  };
  const handleClose = () => {
    setIsOpen(false);
  };
  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Închide">
        <p>Acesta este un mesaj de alertă</p>
      </Alert>
      <Button text="Click Aici" intent="success" onClick={handleOpen} />
    </div>
  );
}
export default App;

Acest cod demonstrează cum se importă componenta Alert din pachetul `@blueprintjs/core`. Componenta Alert redă un mesaj de alertă, având trei proprietăți esențiale: `isOpen`, `onClose` și `confirmButtonText`.

Proprietatea `isOpen` determină vizibilitatea alertei (adevărat pentru a fi vizibilă, fals pentru a fi ascunsă). `onClose` este o funcție callback care rulează când utilizatorul închide alerta. `confirmButtonText` setează textul afișat pe butonul de confirmare.

Notificarea de alertă va arăta similar cu:

Crearea de Toast-uri cu Blueprint UI

Toast-urile sunt notificări care apar pe ecran pentru a informa utilizatorul despre evenimente sau informații relevante. Similar cu alertele, toast-urile sunt, de obicei, mai puțin intruzive și se estompează rapid.

Pentru a crea un toast în aplicația React, folosiți componenta `OverlayToaster`. Aceasta creează o instanță Toaster, care este apoi folosită pentru a genera toast-urile.

Exemplu:

 import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";
const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "Acesta este un toast",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };
  return (
    <div>
      <Button text="Click Aici" intent="success" onClick={showToast} />
    </div>
  );
}
export default App;

Acest cod utilizează metoda `OverlayToaster.create` pentru a genera instanța toaster și specifică poziția acesteia prin proprietatea `position`.

Funcția `showToast` utilizează metoda `show` a instanței `toasterInstance` pentru a afișa toast-ul, primind un obiect cu proprietățile `message`, `intent`, `timeout`, `isCloseButtonShown` și `icon`.

`message` conține textul toast-ului, `intent` specifică tipul toast-ului (stilul poate varia), `timeout` setează durata de afișare, `icon` adaugă o pictogramă, iar `isCloseButtonShown` controlează afișarea butonului de închidere.

Codul de mai sus va genera un toast atractiv când se dă clic pe buton, similar cu:

Dacă doriți să creați notificări toast personalizate în aplicația React, Blueprint UI este o alegere excelentă. Oferă o gamă variată de componente prestabilite care vă permit să construiți notificări în concordanță cu designul aplicației.

Cu toate acestea, în proiecte mai mici unde nu sunt necesare toate funcționalitățile Blueprint UI, React Toastify poate reprezenta o alternativă mai simplă pentru notificări.

Îmbunătățirea Experienței Utilizatorului cu Toast-uri, Popover-uri și Alerte

Ați învățat cum să creați popover-uri, alerte și toast-uri în aplicația React cu Blueprint UI. Aceste componente sunt esențiale pentru a oferi informații și feedback utilizatorilor, sporind semnificativ experiența cu aplicația. Cu cunoștințele acumulate, puteți crea cu ușurință aceste componente, folosind efort și personalizare minime.