Ma'lumot · compound

Ma'lumot töri

Jadvaldan köra ilovaga yaqin tör (APG grid): katakma-katak klaviatura (←↑→↓, Home/End, Ctrl+Home/End, PageUp/PageDown), katakni joyida tahrirlaş (Enter/F2/harf bosiş; Enter saqlaydi, Esc bekor qiladi), ustun kengligi (tutqiçni sudraş yoki sarlavhada Alt+←/→), qotgan sarlavha va birinçi ustun(lar), qator tanlaş (belgi ustuni, Shift+Böş joy, Ctrl+A) va saralaş. Tuzilma div + role, qatorlar aria-rowindex bilan — virtualizatsiyaga tayyor: DOMda faqat körinadigan qatorlar bölsa ham aria-rowcount töliq sonni aytadi. Xulq foxui.js'da (data-fx-datagrid). Guruhlaş va jami (4.130): data-group-by — ustun böyiça yiğiladigan guruh sarlavhalari, data-agg="sum|avg|count" ustunlarida guruh va pastki «Jami» qatori. Ustunlar (4.131): data-reorder — sarlavhani sudrab ustun tartibi (klaviatura: sarlavhada Alt+Shift+←/→); ustunlar paneli [data-fx-datagrid-columns="<id>"] — köriniş belgisi, ↑ ↓ tartib va «Qotiriş» (ustun belgi ustunidan keyin qotadi). Katak oraliği va joylaş (4.132): data-range — Shift+strelka, Shift+bosiş yoki sudraş bilan törtburçak oraliq; Ctrl+C — TSV (Excel/Sheets'ga), Ctrl+V — nusxalangan jadval faol katakdan boşlab tahrirlanadigan kataklarga, bitta qiymat — butun oraliqqa; son kataklari tekşiriladi. Master–detail (4.133): qatordan keyin .fx-datagrid__detail va .fx-datagrid__expand katagi — bosiş yoki Enter/Böşliq oçadi; saralaş va guruhlaşda tafsilot öz qatori bilan yuradi.

beta0.24.0 danyangilandi 0.29.0.fx-datagridCSS + JS
Mijoz
Şahar
Holat
Summa, söm
Aziz Karimov
Toşkent
Tölangan
1 200 000
Bobur Rahimov
Samarqand
Kutilmoqda
450 000
Dilnoza Yusupova
Buxoro
Tölangan
2 380 000
Eldor Nazarov
Namangan
Rad etilgan
90 000
Feruza Ismoilova
Andijon
Kutilmoqda
760 000
Gulnora Sattorova
Toşkent
Tölangan
3 150 000

Katakni tahrirlaş — Enter yoki harf bosing, Esc bekor qiladi. Ustun kengligi — sarlavhada Alt+←/→.

Mijoz
Şahar
Holat
Summa, söm
Aziz Karimov
Toşkent
Tölangan
1 200 000
Bobur Rahimov
Samarqand
Kutilmoqda
450 000
Dilnoza Yusupova
Toşkent
Tölangan
2 300 000
Jasur Aliyev
Samarqand
Tölangan
780 000
Malika Saidova
Toşkent
Muddati ötgan
310 000
Ustunlar
Tafsilot
Mijoz
Şahar
Telefon
Summa, söm
Aziz Karimov
Toşkent
+998 90 123 45 67
12 500 000
Paxta mato — 300 m, ipak — 40 m; yetkaziş 21-oktyabr, Sergeli ombori.
Bobur Rahimov
Samarqand
+998 93 210 11 05
4 800 000
Trikotaj — 120 kg; tölov 50 % oldindan, qolgani yetkazilganda.
Dilnoza Yusupova
Buxoro
+998 91 555 02 30
7 350 000
Atlas — 85 m; mijoz namunani tasdiqladi, şartnoma №HF-0451.
Jasur Aliyev
Namangan
+998 99 870 44 12
2 100 000
Kiçik ulgurji: 6 xil mato, har biridan 20 m.

Sarlavhani sudrang yoki Alt+Shift+←/→ — ustun tartibi. Shift+strelka — kataklar oraliği, Ctrl+C / Ctrl+V — Excel bilan almaşiş. ▸ — buyurtma tafsiloti.

Variantlar

