Alqor — Bölmə 14: Vidjetlər (vidjet modulu)#

Hazır interfeys elementləri: düymə, form sahələri, cədvəl, tərəqqi çubuğu, nişanlar, modal və s. Bir mənbə — iki hədəf: eyni kod həm desktop pəncərəsində (pəncərə, § 12), həm də brauzerdə (veb, § 11) işləyir.

Etalon implementasiya: alqorc/alqor/vidjet.py. § 14.7 arayışı koddan avtomatik qurulur (python -m alqor.vidjet_arayis --yaz).


14.1 Prinsip#

Hər vidjet funksiyadır və Element (JSX ağacı) qaytarır:

Alqor
gətir vidjet

dəyişən d = vidjet.düymə(mətn: "Yadda saxla", növ: "əsas")
// d — <button class="v-düymə v-düymə--əsas ...">Yadda saxla</button>

Vidjet çağırışı JSX ilə eyni yerdə işlənir və onunla qarışdırıla bilər:

Alqor
qaytar <div>
    <h1>Qeydiyyat</h1>
    {vidjet.sahə(etiket: "Ad", ad: "ad")}
</div>

Qaydalar:

  1. Bütün parametrlər adlıdır (mətn: "…") və ixtiyaridir. Ardıcıl arqumentlər də qəbul olunur, amma oxunaqlılıq üçün adlı forma tövsiyə edilir; alqorfmt ona çevirir.
  2. Mətn avtomatik qaçışdan keçir. vidjet.mətn(məzmun: "<b>") ekranda <b> yazır — HTML kimi şərh olunmur.
  3. Hadisə idarəedicisi funksiyadır — adətən komponentin metodu (klik: özü.saxla) və ya lambda (klik: () => özü.say += 1).
  4. Növ və ölçü kimi sabit seçimlər yoxlanılır. növ: "qırmızı" ArqumentXətası (ALQ-R013) atır və icazəli dəyərləri sadalayır.
  5. CSS sinifləri v- prefikslidir — istifadəçinin öz üslubu ilə toqquşmur.

14.2 Komponentlə istifadə#

Vidjetlər adətən komponent daxilində işlənir: vəziyyət sahəsi dəyişəndə göstər() yenidən çağırılır və ekran yenilənir.

Alqor
gətir vidjet
gətir pəncərə
gətir veb

komponent Qeydiyyat
    vəziyyət ad: mətn = ""
    vəziyyət razıdır: məntiq = yanlış
    vəziyyət göndərildi: məntiq = yanlış

    metod adDəyişdi(dəyər: mətn)
        özü.ad = dəyər
    son

    metod razılıqDəyişdi(dəyər: məntiq)
        özü.razıdır = dəyər
    son

    metod göndər()
        özü.göndərildi = doğru
    son

    göstər()
        əgər özü.göndərildi onda
            qaytar vidjet.xəbərdarlıq(növ: "uğur",
                                      mətn: "Xoş gəldiniz, {özü.ad}!")
        son
        qaytar vidjet.form(başlıq: "Qeydiyyat", məzmun: [
            vidjet.sahə(etiket: "Ad", ad: "ad", dəyər: özü.ad,
                        dəyişdi: özü.adDəyişdi, tələb: doğru),
            vidjet.qeyd(etiket: "Qaydalarla razıyam", ad: "razı",
                        işarələnmiş: özü.razıdır,
                        dəyişdi: özü.razılıqDəyişdi),
            vidjet.düymə(mətn: "Göndər", klik: özü.göndər,
                         söndürülmüş: deyil özü.razıdır)
        ])
    son
son

14.2.1 Desktop#

Alqor
funksiya əsas()
    dəyişən p = yeni pəncərə.Pəncərə("Qeydiyyat", 420, 360)
    p.məzmun(<Qeydiyyat />)
    p.göstər()
    pəncərə.işlət()
son

pəncərə vidjet üslubunu hər pəncərəyə özü qoşur.

14.2.2 Veb — interaktiv komponent#

Alqor
funksiya əsas()
    dəyişən s = yeni veb.Server()
    s.komponent("/", Qeydiyyat, başlıq: "Qeydiyyat")
    s.dinlə(8080)
son

s.komponent(yol, mənbə, başlıq?, üslub?):

Parametrİzah
yol/ ilə başlamalıdır; bir yola bir komponent
mənbəkomponent sinfi və ya nümunə qaytaran funksiya: () => yeni Panel(10) · () => <Panel say={10} />
başlıqsəhifənin <title>-ı
üslubəlavə CSS (vidjet üslubundan sonra gəlir)

Davranış:

  • Hər brauzer sessiyası öz nümunəsini alır. Sessiya alqor_komponent kukisi ilə tanınır (HttpOnly, SameSite=Strict). Bir istifadəçinin vəziyyət dəyişikliyi digərinə görünmür.
  • Sessiyalar yaddaşda saxlanılır: bir qoşma üçün ən çoxu 1000, son fəaliyyətdən 2 saat sonra atılır. Köhnəlmiş sessiyadan gələn hadisəyə server {"yenidən": doğru} cavabı verir və brauzer səhifəni yenidən yükləyir.
  • Ara proqramlar (s.ara(...)) komponent səhifəsinə və hadisələrinə də tətbiq olunur — giriş yoxlaması komponenti qoruyur.
  • Komponent statik fayllardan sonra, marşrutlardan əvvəl yoxlanılır.

14.2.3 Veb — statik səhifə#

Hadisə lazım deyilsə, vidjet ağacı adi HTML cavabı kimi qaytarıla bilər. Bu halda idarəedicilər (klik: …) nəzərə alınmır:

Alqor
s.al("/hesabat", funksiya(sorğu)
    qaytar veb.html(vidjet.səhifə(başlıq: "Hesabat", məzmun: [
        vidjet.başlıq(mətn: "Aylıq hesabat"),
        vidjet.cədvəl(sütunlar: ["Ay", "Gəlir"], sətirlər: verilənlər)
    ]))
son)

14.3 Hadisələr#

14.3.1 Hadisə adları#

Vidjetlər aşağıdakı hadisələri parametr kimi qəbul edir (§ 14.7-də hər vidjetin öz siyahısı var). JSX elementlərində isə pəncərə modulunun 15 hadisəsinin hamısı işlənə bilər (§ 12).

HadisəDOMİdarəedici nə alır
klikclickdüymənin value-su varsa onu (nişan, səhifə nömrəsi, sətir indeksi), yoxsa heç nə
dəyişdichangesahənin dəyəri: mətn; qeyd/açar üçün doğru/yanlış
yazıldıinputsahənin cari mətni — hər düymə basışında
göndərildisubmitheç nə
bağlandıclick (✕)heç nə
sətirKlikclicksətrin indeksi (0-dan, mətn kimi)

Dəyər həmişə mətndir (qeyd/açar istisna) — HTML sahəsi mətn saxlayır. Ədədə çevirmək idarəedicinin işidir:

Alqor
metod səhifəSeçildi(dəyər: mətn)
    özü.səhifə = tamƏt(dəyər, 1)
son

İdarəedici parametrsiz də yazıla bilər — dəyər ötürülməsə də çağırılır: metod sil() həm klik: özü.sil, həm də dəyərli hadisə ilə işləyir.

14.3.2 Yeniləmə semantikası#

Hər hadisədən sonra:

  1. İdarəedici serverdə (desktopda əsas sapda) icra olunur.
  2. Komponentin göstər() metodu yenidən çağırılır, hesablanan xassələrin keşi təmizlənir.
  3. Yeni HTML brauzerə göndərilir və mövcud DOM-a yamaqla tətbiq olunur — əvəzlənmir:
    • düyünlər yerində qalır, ona görə fokus, kursor mövqeyi və sürüşdürmə itmir;
    • fokusdakı sahənin dəyərinə toxunulmur — istifadəçi yazmağa davam edir;
    • yığcam-ın (<details>) açıq/qapalı vəziyyəti istifadəçiyə məxsusdur.
  4. Bir sorğu gedərkən gələn hadisələr növbəyə düşür, atılmır. Eyni sahənin dəyər hadisələri birləşdirilir və göndərmə anında sahənin son dəyəri oxunur — sürətlə yazılan mətn tam çatır.

Hadisə açarları (data-a-klik="n3h2") hər göstərmədə yenilənir. Silinmiş elementdən gələn köhnə açar idarəedici çağırmır — yalnız ekranı yeniləyir.


14.4 Üslub sistemi#

14.4.1 Funksiyalar#

FunksiyaQaytarırİstifadə
vidjet.üslub()mətnvidjet CSS-i — öz şablonunuza qoşmaq üçün
vidjet.üslublar()Element<style> elementi — <head> daxilinə
vidjet.səhifə(başlıq?, məzmun?, dil?, əlavəÜslub?)Elementtam HTML sənədi: <meta>, üslub, <body>

Desktopda (pəncərə) və s.komponent(...)-də üslub avtomatik qoşulur.

14.4.2 Tema dəyişənləri#

Rənglər CSS dəyişənləri ilə verilir. Qaranlıq rejim əməliyyat sisteminin ayarına (prefers-color-scheme) avtomatik uyğunlaşır.

