Bu içerikte, Kuika'da Styling paneli üzerinden özel stiller oluşturup, bunları projenizde nasıl kullanacağınızı öğreneceğiz. Ön tanımlı stillere ek olarak, eklediğiniz her stil özel bir stildir ve bu stilleri isimlendirip kaydederek, projenizde tekrar tekrar kullanabilirsiniz. Bu, tasarım sürecinizi hızlandırır ve işinizi kolaylaştırır.
Bu öğrenme içeriğinde, Styling panelinde özel stillerle nasıl çalışıldığını öğreneceksiniz.
Ön tanımlı olarak gelen stiller haricinde eklediğiniz her stil özel bir stildir. Eklediğiniz stilleri Custom Style olarak isimlendirip kaydetmeniz geliştirdiğiniz proje içerisinde farklı ekranlarda bu stili tekrar kullanmak için aynı işlemleri yapmak yerine ilgili alandan seçerek hızlıca eklemenizi sağlar. Bu da sizin Kuika’da ekran tasarımı yaparken geçirdiğiniz süreyi kısaltarak işinizi kolaylaştırır.
Styling panelde yer alan Layout, Text, Fill, Border ve web özelinde Shadow alanı altında Custom Style alanı mevcuttur.
Birlikte geliştireceğimiz web ve mobil projesi için ön tanımlı olarak gelen stiller haricinde ihtiyaç duyduğumuz stillerle nasıl çalışacağınız konusunda örnek olması için bir kaç stil oluşturalım. İlk olarak web projemizi oluşturduk. Proje içine girdik. Layout bölümünden bir stil tanımlayarak başlayalım.
Ekrana sürükle-bırak ile Image elementi ekleyin. Element seçili durumdayken Styling panelde Layout'a gelin. Size alanında width ve height değerlerini 32 olarak tanımlayın. Px seçili olduğundan emin olun. Custom Style metninin sağında bulunan detay ikon butonuna tıklayın. Save as style’ı seçin ve Image32 olarak isimlendirip kaydedin.
Şimdi Text bölümünden bir stil tanımlayalım. Label elementini seçin.
Etiket yapısında bir Label kullanacağımız için buna uygun bir stil oluşturacağız. Styling panelde Text bölümüne gidin. Poppins, regular, 12 pixel ve siyah renkli olacak şekilde ilgili alanları doldurun. Custom Style yazının sağında bulunan detay ikonuna tıklayın, Save as style’ı seçin. İsimlendirin ve kaydedin.
Şimdi Fill bölümünden bir stil tanımlayalım.
Etiket yapısında kullanacağımız Label için arka plan rengi ekleyeceğiz. Bunun için Fill bölümüne gelin ve Color paneli açın. Ardından Hex alanına (ffecd0) renk kodunu ekleyin. Saved Colors altında ki + ikonuna tıklayarak rengi isimlendirip kaydedin.
Saved Color altında kaydettiğiniz renkleri liste ve grid olarak görüntüleyebilirsiniz.
Şimdi Border kısmında ihtiyacımız olan stilleri ekleyeceğiz. TextInput elementini seçin.
Input Border stili için Border paneline gelin. Color'dan beyaz rengi seçin. Width Top alanına 1 yazın ve kilit ikonuna tıklayın böylece tüm kenarlar için Border değeri tanımlamış olacaksınız. Ardından Radius top alanına 12 yazın ve kilit ikonuna tıklayın bu sayede tüm kenarlara 12 pixel değerinde radius vermiş olacaksınız. Style alanından düz çizgiyi seçtikten sonra stilinizi isimlendirin ve kaydedin.
Bu videonun içeriğinde kompleks stillerle çalışmanın temellerini öğrendin. Açıklama bölümünde yer alan içeriği takip ederek Bir Fikrim Var uygulamasının web ve mobil stillerine ulaşabilirsiniz.
Bu içerikte, Kuika'da Styling paneli üzerinden özel stiller oluşturup, bunları projenizde nasıl kullanacağınızı öğreneceğiz. Ön tanımlı stillere ek olarak, eklediğiniz her stil özel bir stildir ve bu stilleri isimlendirip kaydederek, projenizde tekrar tekrar kullanabilirsiniz. Bu, tasarım sürecinizi hızlandırır ve işinizi kolaylaştırır.
Bu öğrenme içeriğinde, Styling panelinde özel stillerle nasıl çalışıldığını öğreneceksiniz.
Ön tanımlı olarak gelen stiller haricinde eklediğiniz her stil özel bir stildir. Eklediğiniz stilleri Custom Style olarak isimlendirip kaydetmeniz geliştirdiğiniz proje içerisinde farklı ekranlarda bu stili tekrar kullanmak için aynı işlemleri yapmak yerine ilgili alandan seçerek hızlıca eklemenizi sağlar. Bu da sizin Kuika’da ekran tasarımı yaparken geçirdiğiniz süreyi kısaltarak işinizi kolaylaştırır.
Styling panelde yer alan Layout, Text, Fill, Border ve web özelinde Shadow alanı altında Custom Style alanı mevcuttur.
Birlikte geliştireceğimiz web ve mobil projesi için ön tanımlı olarak gelen stiller haricinde ihtiyaç duyduğumuz stillerle nasıl çalışacağınız konusunda örnek olması için bir kaç stil oluşturalım. İlk olarak web projemizi oluşturduk. Proje içine girdik. Layout bölümünden bir stil tanımlayarak başlayalım.
Ekrana sürükle-bırak ile Image elementi ekleyin. Element seçili durumdayken Styling panelde Layout'a gelin. Size alanında width ve height değerlerini 32 olarak tanımlayın. Px seçili olduğundan emin olun. Custom Style metninin sağında bulunan detay ikon butonuna tıklayın. Save as style’ı seçin ve Image32 olarak isimlendirip kaydedin.
Şimdi Text bölümünden bir stil tanımlayalım. Label elementini seçin.
Etiket yapısında bir Label kullanacağımız için buna uygun bir stil oluşturacağız. Styling panelde Text bölümüne gidin. Poppins, regular, 12 pixel ve siyah renkli olacak şekilde ilgili alanları doldurun. Custom Style yazının sağında bulunan detay ikonuna tıklayın, Save as style’ı seçin. İsimlendirin ve kaydedin.
Şimdi Fill bölümünden bir stil tanımlayalım.
Etiket yapısında kullanacağımız Label için arka plan rengi ekleyeceğiz. Bunun için Fill bölümüne gelin ve Color paneli açın. Ardından Hex alanına (ffecd0) renk kodunu ekleyin. Saved Colors altında ki + ikonuna tıklayarak rengi isimlendirip kaydedin.
Saved Color altında kaydettiğiniz renkleri liste ve grid olarak görüntüleyebilirsiniz.
Şimdi Border kısmında ihtiyacımız olan stilleri ekleyeceğiz. TextInput elementini seçin.
Input Border stili için Border paneline gelin. Color'dan beyaz rengi seçin. Width Top alanına 1 yazın ve kilit ikonuna tıklayın böylece tüm kenarlar için Border değeri tanımlamış olacaksınız. Ardından Radius top alanına 12 yazın ve kilit ikonuna tıklayın bu sayede tüm kenarlara 12 pixel değerinde radius vermiş olacaksınız. Style alanından düz çizgiyi seçtikten sonra stilinizi isimlendirin ve kaydedin.
Bu videonun içeriğinde kompleks stillerle çalışmanın temellerini öğrendin. Açıklama bölümünde yer alan içeriği takip ederek Bir Fikrim Var uygulamasının web ve mobil stillerine ulaşabilirsiniz.