AtributQiymatlarStandart
data-pin-firstoff
1 birinçi ustun qotadi
2 tanlaş ustuni + birinçi ma'lumot ustuni
off
data-gridlinesrows
both ustunlar orasida ham çiziq
rows
data-group-byustun raqami (0 dan) şu ustun böyiça guruh sarlavhalari—
data-aggsum sarlavha katagida — yiğindi
avg örtaça
count soni
—
data-reorder sarlavhani sudrab tartib—
data-range katak oraliği, Ctrl+C / Ctrl+V—

Anatomiya

  1. root.fx-datagridşart
  2. head.fx-datagrid__headixtiyoriy
  3. body.fx-datagrid__bodyşart
  4. row.fx-datagrid__rowşart
  5. cell.fx-datagrid__cellşart
  6. check.fx-datagrid__checkixtiyoriy
  7. resize.fx-datagrid__resizeixtiyoriy
  8. input.fx-datagrid__inputixtiyoriy
  9. foot.fx-datagrid__footixtiyoriy
  10. group-row.fx-datagrid__groupixtiyoriy
  11. group-cell.fx-datagrid__gcellixtiyoriy
  12. twisty.fx-datagrid__twistyixtiyoriy
  13. total-row.fx-datagrid__totalixtiyoriy
  14. columns-panel.fx-datagrid__columnsixtiyoriy
  15. column-list.fx-datagrid__collistixtiyoriy
  16. column-item.fx-datagrid__colitemixtiyoriy
  17. expand.fx-datagrid__expandixtiyoriy
  18. detail-row.fx-datagrid__detailixtiyoriy

Holatlar

hoverselectededitinginvalidsortedresizinggroup-collapsedin-rangereorderingdetail-open

Klaviatura va kiriş

TugmaAmal
← ↑ → ↓Qöşni katakka ötadi
Home / EndQatorning birinçi / oxirgi katagi
Ctrl+Home / Ctrl+EndTörning birinçi / oxirgi katagi
PageUp / PageDown10 qator tepaga / pastga
Enter, F2, harfTahrirlanadigan katakni tahrirga oçadi; sarlavhada saralaydi
Enter (tahrirda)Saqlaydi
Esc (tahrirda)Bekor qiladi
Boʻsh joy, Shift+Boʻsh joyQatorni tanlaydi / bekor qiladi
Ctrl+AHamma qatorni tanlaydi
Alt+← / Alt+→Sarlavhada ustun kengligini özgartiradi (Shift — katta qadam)
Enter / Boʻsh joy, ←, → (guruh sarlavhasida)Guruhni yiğadi yoki oçadi (aria-expanded)
Alt+Shift+← / →Sarlavhada: ustunni çapga / öngga suradi (data-reorder)
Shift + strelkaKatak oraliğini kengaytiradi (data-range); Esc — bekor
Ctrl+C / Ctrl+VOraliqni TSV qilib nusxalaydi / Excel'dan joylaydi
Enter / Boʻshliq (▸ katagida)Tafsilot qatorini oçadi / yopadi

role="grid" + aria-label; qatorlar role="row" (aria-rowindex), sarlavha role="columnheader" (aria-sort), katak role="gridcell". Tanlangan qator aria-selected="true" (törda aria-multiselectable). Faqat bitta katak tabindex="0" (roving). Tahrirdagi maydonga aria-label beriladi, notöğri son aria-invalid. Virtualizatsiyada aria-rowcount va aria-rowindex şart. Oraliqdagi kataklar aria-selected="true" (törda aria-multiselectable). Oçiş katagi aria-expanded va aria-label («Tafsilot: Aziz Karimov»). Ustunlar panelidagi tugmalar nomli («Çapga suriş: Şahar»), «Qotiriş» — aria-pressed.

Naqş: WAI-ARIA APG grid · rol grid

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Köp qatorli ma'lumotni joyida tahrirlaş, saralaş va tanlaş kerak (CRM, inventar, narxlar röyxati).
  • Klaviatura bilan tez işlaydigan iş jadvali.
