K vytvoření oznamovací komponenty se nemusíte spoléhat na balíček třetí strany. Zde je návod, jak si jej můžete postavit sami.
V Reactu je k dispozici několik balíčků třetích stran, které vám mohou pomoci vytvořit komponentu oznámení. Pokud však chcete pouze jednoduchou oznamovací komponentu, možná budete chtít vytvořit vlastní, abyste do aplikace nepřidávali zbytečné závislosti.
Nastavení projektu
Budeš použijte Vite k nastavení aplikace React. Vite je nástroj pro sestavení, který vám umožní rychle postavit projekt React.
Chcete-li začít, použijte správce balíčků příze k vytvoření nového projektu Vite spuštěním příkazu níže.
příze vytvořit vite
Příkaz vás vyzve k zadání názvu projektu. Zadejte název projektu a stiskněte Enter. Dále vás vyzve k výběru rámce. Vybrat reagovat a stiskněte Enter. Nakonec vás požádá o výběr varianty, vyberte si JavaScript a poté stiskněte Enter.
Zde jsou konfigurace, které tento tutoriál použije:
Poté, co Vite vytvoří projekt, přejděte do složky projektu a otevřete ji pomocí editoru kódu.
Poté můžete spustit vývojový server spuštěním následujícího příkazu.
příze voj
Tím se otevře vaše nová aplikace React ve vašem výchozím prohlížeči na adrese http://localhost: 5173/.
Návrh komponenty oznámení
Aby bylo možné vytvořit flexibilní komponentu oznámení, musí být schopna zpracovávat různé typy oznámení s různými názvy, popisy a styly. Například potřebuje vykreslit upozornění, oznámení o úspěchu a chybě.
Zde jsou různé varianty, které by oznamovací komponenta měla být schopna vykreslit.
Toho můžete dosáhnout předáním rekvizit komponentě, která určuje typ oznámení, které se má vykreslit, nadpis a text popisu. Pomocí těchto rekvizit můžete přizpůsobit komponentu a znovu ji použít v celé aplikaci s minimálním úsilím. Pokud si potřebujete osvěžit rekvizity, zde je článek, který to vysvětluje jak používat rekvizity v Reactu.
Vytvoření komponenty oznámení
V src složku, vytvořte nový soubor s názvem Notification.jsx a přidejte následující kód.
vývoznívýchozífunkceOznámení({type, title, description}) {
vrátit se (
{/* Obsah oznámení */}
</div>
)
}
Tento kód vytvoří funkční komponentu tzv Oznámení se třemi rekvizitami: typ, titul, a popis. Tyto rekvizity použijete k přizpůsobení stylu a obsahu oznámení.
Z návrhu má komponenta několik ikon, konkrétně informace a ikonu křížku. Můžeš stáhněte si ikony zdarma k použití nebo použijte komponentu ikony z balíčku, jako je např reagovat-ikony. Tento tutoriál použije reagovat-ikony tak jej nainstalujte spuštěním příkazu níže.
příze přidat reakční ikony
Poté importujte ikony v horní části Oznámení komponent.
import { RxCross2, RxInfoCircled } z"react-icons/rx"
Nyní můžete komponentu upravit tak, aby k vytvoření obsahu oznámení používala ikony, nadpis a hodnoty popisu.
vývoznívýchozífunkceOznámení({type, title, description}) {
vrátit se (
{title}</div>
{description}</div>
</div>
</div>
</div>
)
}
Dalším krokem je stylizace v závislosti na předávaném typu.
Jedním přístupem, který můžete použít, je definovat třídy CSS pro každý typ oznámení, které chcete zobrazit. Poté můžete podmíněně použít příslušnou třídu na základě typu, který je předán.
Chcete-li začít, vytvořte nový soubor s názvem oznámení.css a importovat jej do Notification.jsx přidáním následujícího kódu na začátek.
importovat "./notification.css"
Pak dovnitř oznámení.css definujte základní styly pro komponentu oznámení:
.oznámení {
Zobrazit: flex;
flex-direction: řádek;
zarovnat-položky: flex-start;
vycpávka: 8px;
}
.notification__left {
Zobrazit: flex;
flex-direction: řádek;
vycpávka: 0px;
mezera: 8px;
okraj-pravý: 24px;
}
.notification__content {
Zobrazit: flex;
flex-direction: sloupec;
zarovnat-položky: flex-start;
vycpávka: 0px;
}
.notification__title {
rodina písem: "pohřbít";
styl fontu: normální;
tloušťka písma: 500;
velikost písma: 14px;
}
.notification__description {
rodina písem: "pohřbít";
styl fontu: normální;
tloušťka písma: 400;
velikost písma: 12px;
vycpávka: 0;
}
Poté můžete definovat styly pro různé typy oznámení přidáním následujícího kódu do souboru CSS.
.notification__success {
Pozadí: #f6fef9;
okraj: 1pxpevný#2f9461;
hraniční poloměr: 8px;
}
.notification__error {
Pozadí: #fffbfa;
okraj: 1pxpevný#cd3636;
hraniční poloměr: 8px;
}
.notification__warning {
Pozadí: #ffffcf5;
okraj: 1pxpevný#c8811a;
hraniční poloměr: 8px;
}
Výše uvedený kód stylizuje kontejner oznámení na základě předávaného typu.
Chcete-li upravit název, použijte následující styly.
.notification__title__success {
barva: #2f9461;
}
.notification__title__warning {
barva: #c8811a;
}
.notification__title__error {
barva: #cd3636;
}
Pro vlastní text popisu použijte tyto styly.
.notification__description__success {
barva: #53b483;
}
.notification__description__warning {
barva: #e9a23b;
}
.notification__description__error {
barva: #f34141;
}
A pro ikony použijte následující třídy.
.notification_icon_error {
barva: #cd3636;
}
.notification__icon__success {
barva: #2f9461;
}
.notification__icon__warning {
barva: #c8811a;
}
Poté v Oznámení komponentu, můžete podmíněně použít příslušnou třídu na základě typ rekvizita, takhle:
vývoznívýchozífunkceOznámení({type, title, description}) {
vrátit se (
`upozornění__${type}`}>
`notification__left`}>
`notification__icon__${type}`}/>
"notification__content">
`notification__title notification__title__${type}`}>{title}</div>
`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
`notification__icon__${type}`}/>
</div>
)
}
V této komponentě dynamicky nastavujete třídu v závislosti na typu jako např oznámení__úspěch nebo oznámení__chyba.
Chcete-li to vidět v akci, importujte komponentu Oznámení App.jsx a použijte jej následovně:
import Oznámení z'./Oznámení'funkceAplikace() {
vrátit se (
<>
typ="úspěch"
titul="Úkol splněn"
popis ="Váš úkol byl úspěšně dokončen."
/>
</>
)
}
vývoznívýchozí Aplikace
Nyní můžete předat jiný typ Oznámení komponentu a vykreslí příslušné oznámení, které odpovídá zprávě.
To je nezbytné pro dobrou uživatelskou zkušenost, protože uživatelé si zvykli spojovat různé barvy a styly s různými scénáři a je důležité tyto asociace používat konzistentně. Bylo by například matoucí dát uživateli vědět, že úspěšně nahrál fotografii, v červeném oznamovacím poli. Mohli by si myslet, že nahrávání selhalo, i když bylo úspěšné.
Přidání interaktivity do oznamovací komponenty
Naučili jste se, jak můžete použít rekvizity k vytvoření přizpůsobitelné komponenty oznámení. Abyste to posunuli ještě dále, můžete do této komponenty přidat přechody, aby byla poutavější. Můžete například použít animace CSS k posunutí oznamovací komponenty na obrazovku a jejímu vysunutí po uplynutí určité doby.