Boşlukların Tanımı
About this lesson
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 eklemek istediğiniz elementi seçin.
- Styling panelden padding alanına gelin.
- Eklemek istediğiniz padding değerlerini girin.
- Elemente top, right, bottom ve left’den aynı değeri girmek istiyorsanız top alanına istediğiniz değeri girin ve solda bulunan kilit ikonuna tıklayın.
Padding değerinin nasıl ekleneceğini öğrendik.
Proje içinde farklı ekranlarda aynı padding stilini kullanmak için eklediğimiz stili kaydedelim.
- Padding eklediğiniz elementi seçin.
- Layout panelde bulunan dot-dot-dot ikonuna tıklayın.
- Save as style’ı seçin.
- Stil ismini yazın ve kaydedin.
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.
Tanımlı Boşluk Stilleri
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
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.
Column
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
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
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
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.
None
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.
Padding
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
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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
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 eklemek istediğiniz elementi seçin.
- Styling panelden padding alanına gelin.
- Eklemek istediğiniz padding değerlerini girin.
- Elemente top, right, bottom ve left’den aynı değeri girmek istiyorsanız top alanına istediğiniz değeri girin ve solda bulunan kilit ikonuna tıklayın.
Padding değerinin nasıl ekleneceğini öğrendik.
Proje içinde farklı ekranlarda aynı padding stilini kullanmak için eklediğimiz stili kaydedelim.
- Padding eklediğiniz elementi seçin.
- Layout panelde bulunan dot-dot-dot ikonuna tıklayın.
- Save as style’ı seçin.
- Stil ismini yazın ve kaydedin.
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.
Tanımlı Boşluk Stilleri
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
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.
Column
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
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
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
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.
None
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.
Padding
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
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.
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 eklemek istediğiniz elementi seçin.
- Styling panelden padding alanına gelin.
- Eklemek istediğiniz padding değerlerini girin.
- Elemente top, right, bottom ve left’den aynı değeri girmek istiyorsanız top alanına istediğiniz değeri girin ve solda bulunan kilit ikonuna tıklayın.
Padding değerinin nasıl ekleneceğini öğrendik.
Proje içinde farklı ekranlarda aynı padding stilini kullanmak için eklediğimiz stili kaydedelim.
- Padding eklediğiniz elementi seçin.
- Layout panelde bulunan dot-dot-dot ikonuna tıklayın.
- Save as style’ı seçin.
- Stil ismini yazın ve kaydedin.
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.
Tanımlı Boşluk Stilleri
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
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.
Column
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
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
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
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.
None
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.
Padding
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
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.
Dosyalar
Kaynaklar
Sözlük