Işlatmang
  • Faqat öqiladigan, oddiy ma'lumot jadvali → table
  • Içma-iç (iyerarxik) qatorlar → treegrid
  • Vazifalar röyxati — holat/ustuvorlik bilan → row
  • Oddiy öqiladigan ma'lumot uçun tör işlatmang — jadval (table) yengilroq va tabiiy.
  • Tahrirlanadigan katakni faqat rang bilan belgilamang — hover'da fon, tahrirda maydon va fokus halqasi bor.
  • Bir törda 2 tadan köp qotgan ustun qilmang — kiçik ekranda özi siğmay qoladi.
  • Katak içiga bir neçta tabga arziydigan tugma qöymang — tör bitta Tab bekati; içki amallarga Enter bilan kiriladi.
  • Tahrirdan çiqib ketganda özgarişni jimgina yöqotmang — blur saqlaydi, Esc aniq bekor qiladi.
  • Joylaşda tahrirlanmaydigan katakni jimgina özgartirmang — faqat data-editable kataklarga yoziladi.
  • Tafsilot qatoriga ikkinçi tör qöyib klaviatura tuzoğini yasamang — içki jadval faqat öqiş uçun bölsin.
npx foxui add datagrid
<div class="fx-datagrid" role="grid" aria-label="Mijozlar" aria-multiselectable="true" aria-rowcount="7" data-fx-datagrid data-pin-first="2" data-gridlines="both" style="--fx-datagrid-height: 22rem; --_cols: 44px 200px 140px 140px 180px">
  <div class="fx-datagrid__head" role="rowgroup">
    <div role="row" class="fx-datagrid__row" aria-rowindex="1">
      <div role="columnheader" class="fx-datagrid__cell fx-datagrid__check" data-select-all><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Hammasini tanlaş"><span class="fx-check__box"></span></label></div>
      <div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Mijoz<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
      <div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Şahar<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
      <div role="columnheader" class="fx-datagrid__cell">Holat<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
      <div role="columnheader" class="fx-datagrid__cell" data-type="num" data-sortable aria-sort="none">Summa, söm<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
    </div>
  </div>
  <div class="fx-datagrid__body" role="rowgroup">
    <div role="row" class="fx-datagrid__row" aria-rowindex="2" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Aziz Karimov"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Aziz Karimov</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="1200000">1 200 000</div>
    </div>
    <div role="row" class="fx-datagrid__row" aria-rowindex="3" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Bobur Rahimov"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Bobur Rahimov</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Samarqand</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="450000">450 000</div>
    </div>
    <div role="row" class="fx-datagrid__row" aria-rowindex="4" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Dilnoza Yusupova"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Dilnoza Yusupova</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Buxoro</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="2380000">2 380 000</div>
    </div>
    <div role="row" class="fx-datagrid__row" aria-rowindex="5" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Eldor Nazarov"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Eldor Nazarov</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Namangan</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="error">Rad etilgan</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="90000">90 000</div>
    </div>
    <div role="row" class="fx-datagrid__row" aria-rowindex="6" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Feruza Ismoilova"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Feruza Ismoilova</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Andijon</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="760000">760 000</div>
    </div>
    <div role="row" class="fx-datagrid__row" aria-rowindex="7" aria-selected="false">
      <div role="gridcell" class="fx-datagrid__cell fx-datagrid__check" data-select><label class="fx-check"><input type="checkbox" tabindex="-1" aria-label="Tanlaş: Gulnora Sattorova"><span class="fx-check__box"></span></label></div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Gulnora Sattorova</div>
      <div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div>
      <div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div>
      <div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="3150000">3 150 000</div>
    </div>
  </div>
</div>
<p class="fx-datagrid__foot">Katakni tahrirlaş — Enter yoki harf bosing, Esc bekor qiladi. Ustun kengligi — sarlavhada Alt+←/→.</p>
<!-- Guruhlash va jami (4.130) -->
<div class="fx-datagrid" role="grid" aria-label="Bitimlar şaharlar böyiça" data-fx-datagrid data-group-by="1" style="--_cols: 220px 140px 160px 160px">
  <div class="fx-datagrid__head" role="rowgroup"><div role="row" class="fx-datagrid__row">
    <div role="columnheader" class="fx-datagrid__cell" data-sortable aria-sort="none">Mijoz</div><div role="columnheader" class="fx-datagrid__cell">Şahar</div><div role="columnheader" class="fx-datagrid__cell">Holat</div><div role="columnheader" class="fx-datagrid__cell" data-type="num" data-agg="sum" data-sortable aria-sort="none">Summa, söm</div>
  </div></div>
  <div class="fx-datagrid__body" role="rowgroup">
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Aziz Karimov</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="1200000">1 200 000</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Bobur Rahimov</div><div role="gridcell" class="fx-datagrid__cell">Samarqand</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="450000">450 000</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Dilnoza Yusupova</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="2300000">2 300 000</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Jasur Aliyev</div><div role="gridcell" class="fx-datagrid__cell">Samarqand</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tölangan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="780000">780 000</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell">Malika Saidova</div><div role="gridcell" class="fx-datagrid__cell">Toşkent</div><div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="error">Muddati ötgan</span></div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-value="310000">310 000</div></div>
  </div>
