Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı React için SCRO UI kütüphanesini tanıtmaktadır.
- Video, SCRO UI'nin Tailwind CSS'e benzer özelliklere sahip ancak React komponentleriyle uyumlu bir UI kütüphanesi olduğunu açıklamaktadır. Konuşmacı, kütüphanenin kurulumunu, temp providing kısmını ve temel kullanımını göstermektedir. Özellikle açılır kapanan menü oluşturma örneği üzerinden use disclosure, draver, overlay ve content gibi komponentlerin nasıl kullanılacağı adım adım anlatılmaktadır. Video, React uygulamalarında Tailwind CSS alternatifi olarak SCRO UI'nin avantajlarını vurgulamaktadır.
- Scra UI Tanıtımı
- Scra UI, React tatbikasyonunda çalışabilen bir UI kütüphanesidir ve tasarım anlamında Tailwind CSS'in neredeyse aynısıdır.
- Scra UI'nin Tailwind CSS'den ayrılan özelliği, her bir komponentin style komponent kullanarak tanımlanmış bir şekilde React uygulamasını kullanabilmesidir.
- Normalde Tailwind CSS'i kullanırken bir CSS dosyası üzerinde class'lara isim vererek CSS dosyalarını çağırabilir ve bu kodları ayrı bir komponente taşıyabilirsiniz.
- 00:58Scra UI Kurulumu
- Scra UI'nin bağımlılıkları yüklenirken temp providing kısmını yapabilirsiniz.
- Temp providing için bir temp ve temp provider tanımlamanız gerekiyor.
- App komponentini temp provider içerisinde çalıştırarak custom tem oluşturabilirsiniz.
- 02:45Scra UI Kullanımı
- Scra UI'daki komponentleri tek tek kullanarak açılır kapanan menü gibi özellikler ekleyebilirsiniz.
- Açılır kapanan menü için use disclosure kullanarak is open ve on open değişkenlerini tanımlayabilirsiniz.
- Butona tıklandığında açılır kapanan menü için draver komponentini kullanabilirsiniz.
- 04:32Draver Komponenti Özellikleri
- Draver komponenti için drawbody, draw content ve overlay gibi bileşenler kullanılır.
- Draver'ın içerisinde placement özelliği ile menü'nün sol veya sağ taraftan açılması sağlanabilir.
- Draver'ın içerisine content ekleyerek dinamik içerikler ekleyebilirsiniz.
- 07:15Scra UI Avantajları
- Scra UI, Tailwind CSS'e göre değişkenlik gösteren CSS'lerin bağımlılıkları farklı olabildiği için fazla bağımlılığa gerek duymadan aynı özelliklere sahip bir alternatif sunar.