Bu içerikte, elementler arasındaki iç boşlukların (padding) nasıl ayarlanacağını öğreniyoruz. Padding, elementin iç kenarından dış çizgiye kadar olan mesafeyi belirler ve sayfa düzeni için kritik öneme sahiptir. Özel padding değerleri, Styling panel üzerinden elemente eklenir; tüm kenarlara aynı değeri uygulamak için kilit ikonu kullanılır. Ayrıca, projede tekrar kullanmak üzere bir stili kaydedebilirsiniz. Hazır padding stilleri arasında, elementler için varsayılan olarak gelen çeşitli padding değerleri bulunur, örneğin Row ve Column elementleri 8 piksel, Button elementi farklı değerlerde padding içerir. Tanımlı stiller, Layout düzenlemelerinde kolaylık sağlar ve her senaryoya uygun bir stil sunar. Bu bilgilerle, tasarımlarınızda boşlukları etkili bir şekilde yönetebilirsiniz.
Bu öğrenme içeriğinde, elementler arasındaki boşlukların nasıl tanımlanabileceğini öğreneceğiz.
Tasarım yaparken kullanacağınız padding (iç boşluk) değerleri sayfa düzeninin oluşmasında önemli bir unsurdur. Padding, element ile Border yani kenar çizgisi arasında bulunan iç boşluğu kontrol eder.
Şimdi, elementlere özel aynı veya farklı padding değerlerinin nasıl eklendiğini adım adım inceleyelim:
Padding değerinin nasıl ekleneceğini öğrendik.
Proje içinde farklı ekranlarda aynı padding stilini kullanmak için eklediğimiz stili kaydedelim.
Custom Style ile yeni bir padding stili oluşturduk. Şimdi, tanımlı olarak gelen boşluk stillerinin değerlerini ve hangi elementlerde kullanabileceğini inceleyelim.
Layout bölümünde hazır gelen padding stillerini bulabilirsiniz. Layout’da toplamda 9 hazır stil mevcut. Bu 9 stilden 8 tanesinde padding değeri bulunuyor.
Şimdi gelin bunları inceleyelim.
Row elementini ekrana sürükle-bırak ile eklediğinizde varsayılan olarak Row stili ile birlikte gelir. Bu varsayılan stil, top, right, bottom ve left’den 8 piksel padding değerine sahiptir.
Row elementinin kolonlarında varsayılan tanımlı olarak gelen stildir. Bu varsayılan stil, top, right, bottom ve left’den 8 piksel padding değerine sahiptir.
Button elementi için tanımlanmış bir stildir. Bu stil, top ve bottom’dan 8 piksel, right ve left’den 16 piksel değerlerine sahip olarak gelir.
Image elementini ekrana sürükle-bırak ile eklediğinizde Image stili varsayılan tanımlı olarak gelmez. Layout bölümünden ekleyebilirsiniz. Bu stilde, top, right, bottom ve left’den 0 piksel padding değeri tanımlıdır.
Input kategorisi altında bulunan Location Search, Text Input, Number Input, Email, Text Area, Currency, Password, Percent, URL, Auto Complete, Selectbox, Multiselect elementlerinden herhangi birini sürükle-bırak ile eklediğinizde Input stili varsayılan olarak gelir. Bu varsayılan stil, top, right, bottom ve left’den 8 piksel padding değerine sahiptir.
Bazı elementleri ekrana sürükle-bırak ile eklediğinizde none stili ile gelir. None stili element ile kenar çizgisi arasında boşluk bırakmak istemediğiniz senaryolarda kullanabileceğiniz hazır stildir. Bu varsayılan stil, top, right, bottom ve left’den 0 piksel padding değerine sahiptir.
Element ile kenar çizgisi arasında dört yönde sekizer (8) piksel boşluk olmasını istediğiniz senaryolarda kullanabileceğiniz hazır stildir.
Table elementini ekrana eklediğinizde bu stille birlikte gelir. Bu varsayılan stil, top, right, bottom ve left’den 0 piksel padding değerine sahiptir.
Tanımlı padding stillerini detaylarını inceledik. Artık boşluklar ile çalışmaya hazırsınız.
