Bu kitaplık ile React sitenizde tutarlı, çekici uyarılar alın.
Uyarılar, bir kullanıcıya önemli bilgileri iletmek için bir web sitesinde/web uygulamasında görüntülenen mesajlardır. Web uygulamalarında çok önemli bir rol oynarlar. React'te uyarı oluşturmanın birçok yolu vardır; Chakra UI, süreci kolay ve verimli hale getirir.
Chakra UI, bir dizi özelleştirilebilir ve erişilebilir UI bileşenleri sağlayan React için popüler bir bileşen kitaplığıdır.
Çakra Kullanıcı Arayüzünü Yükleme
Chakra UI kitaplığını kullanmak için, birçok tepki bileşen kitaplığından biri, önce yüklemeniz gerekir. node.js projenizin dizininde aşağıdaki terminal komutunu çalıştırarak kurabilirsiniz:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternatif olarak, Yarn'ı kullanarak Chakra UI'yi kurabilirsiniz. Bunu yapmak için aşağıdaki komutu çalıştırın:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Çakra Kullanıcı Arayüzünü Ayarlama
Chakra UI'yi yükledikten sonra, uygulamanızda kullanılabilir hale getirmelisiniz. Bunu yapmak için, ayarlamanız gerekir
Çakra Sağlayıcı bileşen.bu Çakra Sağlayıcı bileşeni, Chakra UI kitaplığının sağladığı üst düzey bir bileşendir. Tüm uygulamayı sarar ve tüm bileşenlerine tema ve stil bağlamı sağlar.
kurmak için Çakra Sağlayıcı bileşen, şu adresten içe aktarın: @chakra-ui/tepki:
içe aktarmak Tepki itibaren'tepki'
içe aktarmak ReactDOM itibaren"react-dom/client"
içe aktarmak Uygulama itibaren'./Uygulama'
içe aktarmak { Çakra Sağlayıcı } itibaren"@chakra-ui/tepki"
ReactDOM.createRoot(belge.getElementById('kök') gibi HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
bu Çakra Sağlayıcı bileşen bir tema pervane geçmek tema desteklemek Çakra Sağlayıcı bileşeni, uygulamadaki tüm Chakra UI bileşenlerinin sağlanan temaya ve stil bağlamına erişebilmesini sağlar. bu tema destek isteğe bağlıdır; geçmezseniz, Chakra UI varsayılan bir tema kullanır.
Uyarı Bileşenlerini Kullanarak Özel Uyarı Oluşturma
Chakra UI, özel bir uyarı oluşturmanıza izin veren dört bileşen sunar: Uyarı, uyarı simgesi, Uyarı Başlığı, Ve Uyarı Açıklaması.
Uyarı mesajınızı oluşturmak için bu bileşenleri Chakra UI kitaplığından içe aktarın ve aşağıdaki gibi kullanın:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {Alert, AlertIcon, AlertDescription, AlertTitle} itibaren"@chakra-ui/tepki"işlevUygulama() {
geri dönmek ('başarı'> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
</div>
)
}
ihracatvarsayılan Uygulama
Bileşenleri içe aktardıktan sonra, Uyarı bileşen, kullanıcıya bir mesaj görüntüler. bir var durum prop, mesajın bir başarı mesajı olduğunu gösteren "success" olarak ayarlandı.
Diğer üç durum vardır: "bilgi", "hata" ve "uyarı". Uyarının kullandığı renk şeması ve simge, mesaj durumuna bağlı olacaktır.
bu Uyarı bileşen üç çocuk içerir: uyarı simgesi, Uyarı Başlığı, Ve Uyarı Açıklaması. bu uyarı simgesi bileşeni, mesajın yanında küçük bir simge görüntüler, Uyarı Başlığı ana mesajı görüntüler ve Uyarı Açıklaması mesajın daha ayrıntılı bir açıklamasını görüntüler.
Önceki kod bloğu, şuna benzeyen bir uyarı oluşturacaktır:
Uyarı Mesajlarını Variant Prop Kullanarak Özelleştirme
Uyarı mesajının görünümünü özelleştirmek için, değişken pervane Uyarı bileşen. bu değişken prop, uyarı mesajının görsel görünümünü tanımlar ve ona ilettiğiniz değere göre mesajın renk düzenini, simgesini ve yazı tipi ağırlığını belirler.
bu değişken prop, aşağıdakiler gibi birkaç dize değerini kabul eder: hemen göze çarpmayan, sağlam, sol aksan, üst aksan, sağ aksan, Ve alt aksan. Her değer, uyarı mesajının farklı bir görsel stilini temsil eder.
Aşağıda, farklı değişkenlere sahip dört uyarı bileşenine bir örnek verilmiştir:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} itibaren"@chakra-ui/tepki"işlevUygulama() {
geri dönmek ('merkez' boşluk='3' yön='kolon' mt='4'> 'başarı' varyant='sağlam'> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
'başarı' varyant='hemen göze çarpmayan'> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
'başarı' varyant="üst aksan"> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
'başarı' varyant="sol aksan"> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
</Flex>
</div>
)
}
ihracatvarsayılan Uygulama
Yukarıdaki kod bloğunu oluşturmak, aşağıdaki gibi özel bir uyarı görüntüler:
className Prop'ı Kullanarak Uyarı Mesajlarınızı Özelleştirme
Uyarı mesajlarının varsayılan görünümüne bağlı kalmak yerine, sınıf adı pervane sen kullan sınıf adı bir CSS sınıfı tanımlamak ve özel stilinizi uyarı mesajına uygulamak için prop.
Örneğin:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {Alert, AlertIcon, AlertDescription, AlertTitle} itibaren"@chakra-ui/tepki"işlevUygulama() {
geri dönmek ('başarı' sınıfAdı='uyarı'> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription>
</Alert>
</div>
)
}
ihracatvarsayılan Uygulama;
Bu örnekte, alert bileşeninin bir CSS sınıfı "alert" vardır. CSS sınıfını tanımladıktan sonra CSS dosyanızda stillerinizi tanımlayabilirsiniz.
Şöyle:
.uyarı {
kırmızı renk;
yazı tipi ailesi: el yazısı;
ekran: esnek;
esnek yön: sütun;
açıklık: 0.4rem;
}
Yukarıdaki kod, CSS stillerini uyarı bileşenine uygulayacaktır. Chakra UI tarzı donanımlara aşina iseniz, uyarı mesajlarını stilize etmek için kullanmalısınız. sınıf adı pervane
Yukarıdaki CSS stillerini uyguladıktan sonra, uyarı bileşeni aşağıdaki resimde görüldüğü gibi görünecektir:
Kullanıcı Olaylarına Yanıt Olarak Uyarı Mesajlarını Tetikleme
Ekranda sürekli olarak bir uyarı mesajı görüntüleyen bir uyarı bileşeni oluşturdunuz. Bununla birlikte, kullanıcı deneyimini geliştirmek için, bir kullanıcının başlattığı belirli olaylara yanıt olarak uyarı mesajını tetikleyebilirsiniz. JavaScript olay Dinleyicilerini kullanma. Bu olaylar, bir düğmeyi tıklamayı, form göndermeyi veya bir hatayla karşılaşmayı içerebilir.
Olaylara yanıt olarak uyarı mesajınızı tetiklemek için React state ve görüntülemek Chakra UI bileşenlerinin pervanesi.
Örneğin:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {Alert, AlertIcon, AlertDescription, AlertTitle, Düğme, KapatDüğmesi} itibaren"@chakra-ui/tepki"işlevUygulama() {
sabit [ekran, Ekranı ayarla] = React.useState('hiçbiri');işlevbildirmek() {
Ekranı ayarla('esnek');
}işlevkapalı() {
Ekranı ayarla('hiçbiri');
}geri dönmek (
"uygulama">'başarı' display={display} varyantı='sağlam'> hoşgeldiniz!!!</AlertTitle> burada olman güzel </AlertDescription> 'mutlak' üst="6 piksel" doğru="6 piksel" onClick={kapat}/>
</Alert>
ihracatvarsayılan Uygulama
Bu kod bloğu, bildirim ekranının durumunu aşağıdakilerle yönetir: kullanımDevlet kanca. Bildirim ekranının başlangıç durumunu, bildirimi gizleyen "yok" olarak ayarlar.
kullanıcı tıkladığında Düğme, çağırır bildirmek işlev. Bildirim işlevini çağırmak, görüntülemek durumu "yok"tan "esnek"e çevirerek bildirimi görünür hale getirin.
kullanıcı tıkladığında KapatDüğmesi, kapatma işlevini çağırır. Ekranın durumunu, bildirimi gizleyen "yok" olarak değiştirir.
Artık Özelleştirilebilir Uyarılar Oluşturabilirsiniz
Artık, Chakra UI kullanarak React uygulamanızda nasıl özel uyarı oluşturacağınızı öğrendiniz. Chakra UI ile React'te özel uyarılar oluşturmak kolay ve sezgiseldir, bu da kullanıcılarımıza net ve özlü bilgiler vermemizi sağlar. Chakra UI, harika React uygulamaları oluşturmanıza yardımcı olmak için birçok özelleştirilebilir ve erişilebilir UI bileşeni sağlar.