DəyişənAçıqQaranlıqMəna
--v-fon#fff#1c1c1fsəhifə fonu
--v-mətn#17171a#f1f1f4əsas mətn
--v-kənar#d7d7db#3a3a40çərçivələr
--v-sönük#6c6c75#9a9aa3ikinci dərəcəli mətn
--v-vurgu#0b6bcb#4c9ef0əsas düymə, keçid, fokus
--v-vurgu-mətn#fff#0b1620vurğu fonundakı mətn
--v-üst#f4f4f6#26262bpanel və ikinci düymə fonu
--v-uğur#167c3c#4ac776uğur
--v-xəbərdarlıq#9a6700#e3b341xəbərdarlıq
--v-təhlükə#c0392b#ff7b72təhlükə, xəta
--v-radius8pxkünc radiusu
--v-kölgəkart və modal kölgəsi

Temanı dəyişmək üçün dəyişənləri yenidən təyin etmək kifayətdir:

Alqor
p.üslub(x":root{--v-vurgu:#7c3aed;--v-radius:4px}")
s.komponent("/", Panel, üslub: x":root{--v-vurgu:#7c3aed}")

CSS-də {…} olduğu üçün xam mətn (x"…") işlənir — adi mətndə {…} interpolyasiyadır.

14.4.3 Sinif adları#

Hər vidjetin kök sinfi v-<ad> formasındadır, variantlar BEM üslubunda: v-düymə--əsas, v-düymə--kiçik, v-giriş--xətalı. Əlavə sinif düymə(əlavəSinif: "...") ilə verilə bilər. Sinif adları sabit API sayılır: kiçik versiyalarda dəyişmir.


14.5 Əlçatanlıq#

  • Sahələrin etiketi <label for> ilə bağlıdır; tələb: doğru sahəyə required verir.
  • tərəqqi, halqaTərəqqi — role="progressbar" və aria-valuenow.
  • nişanlar — role="tablist" / role="tab"; modal — role="dialog"; xəbərdarlıq — role="alert"; fırlanan — role="status".
  • ikonDüymə(başlıq:) ekran oxuyucusu üçün addır — ikon düymədə mütləq verilməlidir.
  • şəkil(alternativ:) — şəkil yüklənməyəndə və ekran oxuyucusu üçün.

14.6 IDE kataloqu və kod skeletləri#

Alqor Studio-nun element paleti vidjet modulunun özündən oxunur.

FunksiyaQaytarır
vidjet.kataloq(kateqoriya?)siyahı[lüğət] — hər vidjet üçün ad, kateqoriya, izah, nümunə, hadisələr, skelet, vəziyyət
vidjet.kateqoriyalar()["form", "göstərmə", "vəziyyət", "düzülüş", "naviqasiya", "üst qat"]
vidjet.nümunə(ad, dəyişənAdı?)istifadə nümunəsi (mətn)
vidjet.skelet(ad, dəyişənAdı?)elementin işləməsi üçün lazım olan kod (mətn)

İki klik qaydası. Paletdən əlavə edilmiş elementin üzərinə iki dəfə klikləndikdə Studio vidjet.skelet(ad, dəyişənAdı) qaytardığı kodu komponentin gövdəsinə yazır: vəziyyət sahəsi + hadisə idarəedicisi. Fayl başında gətir vidjet yoxdursa, o da əlavə olunur.

Alqor
vidjet.skelet("sahə", "istifadəçiAdı")
Alqor
vəziyyət istifadəçiAdı: mətn = ""

metod istifadəçiAdıDəyişdi(dəyər: mətn)
    özü.istifadəçiAdı = dəyər
son

Zəmanətlər (sınaqlarla yoxlanılır):

  1. Kataloq tək həqiqət mənbəyidir: modulun ixrac etdiyi vidjet siyahısı, tip imzaları və bu bölmənin arayışı ondan qurulur. Kataloqda olub funksiyası olmayan vidjet modul yüklənərkən xəta verir.
  2. Hər nümunə və hər skelet ayrılır və tip yoxlamasından keçir — IDE heç vaxt naməlum tip (ALQ-T002) olan kod yazmır.
  3. dəyişənAdı verilməyibsə vidjetin adından təhlükəsiz ad düzəlir.

<!-- ARAYIŞ BAŞLANĞICI: vidjet_arayis.py yaradır, əl ilə dəyişməyin -->

14.7 Vidjet arayışı#

Cəmi 118 vidjet, 6 kateqoriya. Bütün parametrlər adlıdır və ixtiyaridir.

14.7.1 Form və düymələr — Forms (form, 40)#

vidjet.düymə — Button#

Basıla bilən düymə.

ParametrStandartİzah
mətn""düymənin yazısı
klik—basıldıqda çağırılır
növ"əsas"əsas · ikinci · sakit · təhlükə · uğur · xəbərdarlıq · əlaqə
ölçü"orta"kiçik · orta · böyük
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
gözləyiryanlışfırlanan göstərir və düyməni söndürür (sorğu gedərkən)
tamEnyanlışdüymə bütün eni tutur
ikon—ikon kimi işlənən simvol (məs. "✕", "⚙")
kimlik—HTML id atributu
əlavəSinif—əlavə CSS sinfi
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.düymə(mətn: "Yadda saxla", növ: "əsas",
             klik: özü.düyməBasıldı)

Kod skeleti (IDE-də iki klik):

Alqor
metod düyməBasıldı()
    // Düymə basıldıqda bu kod işləyir
son

vidjet.ikonDüymə — Icon Button#

Yalnız ikondan ibarət düymə.

ParametrStandartİzah
ikon""ikon kimi işlənən simvol (məs. "✕", "⚙")
klik—basıldıqda çağırılır
başlıq—üzərinə gələndə ipucu və ekran oxuyucusu üçün ad — ikon düymədə vacibdir
növ"sakit"düymə ilə eyni növlər
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
kimlik—HTML id atributu
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.ikonDüymə(ikon: "✕", başlıq: "Sil",
                 klik: özü.ikonDüyməBasıldı)

Kod skeleti (IDE-də iki klik):

Alqor
metod ikonDüyməBasıldı()
    // …
son

vidjet.düyməQrupu — Button Group#

Yanaşı duran düymələr.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.düyməQrupu(məzmun: [
    vidjet.düymə(mətn: "Bəli"),
    vidjet.düymə(mətn: "Xeyr", növ: "ikinci")
])

Keçid (link).

ParametrStandartİzah
mətn""görünən mətn
ünvan"#"keçid ünvanı (href)
klik—verilibsə keçid əvəzinə idarəedici işləyir
yeniNişanyanlışünvanı yeni nişanda açır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.əlaqə(mətn: "Ətraflı", ünvan: "/haqqında")

vidjet.sahə — Text Field#

Mətn sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
yer—boş sahədə görünən ipucu (placeholder)
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
yazıldı—hər düymə basışında çağırılır — cari mətni alır
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
oxunaqlıyanlışyalnız oxunur, dəyişdirilmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi · yazıldı

