Basit, temiz kullanıcı arabirimi öğeleri, tasarımınızı tazeleyebilir ve web sitenize veya uygulamanıza bir kalite dokunuşu ekleyebilir.

Blueprint UI, modern web uygulamaları oluşturmak için bir dizi yeniden kullanılabilir bileşen ve stil sağlayan popüler bir React UI araç takımıdır. Blueprint UI'nin temel özelliklerinden biri, kullanıcılara bilgi ve geri bildirim göstermek için gerekli bileşenler olan açılır pencere, uyarı ve tost oluşturma desteğidir.

Blueprint Kullanıcı Arayüzünü Yükleme

Blueprint UI'yi kullanmaya başlamak için önce onu yüklemeniz gerekir. Bunu, seçtiğiniz herhangi bir paket yöneticisini kullanarak yapabilirsiniz.

kullanarak yüklemek için npm, JavaScript paket yöneticisi, terminalinizde aşağıdaki komutu çalıştırın:

npm kurulumu @blueprintjs/core

Blueprint UI'yi yükledikten sonra, CSS dosyalarını kitaplıktan içe aktarmalısınız:

@içe aktarmak"normalleştir.css";
@içe aktarmak"@blueprintjs/core/lib/css/blueprint.css";
@içe aktarmak"@blueprintjs/icons/lib/css/blueprint-icons.css";
instagram viewer

Bu dosyaları içe aktararak, Blueprint UI stillerini Blueprint UI'nin sunduğu bileşenlerle entegre edebileceksiniz.

Blueprint Kullanıcı Arayüzünü Kullanarak Popover Oluşturma

Popover'lar, kullanıcı bir öğenin üzerine geldiğinde veya öğeyi tıkladığında görünen araç ipuçlarıdır. Kullanıcıya ek bilgi veya seçenekler sağlarlar.

React uygulamanızda Blueprint UI kullanarak popover'lar oluşturmak için Blueprint UI'yi yüklemeniz gerekir Popover2 bileşen.

Bunu yapmak için terminalinizde aşağıdaki kodu çalıştırın:

npm kurulum --save @blueprintjs/popover2

Paket stil sayfasını CSS dosyanıza aktardığınızdan emin olun:

@içe aktarmak"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Stil sayfasını içe aktardıktan sonra, Popover2 uygulamanızda popover'lar oluşturmak için bileşen.