</div>
<!-- Ustunlar paneli va sudrash (4.131), katak oraligʻi va Excel'dan joylash (4.132), master–detail (4.133) -->
<div class="fx-card" style="padding:var(--fx-space-3);max-inline-size:22rem;margin-block-end:var(--fx-space-3)">
  <span class="fx-label" id="dg-x-cols">Ustunlar</span>
  <div class="fx-datagrid__columns" data-fx-datagrid-columns="dg-x" role="group" aria-labelledby="dg-x-cols"></div>
</div>
<div class="fx-datagrid" id="dg-x" role="grid" aria-label="Ulgurji buyurtmalar" data-fx-datagrid data-reorder data-range data-gridlines="both" style="--_cols: 44px 200px 140px 180px 160px">
  <div class="fx-datagrid__head" role="rowgroup"><div role="row" class="fx-datagrid__row">
    <div role="columnheader" class="fx-datagrid__cell" data-expand-all><span class="fx-sr-only">Tafsilot</span></div>
    <div role="columnheader" class="fx-datagrid__cell" data-col="mijoz" data-sortable aria-sort="none">Mijoz<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
    <div role="columnheader" class="fx-datagrid__cell" data-col="shahar" data-sortable aria-sort="none">Şahar<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
    <div role="columnheader" class="fx-datagrid__cell" data-col="telefon">Telefon<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
    <div role="columnheader" class="fx-datagrid__cell" data-col="summa" data-type="num" data-sortable aria-sort="none">Summa, söm<span class="fx-datagrid__resize" aria-hidden="true"></span></div>
  </div></div>
  <div class="fx-datagrid__body" role="rowgroup">
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Aziz Karimov"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Aziz Karimov</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Toşkent</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 90 123 45 67</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="12500000">12 500 000</div></div>
    <div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Paxta mato — 300 m, ipak — 40 m; yetkaziş 21-oktyabr, Sergeli ombori.</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Bobur Rahimov"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Bobur Rahimov</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Samarqand</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 93 210 11 05</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="4800000">4 800 000</div></div>
    <div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Trikotaj — 120 kg; tölov 50 % oldindan, qolgani yetkazilganda.</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Dilnoza Yusupova"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Dilnoza Yusupova</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Buxoro</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 91 555 02 30</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="7350000">7 350 000</div></div>
    <div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Atlas — 85 m; mijoz namunani tasdiqladi, şartnoma №HF-0451.</div></div>
    <div role="row" class="fx-datagrid__row"><div role="gridcell" class="fx-datagrid__cell fx-datagrid__expand" data-expand aria-label="Tafsilot: Jasur Aliyev"></div><div role="gridcell" class="fx-datagrid__cell" data-editable>Jasur Aliyev</div><div role="gridcell" class="fx-datagrid__cell" data-editable>Namangan</div><div role="gridcell" class="fx-datagrid__cell" data-editable>+998 99 870 44 12</div><div role="gridcell" class="fx-datagrid__cell" data-type="num" data-editable data-value="2100000">2 100 000</div></div>
    <div role="row" class="fx-datagrid__row fx-datagrid__detail"><div role="gridcell" class="fx-datagrid__cell">Kiçik ulgurji: 6 xil mato, har biridan 20 m.</div></div>
  </div>
</div>
<p class="fx-datagrid__foot">Sarlavhani sudrang yoki Alt+Shift+←/→ — ustun tartibi. Shift+strelka — kataklar oraliği, Ctrl+C / Ctrl+V — Excel bilan almaşiş. ▸ — buyurtma tafsiloti.</p>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-datagrid-height --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-popover-width --fx-radius-nav --fx-radius-surface --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)