Alqor
vidjet.sahə(etiket: "Ad", ad: "sahə",
            dəyər: özü.sahə, dəyişdi: özü.sahəDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət sahə: mətn = ""

metod sahəDəyişdi(dəyər: mətn)
    özü.sahə = dəyər
son

vidjet.parol — Password Field#

Şifrə sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"şifrə"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
yer—boş sahədə görünən ipucu (placeholder)
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.parol(etiket: "Şifrə", ad: "şifrə",
             dəyişdi: özü.şifrəDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət şifrə: mətn = ""

metod şifrəDəyişdi(dəyər: mətn)
    özü.şifrə = dəyər
son

vidjet.ədəd — Number Field#

Ədəd sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
minimum—ən kiçik dəyər
maksimum—ən böyük dəyər
pillə—bir addımda dəyişmə miqdarı
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
dəyişdi—dəyər dəyişəndə çağırılır — mətn kimi alır (tamƏt/onluqƏt ilə çevirin)
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.ədəd(etiket: "Yaş", ad: "ədəd", minimum: 0,
            maksimum: 120, dəyişdi: özü.ədədDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət ədəd: tam = 0

metod ədədDəyişdi(dəyər: mətn)
    özü.ədəd = tamƏt(dəyər, 0)
son

vidjet.axtarış — Search Field#

Axtarış sahəsi.

ParametrStandartİzah
ad"axtarış"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
yer"Axtar…"boş sahədə görünən ipucu (placeholder)
dəyər—cari dəyər
yazıldı—hər düymə basışında çağırılır — cari mətni alır
göndərildi—form göndəriləndə (Enter) çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: yazıldı · göndərildi

Alqor
vidjet.axtarış(yazıldı: özü.axtar)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət sorğu: mətn = ""

metod axtar(sorğu: mətn)
    özü.sorğu = sorğu
son

vidjet.çoxsətirli — Textarea#

Çoxsətirli mətn sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
yer—boş sahədə görünən ipucu (placeholder)
sətirlər4sətir sayı
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.çoxsətirli(etiket: "Qeyd", ad: "çoxsətirli",
                  sətirlər: 5, dəyişdi: özü.çoxsətirliDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət çoxsətirli: mətn = ""

metod çoxsətirliDəyişdi(dəyər: mətn)
    özü.çoxsətirli = dəyər
son

vidjet.seçim — Select#

Açılan siyahı.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
seçimlər—["a", "b"] · {"az": "Azərbaycan"} · [["az", "Azərbaycan"]]
dəyər—seçili seçimin dəyəri
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
boşEtiket—siyahının əvvəlində boş dəyərli seçim (məs. "Seçin…")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.seçim(etiket: "Şəhər", ad: "seçim",
             seçimlər: ["Bakı", "Gəncə", "Sumqayıt"],
             dəyər: özü.seçim, dəyişdi: özü.seçimDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət seçim: mətn = ""

metod seçimDəyişdi(dəyər: mətn)
    özü.seçim = dəyər
son

vidjet.qeyd — Checkbox#

İşarələmə qutusu.

ParametrStandartİzah
etiket""qutunun yanındakı mətn
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
işarələnmişyanlışişarəli vəziyyət
dəyişdi—işarələnəndə/götürüləndə çağırılır — doğru/yanlış alır
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
kömək—sahənin altında kiçik izah mətni
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.qeyd(etiket: "Qəbul edirəm", ad: "qeyd",
            işarələnmiş: özü.qeyd,
            dəyişdi: özü.qeydDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət qeyd: məntiq = yanlış

metod qeydDəyişdi(_dəyər: istənilən)
    özü.qeyd = deyil özü.qeyd
son

vidjet.açar — Switch#

Yandır/söndür açarı.

ParametrStandartİzah
etiket""açarın yanındakı mətn
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
yanıqyanlışaçarın yanılı vəziyyəti
dəyişdi—yandırılanda/söndürüləndə çağırılır — doğru/yanlış alır
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.açar(etiket: "Bildirişlər", ad: "açar",
            yanıq: özü.açar, dəyişdi: özü.açarDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət açar: məntiq = yanlış

metod açarDəyişdi(_dəyər: istənilən)
    özü.açar = deyil özü.açar
son

vidjet.radioQrupu — Radio Group#

Bir variantın seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
seçimlər—["a", "b"] · {"az": "Azərbaycan"} · [["az", "Azərbaycan"]]
dəyər—seçili seçimin dəyəri
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
üfüqiyanlışseçimləri bir sətirdə düzür
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.radioQrupu(etiket: "Ödəniş", ad: "radioQrupu",
                  seçimlər: ["Nağd", "Kart"],
                  dəyər: özü.radioQrupu,
                  dəyişdi: özü.radioQrupuDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət radioQrupu: mətn = ""

metod radioQrupuDəyişdi(dəyər: mətn)
    özü.radioQrupu = dəyər
son

vidjet.sürüşdürücü — Slider#

Sürüşdürülən dəyər.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər0cari dəyər
minimum0ən kiçik dəyər
maksimum100ən böyük dəyər
pillə1bir addımda dəyişmə miqdarı
dəyişdi—sürüşdürərkən çağırılır — dəyəri mətn kimi alır
dəyəriGöstərdoğrusürüşdürücünün yanında cari dəyəri göstərir
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.sürüşdürücü(etiket: "Səs", ad: "sürüşdürücü",
                   dəyər: özü.sürüşdürücü,
                   dəyişdi: özü.sürüşdürücüDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət sürüşdürücü: tam = 50

metod sürüşdürücüDəyişdi(dəyər: mətn)
    özü.sürüşdürücü = tamƏt(dəyər, 0)
son

vidjet.tarix — Date Picker#

Tarix seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"tarix"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—"2026-10-06" formatında
minimum—ən erkən tarix ("YYYY-AA-GG")
maksimum—ən gec tarix ("YYYY-AA-GG")
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
tələbyanlışməcburi sahə — etiketin yanında *
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.tarix(etiket: "Doğum tarixi", ad: "tarix",
             dəyişdi: özü.tarixDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət tarix: mətn = ""

metod tarixDəyişdi(dəyər: mətn)
    özü.tarix = dəyər
son

vidjet.vaxt — Time Picker#

Vaxt seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"vaxt"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—"14:30" formatında
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.vaxt(etiket: "Saat", ad: "vaxt")

vidjet.rəng — Color Picker#

Rəng seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"rəng"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər"#3366cc""#rrggbb" formatında
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.rəng(etiket: "Rəng", ad: "rəng")

vidjet.faylSahəsi — File Upload#

Fayl yükləmə sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"fayl"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
növlər—qəbul edilən fayl növləri: [".png", "image/*"]
çoxluyanlışbir neçə fayl seçməyə icazə verir
dəyişdi—fayl seçiləndə çağırılır — faylın adını alır
kömək—sahənin altında kiçik izah mətni
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.faylSahəsi(etiket: "Şəkil", ad: "faylSahəsi",
                  növlər: ["image/*"])

vidjet.form — Form#

Form qabı.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
göndərildi—form göndəriləndə (Enter) çağırılır
başlıq—formun üstündəki başlıq
sıxyanlışsahələr arası məsafəni azaldır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: göndərildi

Alqor
vidjet.form(başlıq: "Qeydiyyat",
            göndərildi: özü.göndər, məzmun: [
    vidjet.sahə(etiket: "Ad", ad: "ad"),
    vidjet.düymə(mətn: "Göndər")
])

Kod skeleti (IDE-də iki klik):

Alqor
metod göndər()
    // Formun məlumatlarını işlə
son

vidjet.sahəDəsti — Fieldset#

Qruplaşdırılmış sahələr.

ParametrStandartİzah
başlıq""qrupun adı (<legend>)
məzmun—uşaq element(lər) — tək element və ya siyahı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sahəDəsti(başlıq: "Ünvan", məzmun: [
    vidjet.sahə(etiket: "Şəhər", ad: "şəhər")
])

vidjet.etiket — Label#

Sahə etiketi.

ParametrStandartİzah
mətn""etiketin mətni
sahəsi—etiketin bağlandığı sahənin ad-ı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.etiket(mətn: "Ad", sahəsi: "ad")

vidjet.reytinq — Rating#

Ulduzla qiymətləndirmə.

ParametrStandartİzah
dəyər0cari dəyər
maksimum5ən böyük dəyər
klik—basıldıqda çağırılır
etiket—sahənin üstündəki görünən ad
söndürülmüşyanlışdoğru olduqda element sönükdür, hadisə getmir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.reytinq(dəyər: özü.reytinq, klik: özü.reytinqSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət reytinq: tam = 0

metod reytinqSeçildi(dəyər: mətn)
    özü.reytinq = tamƏt(dəyər, 0)
son

vidjet.seqmentli — Segmented Control#

Seqmentli seçim (bir neçə düymədən biri).

ParametrStandartİzah
seçimlər—["a", "b"] · {"az": "Azərbaycan"} · [["az", "Azərbaycan"]]
dəyər—cari dəyər
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.seqmentli(seçimlər: ["Gün", "Həftə", "Ay"],
                 dəyər: özü.seqmentli, klik: özü.seqmentliSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət seqmentli: mətn = "Gün"

metod seqmentliSeçildi(dəyər: mətn)
    özü.seqmentli = dəyər
son

vidjet.çipSeçimi — Chip Select#

Çiplərlə çoxlu seçim.

ParametrStandartİzah
seçimlər—["a", "b"] · {"az": "Azərbaycan"} · [["az", "Azərbaycan"]]
seçilənlər—seçilmiş dəyərlərin siyahısı
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.çipSeçimi(seçimlər: ["Alqor", "Python", "Rust"],
                 seçilənlər: özü.çipSeçimi, klik: özü.çipSeçimiDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət çipSeçimi: siyahı[mətn] = []

metod çipSeçimiDəyişdi(dəyər: mətn)
    əgər dəyər içindədir özü.çipSeçimi onda
        özü.çipSeçimi = özü.çipSeçimi.filtr((x) => x != dəyər)
    yoxsa
        özü.çipSeçimi = özü.çipSeçimi + [dəyər]
    son
son

vidjet.teqSahəsi — Tag Input#

Teq daxil etmə sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
teqlər—göstərilən teqlərin siyahısı
əlavəEdildi—Enter basıldıqda çağırılır — yeni teqi alır
silindi—✕ basıldıqda çağırılır — silinən dəyəri alır
yer"Yazın və Enter basın"boş sahədə görünən ipucu (placeholder)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: əlavəEdildi · silindi

Alqor
vidjet.teqSahəsi(etiket: "Teqlər", teqlər: özü.teqSahəsi,
                 əlavəEdildi: özü.teqSahəsiƏlavə,
                 silindi: özü.teqSahəsiSil)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət teqSahəsi: siyahı[mətn] = []

metod teqSahəsiƏlavə(dəyər: mətn)
    əgər dəyər.kəs() != "" onda
        özü.teqSahəsi = özü.teqSahəsi + [dəyər.kəs()]
    son
son

metod teqSahəsiSil(dəyər: mətn)
    özü.teqSahəsi = özü.teqSahəsi.filtr((x) => x != dəyər)
son

vidjet.təsdiqKodu — OTP Input#

Təsdiq kodu (OTP) sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
uzunluq6simvol sayı
dəyər—cari dəyər
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.təsdiqKodu(etiket: "SMS kodu", uzunluq: 6,
                  dəyişdi: özü.təsdiqKoduDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət təsdiqKodu: mətn = ""

metod təsdiqKoduDəyişdi(dəyər: mətn)
    özü.təsdiqKodu = dəyər
son

vidjet.telefon — Phone Field#

Telefon nömrəsi sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"telefon"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
ölkəKodu"+994"nömrənin önündəki ölkə kodu
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
tələbyanlışməcburi sahə — etiketin yanında *
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.telefon(etiket: "Telefon", dəyişdi: özü.telefonDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət telefon: mətn = ""

metod telefonDəyişdi(dəyər: mətn)
    özü.telefon = dəyər
son

vidjet.ePoçt — Email Field#

E-poçt sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"epoçt"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
yer"ad@nümunə.az"boş sahədə görünən ipucu (placeholder)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
tələbyanlışməcburi sahə — etiketin yanında *
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.ePoçt(etiket: "E-poçt", dəyişdi: özü.ePoçtDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət ePoçt: mətn = ""

metod ePoçtDəyişdi(dəyər: mətn)
    özü.ePoçt = dəyər
son

vidjet.keçidSahəsi — URL Field#

URL (veb ünvan) sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"ünvan"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
yer"https://"boş sahədə görünən ipucu (placeholder)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.keçidSahəsi(etiket: "Sayt", dəyişdi: özü.keçidSahəsiDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət keçidSahəsi: mətn = ""

metod keçidSahəsiDəyişdi(dəyər: mətn)
    özü.keçidSahəsi = dəyər
son

vidjet.pulSahəsi — Currency Field#

Məbləğ (valyuta) sahəsi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"məbləğ"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
valyuta"₼"sahənin sonundakı valyuta işarəsi
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
kömək—sahənin altında kiçik izah mətni
xəta—doluysa sahə qırmızı çərçivə alır, mətn altda görünür (kömək-i əvəzləyir)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.pulSahəsi(etiket: "Məbləğ", valyuta: "₼",
                 dəyişdi: özü.pulSahəsiDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət pulSahəsi: onluq = 0.0

metod pulSahəsiDəyişdi(dəyər: mətn)
    özü.pulSahəsi = onluqƏt(dəyər, 0.0)
son

vidjet.tarixAralığı — Date Range Picker#

Tarix aralığı.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
başlanğıc—başlanğıc tarixi ("2026-10-01")
bitmə—son tarix
başlanğıcDəyişdi—başlanğıc tarixi dəyişəndə çağırılır
bitməDəyişdi—son tarix dəyişəndə çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: başlanğıcDəyişdi · bitməDəyişdi

Alqor
vidjet.tarixAralığı(etiket: "Dövr",
                    başlanğıcDəyişdi: özü.tarixAralığıBaşlanğıc,
                    bitməDəyişdi: özü.tarixAralığıBitmə)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət tarixAralığıBaş: mətn = ""
vəziyyət tarixAralığıSon: mətn = ""

metod tarixAralığıBaşlanğıc(dəyər: mətn)
    özü.tarixAralığıBaş = dəyər
son

metod tarixAralığıBitmə(dəyər: mətn)
    özü.tarixAralığıSon = dəyər
son

vidjet.tarixVaxt — Date Time Picker#

Tarix və vaxt seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"tarixVaxt"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.tarixVaxt(etiket: "Görüş", dəyişdi: özü.tarixVaxtDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət tarixVaxt: mətn = ""

metod tarixVaxtDəyişdi(dəyər: mətn)
    özü.tarixVaxt = dəyər
son

vidjet.ay — Month Picker#

Ay seçimi.

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"ay"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
dəyər—cari dəyər
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.ay(etiket: "Ay", dəyişdi: özü.ayDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət ay: mətn = ""

metod ayDəyişdi(dəyər: mətn)
    özü.ay = dəyər
son

vidjet.sayğac — Number Stepper#

Artır/azalt sayğacı (stepper).

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
dəyər0cari dəyər
minimum0ən kiçik dəyər
maksimum99ən böyük dəyər
pillə1bir addımda dəyişmə miqdarı
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.sayğac(etiket: "Say", dəyər: özü.sayğac,
              klik: özü.sayğacDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət sayğac: tam = 1

metod sayğacDəyişdi(dəyər: mətn)
    özü.sayğac = tamƏt(dəyər, 0)
son

vidjet.avtoTamamlama — Autocomplete#

Təklifli sahə (autocomplete).

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"seçim"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
təkliflər—yazarkən təklif olunan dəyərlər
dəyər—cari dəyər
yer—boş sahədə görünən ipucu (placeholder)
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
yazıldı—hər düymə basışında çağırılır — cari mətni alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi · yazıldı

Alqor
vidjet.avtoTamamlama(etiket: "Şəhər",
                     təkliflər: ["Bakı", "Gəncə", "Şəki"],
                     dəyişdi: özü.avtoTamamlamaDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət avtoTamamlama: mətn = ""

metod avtoTamamlamaDəyişdi(dəyər: mətn)
    özü.avtoTamamlama = dəyər
son

vidjet.faylSürüklə — Dropzone#

Fayl sürükləmə sahəsi (dropzone).

ParametrStandartİzah
etiket—sahənin üstündəki görünən ad
ad"fayl"sahənin adı (name/id); sınaq sürücüsü də bununla tapır
növlər—qəbul edilən fayl növləri: [".png", "image/*"]
çoxluyanlışbir neçə fayl seçməyə icazə verir
dəyişdi—dəyər dəyişəndə çağırılır — yeni dəyəri alır
mətn"Faylı bura sürükləyin və ya seçin"görünən mətn
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: dəyişdi

Alqor
vidjet.faylSürüklə(etiket: "Sənəd yüklə",
                   dəyişdi: özü.faylSürükləSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət faylSürüklə: mətn = ""

metod faylSürükləSeçildi(dəyər: mətn)
    özü.faylSürüklə = dəyər
son

vidjet.keçidDüyməsi — Toggle Button#

Basılı qalan düymə (toggle).

ParametrStandartİzah
mətn""görünən mətn
basılıyanlışdoğru — düymə basılı vəziyyətdədir
klik—basıldıqda çağırılır
ikon—ikon kimi işlənən simvol (məs. "✕", "⚙")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.keçidDüyməsi(mətn: "Qalın", ikon: "B",
                    basılı: özü.keçidDüyməsi, klik: özü.keçidDüyməsiDəyiş)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət keçidDüyməsi: məntiq = yanlış

metod keçidDüyməsiDəyiş()
    özü.keçidDüyməsi = deyil özü.keçidDüyməsi
son

vidjet.açılanMenyu — Dropdown Menu#

Açılan menyu (dropdown).

ParametrStandartİzah
mətn"Menyu"görünən mətn
elementlər—elementlərin siyahısı
klik—basıldıqda çağırılır
növ"ikinci"rəng növü
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.açılanMenyu(mətn: "Əməliyyatlar",
                   elementlər: ["Redaktə", "Kopyala", "Sil"],
                   klik: özü.açılanMenyuSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
metod açılanMenyuSeçildi(dəyər: mətn)
    // dəyər — seçilən menyu elementi
son

vidjet.bölünmüşDüymə — Split Button#

Bölünmüş düymə (əsas əməl + menyu).

ParametrStandartİzah
mətn""görünən mətn
klik—basıldıqda çağırılır
elementlər—elementlərin siyahısı
seçildi—menyudan seçim edildikdə çağırılır — seçilən dəyəri alır
növ"əsas"rəng növü
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik · seçildi

Alqor
vidjet.bölünmüşDüymə(mətn: "Saxla", klik: özü.bölünmüşDüyməSaxla,
                     elementlər: ["Kimi saxla", "Hamısını"],
                     seçildi: özü.bölünmüşDüyməSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
metod bölünmüşDüyməSaxla()
    // əsas əməl
son

metod bölünmüşDüyməSeçildi(dəyər: mətn)
    // menyudan seçim
son

vidjet.üzənDüymə — Floating Action Button#

Üzən əməliyyat düyməsi (FAB).

ParametrStandartİzah
ikon"+"ikon kimi işlənən simvol (məs. "✕", "⚙")
başlıq"Əlavə et"başlıq mətni
klik—basıldıqda çağırılır
tərəf"sağ"hansı tərəfdə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.üzənDüymə(ikon: "+", başlıq: "Yeni",
                 klik: özü.üzənDüyməBasıldı)

Kod skeleti (IDE-də iki klik):

Alqor
metod üzənDüyməBasıldı()
    // …
son

14.7.2 Göstərmə — Data Display (göstərmə, 42)#

vidjet.başlıq — Heading#

Başlıq (h1–h6).

ParametrStandartİzah
mətn""görünən mətn
səviyyə11–6 (<h1>–<h6>)
altMətn—başlığın altında sönük izah
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.başlıq(mətn: "Tapşırıqlar", səviyyə: 1,
              altMətn: "Bugünkü işlər")

vidjet.mətn — Text#

Abzas.

ParametrStandartİzah
məzmun""abzas mətni
sönükyanlışboz, ikinci dərəcəli mətn
ölçü"orta"kiçik · orta · böyük
qalınyanlışqalın şrift
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.mətn(məzmun: "Salam, dünya!")

vidjet.nişan — Badge#

Kiçik nişan (badge).

ParametrStandartİzah
mətn""görünən mətn
növ"ikinci"düymə ilə eyni növlər
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.nişan(mətn: "Yeni", növ: "uğur")

vidjet.xəbərdarlıq — Alert#

Bildiriş qutusu.

ParametrStandartİzah
mətn""görünən mətn
növ"xəbərdarlıq"uğur · xəbərdarlıq · təhlükə · məlumat
başlıq—başlıq mətni
bağlanayanlışbağlama düyməsi (✕) göstərir
bağlandı—bağlana: doğru olduqda ✕ basılanda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.xəbərdarlıq(mətn: "Yadda saxlanıldı",
                   növ: "uğur")

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət xəbərdarlıqGörünür: məntiq = doğru

metod xəbərdarlığıBağla()
    özü.xəbərdarlıqGörünür = yanlış
son

vidjet.kart — Card#

Kart qabı.

ParametrStandartİzah
başlıq—başlıq mətni
məzmun—uşaq element(lər) — tək element və ya siyahı
altlıq—aşağı hissə — adətən düymələr
altMətn—başlığın altında sönük mətn
klik—verilibsə bütün kart basılandır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.kart(başlıq: "Hesabat", məzmun: [
    vidjet.mətn(məzmun: "Məzmun")
])

vidjet.cədvəl — Table#

Məlumat cədvəli.

ParametrStandartİzah
sütunlar—başlıqlar: ["Ad", "Yaş"] və ya [["ad", "Ad"], …] (açar → başlıq)
sətirlər—siyahı siyahısı, lüğət siyahısı və ya obyekt siyahısı
boşMətn"Məlumat yoxdur"sətir olmayanda göstərilən mətn
zolaqlıdoğrucüt sətirlərin fonu fərqlənir
çərçivəliyanlışbütün xanaların çərçivəsi
sətirKlik—sətir basıldıqda çağırılır — sətrin indeksini (0-dan, mətn kimi) alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: sətirKlik

Alqor
vidjet.cədvəl(
    sütunlar: [["ad", "Ad"], ["yaş", "Yaş"]],
    sətirlər: özü.cədvəl)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət cədvəl: siyahı[istənilən] = []

metod sətirBasıldı()
    // Sətir seçildi
son

vidjet.siyahı — List#

Sadalama siyahısı.

ParametrStandartİzah
elementlər—mətn və ya element siyahısı
nömrəliyanlışnömrəli siyahı (<ol>)
işarəsizyanlışsiyahı işarələri gizlənir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.siyahı(elementlər: ["bir", "iki", "üç"])

vidjet.təsvirSiyahısı — Description List#

Açar–dəyər siyahısı.

ParametrStandartİzah
cütlər—ad → dəyər lüğəti
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.təsvirSiyahısı(cütlər: {"Ad": "Əli", "Yaş": 30})

vidjet.kod — Code Block#

Kod bloku.

ParametrStandartİzah
məzmun""kod mətni — HTML qaçışı avtomatikdir
dil—proqramlaşdırma dili (data-dil atributu)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.kod(məzmun: "yaz(\"salam\")", dil: "alqor")

vidjet.sitat — Blockquote#

Sitat.

ParametrStandartİzah
mətn""görünən mətn
mənbə—sitatın müəllifi / mənbəyi
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sitat(mətn: "Bilik gücdür", mənbə: "Atalar sözü")

vidjet.şəkil — Image#

Şəkil.

ParametrStandartİzah
mənbə""şəklin ünvanı (URL və ya yol)
alternativ""şəkil yüklənməyəndə və ekran oxuyucusu üçün mətn
en—en — ədəd piksel sayılır
hündürlük—hündürlük — ədəd piksel sayılır
yuvarlaqyanlışdairəvi kəsim
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.şəkil(mənbə: "/statik/logo.png",
             alternativ: "Loqo", en: 120)

vidjet.avatar — Avatar#

İstifadəçi avatarı.

ParametrStandartİzah
ad""tam ad — şəkil yoxdursa baş hərflər göstərilir (Aysel Məmmədova → AM)
mənbə—şəkil ünvanı (ixtiyari)
ölçü"orta"kiçik · orta · böyük
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.avatar(ad: "Aysel Məmmədova")

vidjet.ayırıcı — Divider#

Ayırıcı xətt.

ParametrStandartİzah
mətn—xəttin ortasında mətn (ixtiyari)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.ayırıcı(mətn: "və ya")

vidjet.boşBaxış — Empty State#

Boş vəziyyət.

ParametrStandartİzah
başlıq"Heç nə yoxdur"başlıq mətni
mətn—izah mətni
ikon"○"böyük simvol
hərəkət—altda göstərilən element — adətən düymə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.boşBaxış(başlıq: "Tapşırıq yoxdur",
                mətn: "Yeni tapşırıq əlavə edin")

vidjet.çip — Chip#

Çip (silinə bilən teq).

ParametrStandartİzah
mətn""görünən mətn
növ"ikinci"rəng növü
silindi—✕ basıldıqda çağırılır — silinən dəyəri alır
ikon—ikon kimi işlənən simvol (məs. "✕", "⚙")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: silindi

Alqor
vidjet.çip(mətn: "Alqor", növ: "əsas")

vidjet.ikon — Icon#

İkon (simvol).

ParametrStandartİzah
simvol"★"göstərilən simvol və ya emoji
ölçü20kiçik · orta · böyük
başlıq—başlıq mətni
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.ikon(simvol: "⚙", ölçü: 24, başlıq: "Ayarlar")

vidjet.klaviş — Kbd#

Klaviatura düyməsi.

ParametrStandartİzah
düymələr—düymə adları, məs. ["Ctrl", "S"]
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.klaviş(düymələr: ["Ctrl", "S"])

vidjet.vaxtXətti — Timeline#

Vaxt xətti (timeline).

ParametrStandartİzah
elementlər—elementlərin siyahısı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.vaxtXətti(elementlər: [
    ["2024", "Başlanğıc", "Layihə yaradıldı"],
    ["2026", "1.0", "İlk buraxılış"]
])

vidjet.ağac — Tree View#

Ağac görünüşü (fayl ağacı).

ParametrStandartİzah
elementlər—elementlərin siyahısı
açılmışdoğruilkin vəziyyətdə açıqdır
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.ağac(elementlər: [
    ["mənbə", ["əsas.alq", "model.alq"]],
    "README.md"
], klik: özü.ağacSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət ağac: mətn = ""

metod ağacSeçildi(dəyər: mətn)
    özü.ağac = dəyər
son

vidjet.siyahıQrupu — List Group#

Klikləyən sətirli siyahı.

ParametrStandartİzah
elementlər—elementlərin siyahısı
klik—basıldıqda çağırılır
seçili—seçilmiş elementin dəyəri
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.siyahıQrupu(elementlər: [
    ["Profil", "Ad, şəkil"], ["Təhlükəsizlik", "Şifrə"]
], seçili: özü.siyahıQrupu, klik: özü.siyahıQrupuSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət siyahıQrupu: mətn = ""

metod siyahıQrupuSeçildi(dəyər: mətn)
    özü.siyahıQrupu = dəyər
son

vidjet.avatarQrupu — Avatar Group#

Avatar qrupu.

ParametrStandartİzah
adlar—addımların adları
maksimum4ən böyük dəyər
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.avatarQrupu(adlar: ["Aysel Əliyeva", "Kamran Rəhimov",
                           "Nərmin Həsənova"])

vidjet.göstərici — Meter#

Ölçü göstəricisi (meter).

ParametrStandartİzah
dəyər0cari dəyər
minimum0ən kiçik dəyər
maksimum100ən böyük dəyər
etiket—sahənin üstündəki görünən ad
aşağı—bu dəyərdən aşağı — sarı
yuxarı—bu dəyərdən yuxarı — xəbərdarlıq rəngi
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.göstərici(etiket: "Disk", dəyər: 72, yuxarı: 80)

vidjet.qiymətKartı — Pricing Card#

Qiymət planı kartı.

ParametrStandartİzah
plan"Əsas"planın adı
qiymət"0 ₼"qiymət mətni, məs. "19 ₼"
dövr"/ ay"qiymətin dövrü, məs. "/ ay"
xüsusiyyətlər—planın xüsusiyyətləri (siyahı)
düyməMətni"Seç"düymənin yazısı
klik—basıldıqda çağırılır
seçilmişyanlışdoğru — vurğulanmış (tövsiyə olunan) kart
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.qiymətKartı(plan: "Pro", qiymət: "19 ₼",
                   xüsusiyyətlər: ["10 layihə", "Dəstək"],
                   klik: özü.qiymətKartıSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
metod qiymətKartıSeçildi(dəyər: mətn)
    // dəyər — plan adı
son

vidjet.xüsusiyyətSiyahısı — Feature List#

İşarəli xüsusiyyət siyahısı.

ParametrStandartİzah
elementlər—elementlərin siyahısı
işarə"✓"hər sətrin önündəki işarə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.xüsusiyyətSiyahısı(elementlər: ["Sürətli", "Pulsuz"])

vidjet.rəy — Testimonial#

Müştəri rəyi (testimonial).

ParametrStandartİzah
mətn""görünən mətn
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
vəzifə—adın altında sönük mətn (vəzifə, rol)
reytinqi—ulduz sayı (0–5)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.rəy(mətn: "Çox rahatdır!", ad: "Aysel Əliyeva",
           vəzifə: "Dizayner", reytinqi: 5)

vidjet.qəhrəman — Hero#

Böyük giriş bölməsi (hero).

ParametrStandartİzah
başlıq""başlıq mətni
altMətn—başlığın altında sönük izah
hərəkətlər—düymə(lər) — tək element və ya siyahı
mərkəzdədoğrumətn ortaya düzlənsin
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.qəhrəman(başlıq: "Alqor ilə proqramlaşdır",
                altMətn: "Azərbaycan dilində",
                hərəkətlər: [vidjet.düymə(mətn: "Başla")])

Səhifə altlığı (footer).

ParametrStandartİzah
mətn""görünən mətn
keçidlər—[[ünvan, mətn], …] cütləri
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.səhifəAltlığı(mətn: "© 2026 Alqor",
                     keçidlər: [["/haqqında", "Haqqında"]])

vidjet.qeydQutusu — Callout#

Diqqət çəkən qeyd (callout).

ParametrStandartİzah
başlıq—başlıq mətni
mətn""görünən mətn
növ"məlumat"rəng növü
ikon—ikon kimi işlənən simvol (məs. "✕", "⚙")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.qeydQutusu(başlıq: "Məsləhət",
                  mətn: "Ctrl+S ilə saxlayın")

vidjet.elanZolağı — Banner#

Səhifə üstü elan zolağı (banner).

ParametrStandartİzah
mətn""görünən mətn
növ"məlumat"rəng növü
hərəkət—altda göstərilən element — adətən düymə
bağlandı—bağlama düyməsi (✕) basıldıqda çağırılır; verilməyibsə düymə görünmür
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.elanZolağı(mətn: "Yeni versiya çıxıb!",
                  növ: "məlumat")

vidjet.təqvim — Calendar#

Aylıq təqvim.

ParametrStandartİzah
il2026il
ayı1ay nömrəsi (1–12)
seçili—seçilmiş elementin dəyəri
klik—basıldıqda çağırılır
qeydlilər—nöqtə ilə işarələnən tarixlər
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.təqvim(il: 2026, ayı: 10, seçili: özü.təqvim,
              klik: özü.təqvimSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət təqvim: mətn = ""

metod təqvimSeçildi(dəyər: mətn)
    // gün: "2026-10-07"; ay keçidi: "2026-11"
    özü.təqvim = dəyər
son

vidjet.sütunQrafiki — Bar Chart#

Sütun qrafiki (bar chart).

ParametrStandartİzah
dəyərlər—ədədlər siyahısı
etiketlər—hər dəyərin adı (dəyərlərlə eyni sırada)
başlıq—başlıq mətni
hündürlük160hündürlük — ədəd piksel sayılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sütunQrafiki(başlıq: "Satış",
                    dəyərlər: [12, 19, 7, 15],
                    etiketlər: ["Y", "F", "M", "A"])

vidjet.xəttQrafiki — Line Chart#

Xətt qrafiki (line chart).

ParametrStandartİzah
dəyərlər—ədədlər siyahısı
etiketlər—hər dəyərin adı (dəyərlərlə eyni sırada)
başlıq—başlıq mətni
hündürlük160hündürlük — ədəd piksel sayılır
sahəlidoğruxəttin altı rənglə dolsun
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.xəttQrafiki(başlıq: "Ziyarət",
                   dəyərlər: [3, 8, 5, 12, 9],
                   etiketlər: ["B.e", "Ç.a", "Ç", "C.a", "C"])

vidjet.dairəQrafiki — Pie Chart#

Dairə qrafiki (pie / donut).

ParametrStandartİzah
dəyərlər—ədədlər siyahısı
etiketlər—hər dəyərin adı (dəyərlərlə eyni sırada)
başlıq—başlıq mətni
halqadoğrudoğru — ortası boş (donut)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.dairəQrafiki(dəyərlər: [50, 30, 20],
                    etiketlər: ["Veb", "Mobil", "Desktop"])

vidjet.kiçikQrafik — Sparkline#

Kiçik xətt qrafiki (sparkline).

ParametrStandartİzah
dəyərlər—ədədlər siyahısı
en100en — ədəd piksel sayılır
hündürlük28hündürlük — ədəd piksel sayılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.kiçikQrafik(dəyərlər: [3, 5, 4, 8, 6, 9])

vidjet.video — Video#

Video oynadıcı.

ParametrStandartİzah
mənbə""şəklin ünvanı (URL və ya yol)
poster—video başlamazdan əvvəl görünən şəkil
idarəetmədoğruoynat/dayandır idarələri görünsün
avtomatikyanlışsəhifə açılanda özü oynasın (səssiz)
səssizyanlışsəs bağlı başlasın
təkraryanlışbitəndə yenidən başlasın
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.video(mənbə: "/media/təqdimat.mp4")

vidjet.audio — Audio#

Audio oynadıcı.

ParametrStandartİzah
mənbə""şəklin ünvanı (URL və ya yol)
idarəetmədoğruoynat/dayandır idarələri görünsün
təkraryanlışbitəndə yenidən başlasın
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.audio(mənbə: "/media/mahnı.mp3")

vidjet.yerləşdirmə — Embed#

Xarici məzmun (embed, iframe).

ParametrStandartİzah
ünvan""keçid ünvanı (href)
başlıq"Yerləşdirilmiş məzmun"başlıq mətni
hündürlük315hündürlük — ədəd piksel sayılır
nisbət—en/hündürlük nisbəti — "16/9", "1:2"
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.yerləşdirmə(ünvan: "https://www.openstreetmap.org/export/embed.html", nisbət: "16/9")

Şəkil qalereyası.

ParametrStandartİzah
şəkillər—şəkil ünvanları və ya [ünvan, izah] cütləri
sütunlar3sütun sayı
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.qalereya(şəkillər: ["/şəkil/1.jpg", "/şəkil/2.jpg",
                           "/şəkil/3.jpg"], sütunlar: 3)

Slayd göstəricisi (carousel).

ParametrStandartİzah
slaydlar—şəkil ünvanı, [ünvan, başlıq] və ya element
cari0seçili element
klik—basıldıqda çağırılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.karusel(slaydlar: [["/şəkil/1.jpg", "Bakı"],
                          ["/şəkil/2.jpg", "Şəki"]],
               cari: özü.karusel, klik: özü.karuselKeç)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət karusel: tam = 0

metod karuselKeç(dəyər: mətn)
    özü.karusel = tamƏt(dəyər, 0)
son

vidjet.işarəliMətn — Markdown#

Markdown işarələməli mətn.

ParametrStandartİzah
mətn""görünən mətn
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.işarəliMətn(mətn: "## Başlıq\n\n**Qalın** mətn")

vidjet.profilKartı — Profile Card#

Profil kartı.

ParametrStandartİzah
ad""sahənin adı (name/id); sınaq sürücüsü də bununla tapır
vəzifə—adın altında sönük mətn (vəzifə, rol)
mənbə—şəklin ünvanı (URL və ya yol)
hərəkətlər—düymə(lər) — tək element və ya siyahı
statistika—{"Layihə": 12} — ad → rəqəm
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.profilKartı(ad: "Aysel Əliyeva", vəzifə: "Proqramçı",
                   statistika: {"Layihə": 12, "İzləyici": 340})

vidjet.bildirişNişanı — Notification Badge#

Saylı bildiriş ikonu.

ParametrStandartİzah
ikon"🔔"ikon kimi işlənən simvol (məs. "✕", "⚙")
say0nişandakı rəqəm; 0 olduqda gizlənir
klik—basıldıqda çağırılır
maksimum99ən böyük dəyər
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.bildirişNişanı(say: özü.bildirişNişanı, klik: özü.bildirişNişanıAç)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət bildirişNişanı: tam = 3

metod bildirişNişanıAç()
    özü.bildirişNişanı = 0
son

14.7.3 Vəziyyət göstəriciləri — Feedback (vəziyyət, 8)#

vidjet.tərəqqi — Progress Bar#

Tərəqqi çubuğu.

ParametrStandartİzah
dəyər00–maksimum; həddən kənar dəyər kəsilir
maksimum100ən böyük dəyər
etiket—zolağın üstündəki ad
faizGöstərdoğrufaizi rəqəmlə göstərir
növ"əsas"dolğunun rəngi — düymə ilə eyni növlər
qeyriMüəyyənyanlışmüddəti bilinməyən iş — hərəkətli zolaq
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.tərəqqi(dəyər: özü.tərəqqi, maksimum: 100,
               etiket: "Yüklənir")

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət tərəqqi: tam = 0

vidjet.halqaTərəqqi — Circular Progress#

Halqa şəklində tərəqqi.

ParametrStandartİzah
dəyər00–maksimum
maksimum100ən böyük dəyər
ölçü64diametr, piksel
mətn—ortadakı mətn; verilməyibsə faiz
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.halqaTərəqqi(dəyər: özü.halqaTərəqqi, ölçü: 80)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət halqaTərəqqi: tam = 0

vidjet.fırlanan — Spinner#

Gözləmə göstəricisi.

ParametrStandartİzah
ölçü"orta"kiçik · orta · böyük
mətn—fırlananın yanındakı mətn
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.fırlanan(mətn: "Yüklənir…")

vidjet.skeletYüklənmə — Skeleton#

Yüklənmə skeleti.

ParametrStandartİzah
sətirlər3sətir sayı
en—sətirlərin eni
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.skeletYüklənmə(sətirlər: 3)

vidjet.statistika — Stat#

Rəqəmli göstərici.

ParametrStandartİzah
etiket""rəqəmin üstündəki ad
dəyər""əsas rəqəm (mətn kimi göstərilir)
dəyişmə—dəyişmə faizi: müsbət ▲ yaşıl, mənfi ▼ qırmızı
ikon—ikon kimi işlənən simvol (məs. "✕", "⚙")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.statistika(etiket: "Satış", dəyər: "1 240 ₼",
                  dəyişmə: 12)

vidjet.yüklənməÖrtüyü — Loading Overlay#

Məzmunun üstündə yüklənmə.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
yüklənirdoğrudoğru — örtük və fırlanan görünür
mətn"Yüklənir…"görünən mətn
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.yüklənməÖrtüyü(yüklənir: özü.yüklənməÖrtüyü, məzmun: [])

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət yüklənməÖrtüyü: məntiq = doğru

vidjet.nəticə — Result#

Nəticə səhifəsi (uğur, xəta, 404).

ParametrStandartİzah
növ"uğur"rəng növü
başlıq""başlıq mətni
mətn—görünən mətn
hərəkətlər—düymə(lər) — tək element və ya siyahı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.nəticə(növ: "uğur", başlıq: "Sifariş qəbul olundu",
              mətn: "Təşəkkür edirik!")

vidjet.şifrəGücü — Password Strength#

Şifrənin gücü göstəricisi.

ParametrStandartİzah
şifrə""yoxlanılan şifrə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.şifrəGücü(şifrə: özü.şifrəGücü)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət şifrəGücü: mətn = ""

14.7.4 Düzülüş — Layout (düzülüş, 13)#

vidjet.qutu — Box#

Sadə qab.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
boşluq—daxili boşluq (padding)
kənaryanlışçərçivə xətti
fon—fon rəngi (CSS dəyəri)
kimlik—HTML id atributu
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.qutu(boşluq: 16, kənar: doğru, məzmun: [])

vidjet.sətir — Row#

Üfüqi düzülüş.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
boşluq8uşaqlar arası məsafə — ədəd piksel sayılır, mətn olduğu kimi ("1rem")
düzləndir"başlanğıc"üfüqi düzləndirmə: başlanğıc · mərkəz · son · ara · ətraf · bərabər
şaquli"mərkəz"şaquli düzləndirmə (düzləndir ilə eyni dəyərlər)
sarıdoğruyer çatmayanda uşaqlar növbəti sətrə keçir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sətir(boşluq: 8, düzləndir: "ara", məzmun: [])

vidjet.sütun — Column#

Şaquli düzülüş.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
boşluq8uşaqlar arası məsafə — ədəd piksel sayılır, mətn olduğu kimi ("1rem")
düzləndir"dolu"uşaqların eni: dolu (tam en) · başlanğıc · mərkəz · son
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sütun(boşluq: 12, məzmun: [])

vidjet.tor — Grid#

Tor (grid) düzülüşü.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
sütunlar2sütun sayı
boşluq12uşaqlar arası məsafə — ədəd piksel sayılır, mətn olduğu kimi ("1rem")
minimum—verilibsə sütun sayı avtomatikdir: hər sütun ən azı bu endədir
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.tor(sütunlar: 3, boşluq: 12, məzmun: [])

vidjet.boşluq — Spacer#

Şaquli boşluq.

ParametrStandartİzah
hündürlük16boş sahənin hündürlüyü
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.boşluq(hündürlük: 24)

vidjet.panel — Panel#

Başlıqlı panel.

ParametrStandartİzah
başlıq—panelin başlıq zolağı
məzmun—uşaq element(lər) — tək element və ya siyahı
alətlər—başlığın sağında element(lər) — adətən düymələr
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.panel(başlıq: "Ayarlar", məzmun: [])

vidjet.bölmə — Section#

Səhifə bölməsi.

ParametrStandartİzah
başlıq—bölmənin başlığı (<h2>)
məzmun—uşaq element(lər) — tək element və ya siyahı
altMətn—başlığın altında sönük izah
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.bölmə(başlıq: "Haqqında", məzmun: [])

vidjet.konteyner — Container#

Mərkəzlənmiş en məhdud qab.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
en1100en — ədəd piksel sayılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.konteyner(en: 960, məzmun: [])

vidjet.mərkəz — Center#

Məzmunu ortaya qoyur.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
hündürlük—hündürlük — ədəd piksel sayılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.mərkəz(hündürlük: 200, məzmun: [])

vidjet.ikiSütun — Split Layout#

İki sütunlu düzülüş (split).

ParametrStandartİzah
sol—sol sütunun məzmunu
sağ—sağ küncdəki element(lər)
nisbət"1:1"en/hündürlük nisbəti — "16/9", "1:2"
boşluq16uşaqlar arası məsafə — ədəd piksel sayılır, mətn olduğu kimi ("1rem")
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.ikiSütun(nisbət: "1:2", sol: [], sağ: [])

vidjet.nisbət — Aspect Ratio#

Sabit en/hündürlük nisbəti.

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
forma"16/9"en/hündürlük nisbəti, məs. "16/9", "1/1"
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.nisbət(forma: "16/9", məzmun: [])

vidjet.sürüşmə — Scroll Area#

Sürüşən sahə (scroll area).

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
hündürlük240hündürlük — ədəd piksel sayılır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.sürüşmə(hündürlük: 240, məzmun: [])

vidjet.tətbiqQabığı — App Shell#

Tətbiq skeleti: başlıq, yan, məzmun.

ParametrStandartİzah
başlıq—başlıq mətni
yan—yan panelin məzmunu
məzmun—uşaq element(lər) — tək element və ya siyahı
altlıq—aşağı hissə — adətən düymələr
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.tətbiqQabığı(başlıq: vidjet.başlıq(mətn: "Tətbiq"),
                    yan: [], məzmun: [])

14.7.5 Naviqasiya — Navigation (naviqasiya, 8)#

vidjet.naviqasiya — Navbar#

Üst naviqasiya sətri.

ParametrStandartİzah
başlıq""sol küncdə tətbiqin adı
elementlər—orta hissədəki element(lər) — adətən əlaqə
sağ—sağ küncdəki element(lər)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.naviqasiya(başlıq: "Tətbiqim", elementlər: [
    vidjet.əlaqə(mətn: "Ana səhifə", ünvan: "/")
])

vidjet.nişanlar — Tabs#

Nişanlar (tabs).

ParametrStandartİzah
elementlər—nişanlar (seçimlər formatında)
cari—seçili nişanın dəyəri; verilməyibsə birincisi
klik—nişan basıldıqda çağırılır — nişanın dəyərini alır
məzmun—nişan sətrinin altındakı gövdə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.nişanlar(elementlər: ["Ümumi", "Ayarlar"],
                cari: özü.nişanlar, klik: özü.nişanlarSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət nişanlar: mətn = "Ümumi"

metod nişanlarSeçildi(dəyər: mətn)
    özü.nişanlar = dəyər
son

vidjet.yığcam — Accordion#

Açılıb-yığılan bölmə.

ParametrStandartİzah
başlıq""başlıq mətni
məzmun—uşaq element(lər) — tək element və ya siyahı
açılmışyanlışilkin vəziyyətdə açıqdır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.yığcam(başlıq: "Ətraflı", açılmış: yanlış,
              məzmun: [])

vidjet.səhifələmə — Pagination#

Səhifələrə bölmə.

ParametrStandartİzah
səhifə1cari səhifə (1-dən)
cəmi1səhifələrin sayı
klik—səhifə basıldıqda çağırılır — səhifə nömrəsini mətn kimi alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.səhifələmə(səhifə: özü.səhifələmə, cəmi: 10,
                  klik: özü.səhifələməDəyişdi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət səhifələmə: tam = 1

metod səhifələməDəyişdi(dəyər: mətn)
    özü.səhifələmə = tamƏt(dəyər, 1)
son

vidjet.addımlar — Stepper#

Addım göstəricisi.

ParametrStandartİzah
adlar—addımların adları
cari1cari addım (1-dən); əvvəlkilər ✓ ilə
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.addımlar(adlar: ["Ad", "Ünvan", "Təsdiq"],
                cari: özü.addımlar)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət addımlar: tam = 1

vidjet.çörəkQırıntıları — Breadcrumb#

Yol göstəricisi.

ParametrStandartİzah
yollar—[[ünvan, ad], …] — sonuncu cari səhifədir
klik—qırıntı basıldıqda çağırılır — ünvanı alır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.çörəkQırıntıları(yollar: [
    ["/", "Ana səhifə"], ["/mal", "Mallar"]
])

vidjet.yanNaviqasiya — Sidebar Nav#

Yan menyu (sidebar).

ParametrStandartİzah
elementlər—elementlərin siyahısı
cari—seçili element
klik—basıldıqda çağırılır
başlıq—başlıq mətni
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: klik

Alqor
vidjet.yanNaviqasiya(elementlər: ["Ana", "Hesabatlar",
                                  "Ayarlar"],
                     cari: özü.yanNaviqasiya, klik: özü.yanNaviqasiyaSeçildi)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət yanNaviqasiya: mətn = "Ana"

metod yanNaviqasiyaSeçildi(dəyər: mətn)
    özü.yanNaviqasiya = dəyər
son

vidjet.alətlərPaneli — Toolbar#

Alətlər paneli (toolbar).

ParametrStandartİzah
məzmun—uşaq element(lər) — tək element və ya siyahı
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.alətlərPaneli(məzmun: [
    vidjet.ikonDüymə(ikon: "B", başlıq: "Qalın"),
    vidjet.ikonDüymə(ikon: "I", başlıq: "Maili")
])

14.7.6 Üst qat — Overlays (üst qat, 7)#

vidjet.modal — Modal#

Modal pəncərə.

ParametrStandartİzah
başlıq""başlıq mətni
məzmun—uşaq element(lər) — tək element və ya siyahı
altlıq—aşağı hissə — adətən düymələr
görünürdoğruyanlış olduqda heç nə göstərilmir — vəziyyətlə idarə olunur
bağlandı—bağlama düyməsi (✕) basıldıqda çağırılır; verilməyibsə düymə görünmür
ölçü"orta"pəncərənin eni: kiçik · orta · böyük
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.modal(başlıq: "Təsdiq", görünür: özü.modal,
             bağlandı: özü.modalBağla, məzmun: [])

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət modal: məntiq = yanlış

metod modalBağla()
    özü.modal = yanlış
son

vidjet.yanPanel — Drawer#

Yan panel (drawer).

ParametrStandartİzah
başlıq""başlıq mətni
məzmun—uşaq element(lər) — tək element və ya siyahı
görünürdoğruyanlış olduqda heç nə göstərilmir — vəziyyətlə idarə olunur
tərəf"sağ"sol · sağ
bağlandı—bağlama düyməsi (✕) basıldıqda çağırılır; verilməyibsə düymə görünmür
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.yanPanel(başlıq: "Menyu", görünür: özü.yanPanel,
                bağlandı: özü.yanPanelBağla, məzmun: [])

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət yanPanel: məntiq = yanlış

metod yanPanelBağla()
    özü.yanPanel = yanlış
son

vidjet.ipucu — Tooltip#

Üzərinə gələndə görünən izah.

ParametrStandartİzah
mətn""ipucunun mətni
məzmun—üzərinə gəlinəcək element
tərəf"üst"üst · alt · sol · sağ
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.ipucu(mətn: "Silinəcək",
             məzmun: vidjet.ikonDüymə(ikon: "✕"))

vidjet.bildirişQutusu — Toast#

Küncdə görünən bildiriş.

ParametrStandartİzah
mətn""bildirişin mətni
növ"məlumat"uğur · xəbərdarlıq · təhlükə · məlumat
bağlandı—bağlama düyməsi (✕) basıldıqda çağırılır; verilməyibsə düymə görünmür
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.bildirişQutusu(mətn: "Saxlanıldı", növ: "uğur")

vidjet.açılanPanel — Popover#

Açılan panel (popover).

ParametrStandartİzah
düymə"Ətraflı"açan düymənin mətni və ya elementi
məzmun—uşaq element(lər) — tək element və ya siyahı
açılmışyanlışilkin vəziyyətdə açıqdır
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8
Alqor
vidjet.açılanPanel(düymə: "Filtr", məzmun: [])

vidjet.təsdiqDialoqu — Confirm Dialog#

Təsdiq dialoqu.

ParametrStandartİzah
başlıq"Əminsiniz?"başlıq mətni
mətn""görünən mətn
görünürdoğruyanlış olduqda heç nə göstərilmir — vəziyyətlə idarə olunur
təsdiqləndi—təsdiq düyməsi basıldıqda çağırılır
ləğvEdildi—ləğv və ya bağlama zamanı çağırılır
təsdiqMətni"Bəli"təsdiq düyməsinin yazısı
ləğvMətni"Xeyr"ləğv düyməsinin yazısı
təhlükəliyanlışdoğru — təsdiq düyməsi qırmızı (silmə kimi əməllər)
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: təsdiqləndi · ləğvEdildi

Alqor
vidjet.təsdiqDialoqu(başlıq: "Silinsin?",
                     mətn: "Bu əməl geri qaytarılmır.",
                     görünür: özü.təsdiqDialoqu, təhlükəli: doğru,
                     təsdiqləndi: özü.təsdiqDialoquBəli,
                     ləğvEdildi: özü.təsdiqDialoquXeyr)

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət təsdiqDialoqu: məntiq = yanlış

metod təsdiqDialoquBəli()
    özü.təsdiqDialoqu = yanlış
    // silmə əməli
son

metod təsdiqDialoquXeyr()
    özü.təsdiqDialoqu = yanlış
son

vidjet.altVərəq — Bottom Sheet#

Aşağıdan açılan panel (bottom sheet).

ParametrStandartİzah
başlıq""başlıq mətni
məzmun—uşaq element(lər) — tək element və ya siyahı
görünürdoğruyanlış olduqda heç nə göstərilmir — vəziyyətlə idarə olunur
bağlandı—bağlama düyməsi (✕) basıldıqda çağırılır; verilməyibsə düymə görünmür
üslub—görünüş: {"rəng": …, "fon": …, "kənar": …, "künc": 8, "şrift": 18, "qalın": doğru} — bax § 14.8

Hadisələr: bağlandı

Alqor
vidjet.altVərəq(başlıq: "Paylaş", görünür: özü.altVərəq,
                bağlandı: özü.altVərəqBağla, məzmun: [])

Kod skeleti (IDE-də iki klik):

Alqor
vəziyyət altVərəq: məntiq = yanlış

metod altVərəqBağla()
    özü.altVərəq = yanlış
son

<!-- ARAYIŞ SONU -->


14.8 Görünüş — üslub:#

Hər vidjet əlavə olaraq üslub: parametrini qəbul edir:

Alqor
vidjet.düymə(mətn: "Saxla", növ: "əsas",
             üslub: {"fon": "#16a34a", "rəng": "#fff", "künc": 20,
                     "kənar": "2px solid #14532d", "şrift": 17,
                     "qalın": doğru})

vidjet.sahə(etiket: "Ad", ad: "ad",
            üslub: {"kənarRəngi": "#0b6bcb", "en": 320})
AçarCSSQeyd
rəngcolormətnin rəngi
fonbackground
kənarborder"2px solid #333"
kənarRəngiborder-color
küncborder-radiusədəd → piksel
şriftfont-sizeədəd → piksel
şriftAiləsifont-family
qalın / kursivfont-weight / font-styledoğru / yanlış
qalınlıqfont-weight400, 700 …
en, hündürlük, minEn, maksEnölçülərədəd → piksel; vidjetin bütövünə
boşluqpadding
xaricBoşluqmarginvidjetin bütövünə
düzləndirtext-alignsol · orta · sağ · iki tərəf
şəffaflıqopacity0–1
kölgəbox-shadow

Form sahələrində (sahə, seçim, çoxsətirli …) rəng, fon, kənar, künc və şrift sahənin özünə (input), ölçülər və xaricBoşluq etiketlə birlikdə bütövə aiddir. Naməlum açar ArqumentXətası verir. Dəyərdə ; { } < >, url(, expression, javascript olarsa rədd edilir — üslub CSS-dən kənara çıxa bilməz.

Alqor Studio-nun Xüsusiyyətlər paneli bu parametri vizual redaktə edir (§ 13.9).


14.9 Təhlükəsizlik#

TəhlükəQoruma
XSS — istifadəçi mətni HTML kimibütün mətn və atributlar qaçışdan keçir
Başqa saytın hadisə göndərməsi (CSRF)Origin başlığı Host ilə eyni olmalıdır; vebdə gövdə application/json olmalıdır (kənar sayt CORS ön-yoxlamasına məcbur olur); sessiya kukisi SameSite=Strict
DNS rebinding (desktop)yerli server yalnız Host: 127.0.0.1:<port> / localhost:<port> qəbul edir
Başqa istifadəçinin vəziyyətisessiya açarı 192 bitlik təsadüfi dəyərdir; nümunələr ayrıdır
Yaddaşın doldurulmasıqoşma başına 1000 sessiya, 2 saat ömür

vidjet.kod, vidjet.mətn və s. heç vaxt xam HTML qəbul etmir. Xam HTML lazımdırsa JSX-də elementlər açıq yazılır.


14.10 Sınaq#

Vidjetli interfeys pəncərə açmadan və port açmadan sınanır:

Alqor
// Desktop
dəyişən s = pəncərə.sınaq.aç(p)
s.yaz("axtarış", "rəşad")           // `ad` və ya etiketlə tapır
s.klik("İşçini sil")                 // düymə mətni ilə
iddia s.ehtiva("Silinsin?")

// Veb
dəyişən m = veb.sınaq.server(server)
dəyişən c = m.al("/")
iddia c.vəziyyət() == 200

Sürücü (pəncərə.sınaq.aç) metodları: klik(nişan, dəyər?), yaz(nişan, dəyər), hadisə(ad, nişan?, dəyər?), ehtiva(parça), HTML(), mətn(), başlıq(), menyu(), dialoqlar(), bağla().


14.11 Xəta kodları#

KodNə vaxt
ALQ-R013icazəsiz növ / ölçü / tərəf; olmayan vidjet adı (skelet, nümunə); olmayan kateqoriya; təkrarlanan komponent yolu
ALQ-T004cütlər / sətirlər lüğət və ya cüt siyahısı deyil
ALQ-T008hadisə parametrinə funksiya olmayan dəyər verilib
ALQ-T053komponentdə göstər() yoxdur; s.komponent-ə komponent olmayan dəyər verilib