Örneğin:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Düğme } itibaren"@blueprintjs/çekirdek";
içe aktarmak { Popover2 } itibaren"@blueprintjs/popover2";
işlevUygulama() {
sabit popoverContent = (




Açılır Başlık</h3>




Bu, popover içindeki içeriktir.</p>
 </div>
 );


geri dönmek (









ihracatvarsayılan Uygulama;

Bu kod, kullanarak bir popover oluşturur. Popover2 bileşen. Ayrıca bir tanımlar popoverİçeriği popover içeriği için JSX kodunu içeren değişken.

bu Popover2 bileşen alır popoverİçeriği onun değeri olarak içerik pervane bu içerik prop, açılır pencerede görüntülenen içeriği belirtir. Burada, Popover2 bileşen bir sarar Düğme bileşen. Bu, düğmeyi tıklattığınızda açılır pencerenin görüntülenmesine neden olur.

Popover, burada gösterildiği gibi basit görünüyor:

Bir ileti geçirerek popover içeriğine stil verebilirsiniz. sınıf adı desteklemek popoverİçeriği JSX kodu:

sabit popoverContent = (
'popover'>
Açılır Başlık</h3>




Bu, popover içindeki içeriktir.</p>
 </div>
);

Ardından, CSS dosyanızda CSS sınıfını tanımlayabilirsiniz:

.popover {
dolgu malzemesi: 1rem;
arka plan rengi: #e2e2e2;
font ailesi: el yazısı;
}

Şimdi popover biraz daha iyi görünmelidir:

bu Popover2 bileşeni, onu ihtiyaçlarınıza göre yapılandırmanıza yardımcı olacak bazı aksesuarlar alır. Bu aksesuarlardan bazıları popoverSınıfAdı, onInteraction, açık, en az, Ve atama.

bu atama prop, popover'ın hedef öğeye göre tercih edilen konumunu belirler. Kullanılabilir değerleri şunlardır:

  • Oto
  • otomatik başlatma
  • otomatik bitiş
  • tepe
  • en iyi başlangıç
  • üst uç
  • alt
  • alt başlangıç
  • alt uç
  • Sağ
  • sağ başlangıç
  • sağ uç
  • sol
  • sol başlangıç
  • sol uç

İle popoverSınıfAdı, popover öğesi için bir CSS sınıf adı tanımlayabilirsiniz. Prop'ı kullanmak için önce CSS dosyanızda bir CSS sınıfı oluşturacaksınız.

Örneğin:

.özel popover {
arka plan rengi: #e2e2e2;
kutu gölgesi: 0 10piksel 15piksel-3 pikselrgb(0 0 0 / 0.1);
sınır yarıçapı: 12piksel;
dolgu malzemesi: 1rem;
}

CSS sınıfını oluşturduktan sonra, popoverSınıfAdı özel stili Popover2 bileşenine uygulamak için prop:

 içerik={popoverContent}
 yerleştirme="alt uç"
 popoverClassName="özel popover"
 minimum={doğru}
>

bu en az prop, popover'ın stilini kontrol eder. Prop bir boolean değeri kabul eder. Doğru olarak ayarlanırsa, açılır pencere minimum stile sahip olur, ok olmaz ve basit bir kutu görünümü olur.

Uyarı Oluşturma

Uyarılar, kullanıcıyı önemli bilgiler veya eylemler hakkında bilgilendirmek için ekranda görünen bildirimlerdir. Genellikle hata mesajlarını, başarı mesajlarını veya uyarıları görüntülemek için kullanılırlar.

Blueprint UI'de uyarı oluşturmak şuna benzer: Chakra UI kullanarak uyarılar oluşturma. Blueprint UI kullanarak React uygulamanızda bir uyarı oluşturmak için Alert bileşenini kullanacaksınız.

İşte bir örnek:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Uyarı, Düğme } itibaren"@blueprintjs/çekirdek";
işlevUygulama() {
sabit [isOpen, setIsOpen] = React.useState(YANLIŞ);


sabit koluAçık = () => {
 setIsOpen(doğru);
 };


sabit eleKapat = () => {
 setIsOpen(YANLIŞ);
 };


geri dönmek (




"Kapalı">
Bu bir uyarı mesajıdır</p>
 </Alert>




ihracatvarsayılan Uygulama;

Bu örnek, nasıl içe aktarmanız gerektiğini gösterir. Uyarı gelen bileşen @blueprintjs/çekirdek paket. bu Uyarı bileşen, ekranda bir uyarı mesajı oluşturur. Ayrıca üç sahne alır: açık, onClose, Ve onaylaDüğmeMetin.

bu açık prop, uyarının görünür olup olmadığını belirler. Uyarıyı görüntülemek için true, gizlemek için false olarak ayarlayın. bu onClose prop, bir kullanıcı uyarıyı kapattığında çalışan bir geri arama işlevidir.

Son olarak, onaylaDüğmeMetin prop, onay düğmesinde görüntülenen metni belirler.

Bu örnekteki uyarı bildirimi şöyle görünecektir:

Blueprint UI ile Tost Oluşturma

Tostlar, kullanıcıyı önemli bilgiler veya olaylar hakkında bilgilendirmek için ekranda görünen bildirimlerdir. Uyarılara benzerler ancak genellikle daha az müdahalecidirler ve hızla kaybolurlar.

React uygulamanızda Blueprint UI kullanarak tost oluşturmak için Bindirme Tost Makinesi bileşen. bu Bindirme Tost Makinesi bileşeni, daha sonra ayrı tostlar oluşturmak için kullanılan bir Toaster örneği oluşturur.

Örneğin:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { OverlayToaster, Düğme } itibaren"@blueprintjs/çekirdek";
sabit toasterInstance = OverlayToaster.create({ konum: "sağ üst" });


işlevUygulama() {
sabit Toast'ı göster = () => {
 toasterInstance.show({
 İleti: "Bu bir tost",
 niyet: "öncelik",
 zaman aşımı: 3000,
 isCloseButtonGösterilen: YANLIŞ,
 simge: "yer imi",
 });
 };


geri dönmek (






ihracatvarsayılan Uygulama;

Yukarıdaki kod bloğu, OverlayToaster.create ekmek kızartma makinesi örneğini oluşturma yöntemi ve konumunu kullanarak belirtir konum pervane

Ayrıca işlevi tanımlar tost göster. Bu işlev, göstermek yöntemi ekmek kızartma makinesi Örneği çağrıldığında tostu görüntülemek için. bu göstermek yöntemi ile bir nesne alır İleti, niyet, zaman aşımı, isCloseButtonGösterilen, Ve simge sahne.

bu İleti prop, tostun metin içeriğini belirtirken, niyet prop tostun türünü belirtir. Tostun tarzı, değerine göre değişir.

Tost bildiriminin ne kadar süreyle görüntüleneceğini kontrol edebilirsiniz. zaman aşımı pervane bu simge prop, tost içinde görüntülenecek bir simge öğesini belirtir. İle isCloseButtonGösterilen prop, kapat düğmesinin tostta görünüp görünmediğini kontrol edebilirsiniz.

Yukarıdaki kod bloğu, aşağıdaki resimde görüldüğü gibi, düğmeye tıkladığınızda güzel bir tost üretecektir.

React uygulamanızda çekici tost bildirimleri oluşturmak istiyorsanız, Blueprint UI harika bir seçenektir. Uygulamanızın stiline uyan bildirimler oluşturmak için kullanabileceğiniz çok çeşitli önceden tanımlanmış bileşenler sağlar.

Ancak, Blueprint UI'nin tüm özelliklerini gerektirmeyen küçük bir proje üzerinde çalışıyorsanız, React Toastify, güzel bildirimler oluşturmaya yönelik hafif bir alternatiftir.

Tostlar, Popovers ve Uyarılarla Kullanıcı Deneyimini Geliştirme

Blueprint UI kullanarak React uygulamanızda açılır pencereleri, uyarıları ve tostları nasıl oluşturacağınızı öğrendiniz. Bu bileşenler, kullanıcılara bilgi ve geri bildirim sağlamak için gereklidir ve uygulamanızın kullanıcı deneyimini önemli ölçüde artırabilir. En az çaba ve özelleştirme ile elde ettiğiniz bilgileri kullanarak bu bileşenleri kolayca oluşturabilirsiniz.