Grid

Yaklaşık 4 dk okuma

TwGrid · Kategori: Konteynırlar · Kapsayıcı (içine başka widget yerleştirilebilir)

Ayarlar

Bu ayarlar widget seçiliyken sağ özellikler panelinde yer alır. Varsayılan değer, widget sayfaya ilk eklendiğindeki değerdir.

Düzen

Ayar	Tip	Varsayılan	Açıklama
Yerleşim Şablonu layoutPreset	Izgara şablonu	—	Görsel sütun yerleşimi. Sütun şablonları küçük ekranlarda tek sütuna iner. Bir şablon seçildiğinde Sütun Sayısı ve Sütun (Mobil/Tablet/Masaüstü) değerleri yok sayılır; Sütun Sayısını tekrar kullanmak için Özel seçin.
Sütun (Mobil) columnsMobile	Sayı	—	Ekran boyutuna göre sütun sayısı (1-12). Mobil tüm ekranlara, Tablet orta ve üzeri, Masaüstü geniş ekranlara uygulanır; boş bırakılan değer bir küçük ekranınkini kullanır. Herhangi biri doluysa Sütun Sayısı yok sayılır; Yerleşim Şablonu seçiliyse bu değerler yok sayılır.
Sütun (Masaüstü) columnsDesktop	Sayı	—	Ekran boyutuna göre sütun sayısı (1-12). Mobil tüm ekranlara, Tablet orta ve üzeri, Masaüstü geniş ekranlara uygulanır; boş bırakılan değer bir küçük ekranınkini kullanır. Herhangi biri doluysa Sütun Sayısı yok sayılır; Yerleşim Şablonu seçiliyse bu değerler yok sayılır.
Satır Boşluğu (px) rowGapPx	Sayı	—	Yalnızca satırlar veya sütunlar arası boşluk (piksel). Boşluk (px) ve Gap değerini ilgili yönde geçersiz kılar.
Dikey Hizalama alignItems	Seçim	—	Hücre içindeki öğelerin dikey hizası. Varsayılan, öğeleri hücre yüksekliğine uzatır. Seçenekler: "" Varsayılan, start Başlangıç, center Orta, end Son, stretch Uzat
Min. Öğe Genişliği (px) minItemWidth	Sayı	240	Otomatik sığdır şablonunda her öğenin minimum genişliği. Sığmayan öğeler yeni satıra geçer.
Sütun (Tablet) columnsTablet	Sayı	—	Ekran boyutuna göre sütun sayısı (1-12). Mobil tüm ekranlara, Tablet orta ve üzeri, Masaüstü geniş ekranlara uygulanır; boş bırakılan değer bir küçük ekranınkini kullanır. Herhangi biri doluysa Sütun Sayısı yok sayılır; Yerleşim Şablonu seçiliyse bu değerler yok sayılır.
Boşluk (px) gapPx	Sayı	—	Öğeler arası boşluk (piksel). Girildiğinde Gap ölçek değerinin yerine geçer. Boş bırakılırsa Gap kullanılır.
Sütun Boşluğu (px) columnGapPx	Sayı	—	Yalnızca satırlar veya sütunlar arası boşluk (piksel). Boşluk (px) ve Gap değerini ilgili yönde geçersiz kılar.
Yatay Hizalama justifyItems	Seçim	—	Hücre içindeki öğelerin yatay hizası. Varsayılan, öğeleri hücre genişliğine uzatır. Seçenekler: "" Varsayılan, start Başlangıç, center Orta, end Son, stretch Uzat

Diğer ayarlar

Ayar	Tip	Varsayılan	Açıklama
Sütun Sayısı columnCount	Sayı	12	Eşit genişlikte sütun sayısı. Yerleşim Şablonu seçiliyken veya Sütun (Mobil/Tablet/Masaüstü) değerlerinden biri girildiğinde yok sayılır.
Sütun Boyutu columnSize	Sayı	—	Bu ızgara başka bir ızgaranın içindeyse orada kaplayacağı sütun sayısı (1–12). Boşsa tek sütun kaplar.
Başlangıç Sütunu columnStart	Sayı	—	Üst ızgara içinde bu ızgaranın başladığı sütun. Boşsa otomatik yerleşir.
Satır Sayısı rowCount	Sayı	—	Eşit yükseklikte satır sayısı (1–12). Boş veya 0 ise satırlar gerektikçe otomatik oluşur.
Satır Boyutu rowSize	Sayı	—	Bu ızgara başka bir ızgaranın içindeyse orada kaplayacağı satır sayısı (1–12). Boşsa tek satır kaplar.
Başlangıç Satırı rowStart	Sayı	—	Üst ızgara içinde bu ızgaranın başladığı satır. Boşsa otomatik yerleşir.
Akış flow	Seçim	—	Öğelerin ızgarayı doldurma sırası: Satır önce satırları, Sütun önce sütunları doldurur. Varsayılan, standart sırayı (satır) kullanır. Seçenekler: "" Varsayılan, row Satır, col Sütun
Alt Izgara subgrid	Seçim	—	Satır veya Sütun seçilirse bu ızgara üst ızgaranın satırlarını veya sütunlarını kullanır (CSS subgrid). Varsayılan, kendi satır ve sütunlarını kullanır. Seçenekler: "" Varsayılan, row Satır, col Sütun
Boşluk gap	Sayı	—	Öğeler arası boşluk ölçeği (1-12). Boşluk (px) girildiğinde yok sayılır.
Enable Flashing enableFlashing	Onay kutusu	Kapalı	Bileşeni yanıp söndürür (saniyede bir saydamlık darbesi). Genellikle bir alarm koşuluna bağlanır.
Log Button logButton	Onay kutusu	Kapalı	Çalışma zamanında bileşenin üzerine gelince bir grafik ikonu gösterir; tıklanınca bileşene bağlı Tag'ler log Tag listesine eklenir.

Bağlantılar

Özellikler panelinin İlişkiler (Binding) bölümünde, Direct bağlantıda bir Tag bu widget'ın aşağıdaki özelliklerine bağlanabilir. Bağlantı tipleri (Direct, IntRange, FloatRange, Boolean, Bit) tüm widget'larda aynıdır; açıklamaları Widget Referansı sayfasındadır.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, subgrid, flow, layoutPreset, minItemWidth, columnCount, rowCount, columnStart, rowStart, columnSize, rowSize, gap, columnsMobile, columnsTablet, columnsDesktop, gapPx, rowGapPx, columnGapPx, alignItems, justifyItems

Ayrıca widget'ın stil alanları style.<alan> biçiminde bağlanabilir (ör. style.width, style.height, style.left, style.top).

Ortak bölümler

Bu widget seçiliyken özellikler panelinde şu ortak bölümler de görünür: Genel, Yerleşim, Görünüm, İlişkiler (Binding). Bu bölümler Sayfa Editörü sayfasında anlatılır.