Blueprint kitaplığını kullanın ve bir daha asla çekici, erişilebilir bir web sitesi oluşturmak için uğraşmayacaksınız.
Sıfırdan bir React uygulaması oluşturmak, özellikle bileşenlerin şekillendirilmesi söz konusu olduğunda, zaman alıcı ve zorlu bir görev olabilir. Blueprint UI Toolkit'in kullanışlı olduğu yer burasıdır. Araç seti, React uygulamalarınız için tutarlı ve görsel olarak çekici arayüzler oluşturmanıza yardımcı olabilecek bir dizi yeniden kullanılabilir UI bileşenidir.
Blueprint UI Toolkit'in temelleri ve basit bir React uygulaması oluşturmak için nasıl kullanılacağı hakkında bilgi edinin.
Blueprint UI Toolkit bir React UI bileşen kitaplığı. Kullanımı ve özelleştirilmesi kolay, önceden hazırlanmış bileşenlerden oluşan bir koleksiyon içerir. Bu önceden tasarlanmış bileşenleri kutudan çıkar çıkmaz kullanabilir veya özel ihtiyaçlarınıza uyacak şekilde değiştirebilirsiniz.
Blueprint UI Toolkit'in bileşenleri arasında Düğmeler, Formlar, Kipler, Gezinme ve Tablolar bulunur. Her bileşeni sıfırdan tasarlamanız ve oluşturmanız gerekmediğinden, bu bileşenleri kullanmak size zaman ve emek kazandırabilir.
Blueprint UI Toolkit'i kullanmaya başlamak için yapmanız gerekenler bir React uygulaması oluştur.
Projeniz kurulduktan sonra, seçtiğiniz herhangi bir Düğüm paketi yükleyicisini kullanarak Blueprint UI Toolkit'i kurabilirsiniz. Blueprint UI Toolkit'i npm kullanarak kurmak için terminalinizde aşağıdaki komutu çalıştırın:
npm kurulumu @blueprintjs/core
Bunun yerine yarn kullanmak için şu komutu çalıştırın:
iplik ekleme @blueprintjs/core
Blueprint UI Toolkit'i yükledikten sonra, seçtiğiniz bileşenleri React uygulamanızda kullanabilirsiniz.
Bileşenleri kullanmadan önce Blueprint UI Toolkit'ten CSS dosyalarını dahil edin:
@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";
Yukarıdaki kod bloğunu CSS dosyanıza eklemek, Blueprint UI stillerini bileşenlerine uygular.
Örneğin, uygulamanıza bir düğme eklemek için Düğme Blueprint UI Toolkit'ten bileşen:
içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Düğme } itibaren"@blueprintjs/çekirdek";işlevUygulama() {
geri dönmek (
ihracatvarsayılan Uygulama;
Bu kod bloğu, uygulamanıza şu düğmeyi kullanarak bir düğme ekler: Düğme bileşen. bu Düğme bileşen gibi sahne alır niyet, metin, simge, küçük, Ve büyük.
bu niyet prop, arka plan rengine yansıyan düğmenin doğasını tanımlar. Bu örnekte, düğmenin bir başarı ona yeşil bir arka plan rengi veren niyet. Blueprint UI, aşağıdakiler de dahil olmak üzere birkaç temel amaç sunar: öncelik (mavi), başarı (yeşil), uyarı (turuncu) ve tehlike (kırmızı).
Düğmenin içinde görünen metni ile belirtebilirsiniz. metin pervane Ayrıca düğmeyi kullanarak simgeler ekleyebilirsiniz. simge pervane yanında simge pervane sağ simge düğmenin sağ tarafına simge ekleyen prop.
Son olarak, büyük Ve küçük boolean props, düğmenin boyutunu belirtir. bu büyük pervane düğmeyi büyütürken, küçük pervane daha küçük yapar.
Önceki kod bloğu şuna benzeyen bir düğme üretecektir:
Şunu da kullanabilirsiniz: ÇapaDüğmesi uygulamanızda bir düğme oluşturmak için bileşen. bu ÇapaDüğmesi bileşeni, açıkça bir bağlantı olarak kullanılmak üzere tasarlanmış, Button bileşeninin özel bir sürümüdür.
Bu bileşen, Button bileşeniyle aynı özelliklerin birçoğunu kabul eder. metin, büyük, küçük, niyet, Ve simge. Ayrıca kabul eder href Ve hedef sahne.
bu href prop, düğmenin bağlandığı URL'yi ve hedef prop, bağlantı için hedef pencereyi veya çerçeveyi belirtir:
içe aktarmak Tepki itibaren"tepki";
içe aktarmak { ÇapaDüğmesi } itibaren"@blueprintjs/çekirdek";işlevUygulama() {
geri dönmek (
href=" https://example.com/"
niyet="öncelik"
metin="Beni tıkla"
hedef="_boşluk"
/>
</div>
);
}
ihracatvarsayılan Uygulama;
Yukarıdaki bu kod bloğu, ÇapaDüğmesi bileşen. bileşenin href prop değeri “ https://example.com/” ve hedef prop değeri "_blank", yani bağlantı başka bir tarayıcı sekmesinde veya penceresinde açılacaktır.
Blueprint UI Toolkit'in diğer bir temel bileşeni, Kart bileşen. Bu, bilgileri çekici bir görsel şekilde görüntüleyen yeniden kullanılabilir bir bileşendir.
Kart bileşeni iki destek alır etkileşimli Ve yükseklik. bu yükseklik prop, kartın gölge derinliğini kontrol eder, daha yüksek değerler daha belirgin bir gölge efekti üretir.
bu etkileşimli prop bir boolean değeri kabul eder. Doğru olarak ayarlandığında, kart üzerinde fareyle üzerine gelme ve tıklama etkileşimlerini etkinleştirerek, kartın kullanıcı girişine yanıt vermesine olanak tanır.
Örneğin:
içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Kart, Yükseklik } itibaren"@blueprintjs/çekirdek";işlevUygulama() {
geri dönmek (doğru} yükseklik={Yükseklik. İKİ}> Bu bir Kart</h2>
Bu biraz içerik içinde kartım</p>
</Card>
</div>
);
}
ihracatvarsayılan Uygulama;
Bu örnekte, Kart bileşenin bir başlığı ve bazı içeriği vardır. bu etkileşimli pervane ayarlandı doğru.
Ayrıca, Yükseklik gelen bileşen @blueprintjs/çekirdek. bu Yükseklik bileşen, bir bileşenin gölge derinliğini ayarlamak için kullanabileceğiniz bir dizi önceden tanımlanmış değeri tanımlayan bir sıralamadır.
İşte kullanılabilir değerler Yükseklik Sıralama:
- Yükseklik. SIFIR: Bu değer, gölge derinliğini 0'a ayarlar ve bileşene uygulanmış gölge olmadığını belirtir.
- Yükseklik. BİR: Bu değer, gölge derinliğini 1 olarak ayarlar.
- Yükseklik. İKİ: Bu değer, gölge derinliğini 2 olarak ayarlar.
- Yükseklik. ÜÇ: Bu değer, gölge derinliğini 3 olarak ayarlar.
- Yükseklik. DÖRT: Bu değer, gölge derinliğini 4 olarak ayarlar.
- Yükseklik. BEŞ: Bu değer, gölge derinliğini 5 olarak ayarlar.
Yukarıdaki kod bloğunu oluşturmak, ekranınızda şuna benzer bir görüntü görüntüler:
Blueprint UI Toolkit bileşenlerinin özelleştirilmesi kolaydır. Geleneksel CSS kullanabilirsiniz bileşenlerin görünümünü değiştirmek için veya davranışlarını değiştirmek için sağlanan destekleri kullanabilirsiniz.
Örneğin, bir düğmenin görünümünü özelleştirebilirsiniz. sınıf adı destek:
içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Düğme } itibaren"@blueprintjs/çekirdek";işlevUygulama() {
geri dönmek (
ihracatvarsayılan Uygulama;
Yukarıdaki kod bloğu, düğmeye özel bir sınıf uygulayarak görünümünü CSS kullanarak değiştirmenize olanak tanır:
.düğmem{
sınır yarıçapı: 10piksel;
dolgu malzemesi: 0.4rem 0.8rem;
}
Bu stilleri uygulamak, düğmenizin biraz şöyle görünmesine neden olur:
Blueprint UI için Çok Daha Fazlası Var
Blueprint UI, Alert, Popover, tost vb. gibi yukarıda belirtilenden daha fazla bileşen sunar. Ancak sağlanan bilgilerle Blueprint UI kullanarak basit bir React uygulaması oluşturabilirsiniz.
React uygulamanızı farklı yöntemler kullanarak şekillendirebilirsiniz. JS kitaplıklarında duygu, stil bileşenleri vb. gibi geleneksel CSS, SASS/SCSS, Tailwind CSS ve CSS'yi kullanabilirsiniz.
