Ma'lumot · pattern
Gantt
Loyiha va yöl xaritasini vaqt öqida körsatadi: çapda nomlar ustuni, öngda oy va kun (yoki hafta) sarlavhasi — ikkalasi aylantirilganda qotadi; dam oliş kunlari soyasi, «bugun» çiziği, plaşkalar içida bajarilgan uluş, bosqiç (romb), guruh xulosasi, boğliqlik öqlari (data-after) va keçikkan plaşka («Keçikdi» yozuvi bilan). Plaşkalar tugma: Tab/←→↑↓ bilan yuriladi, fokus va hover'da sana oraliği va uluş maslahati çiqadi. Joylaşuvni xulq sanalardan hisoblaydi (data-start, data-end). Xulq foxui.js'da (data-fx-gantt).
Vazifa
Loyihalaş
Texnik topşiriq
Smeta
Çizmalar
Quriliş
Poydevor
Devor va pardozlaş
Birinçi bosqiç qabuli
Işga tuşiriş
Sinov va tuzatiş
Reliz
Yönaliş
Mahsulot
Dizayn tizimi
Mobil ilova
Ommaviy sinov
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-scale | dayweek uzun davr (çorak, yil) | day |
data-tone | brandbluegreencoralpurpleyellow | brand |
Anatomiya
- root
.fx-ganttşart - inner
.fx-gantt__innerşart - head
.fx-gantt__headixtiyoriy - corner
.fx-gantt__cornerixtiyoriy - scale
.fx-gantt__scaleixtiyoriy - month
.fx-gantt__moixtiyoriy - day
.fx-gantt__dyixtiyoriy - week
.fx-gantt__wkixtiyoriy - row
.fx-gantt__rowşart - name
.fx-gantt__nameşart - count
.fx-gantt__countixtiyoriy - track
.fx-gantt__trackşart - bar
.fx-gantt__barixtiyoriy - fill
.fx-gantt__fillixtiyoriy - flag
.fx-gantt__flagixtiyoriy - milestone
.fx-gantt__msixtiyoriy - summary
.fx-gantt__sumixtiyoriy - weekend
.fx-gantt__weixtiyoriy - today
.fx-gantt__todayixtiyoriy - dependency
.fx-gantt__depixtiyoriy - tooltip
.fx-gantt__tipixtiyoriy
Holatlar
latedonehoverfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Plaşkaga / bosqiçga fokus; maslahat çiqadi |
| ← → | Qatordagi qöşni plaşka |
| ↑ ↓ | Qöşni qatordagi eng yaqin plaşka |
| Esc | Maslahatni yopadi |
Konteyner role="group" + aria-label. Har plaşka/bosqiç — <button> va aria-label (nom, sana oraliği, uluş, «keçikkan»). Maslahat role="tooltip" va aria-describedby orqali ulanadi, Esc yopadi. Öqlar va soyalar aria-hidden — ma'lumot plaşka nomida. Jadval muqobili (röyxat) tavsiya etiladi.
Naqş: WAI-ARIA APG tooltip · rol group
Kod
AI uçun: qaçon işlatiladi
Işlating
- Loyiha bosqiçlari, muddatlar va boğliqliklarni vaqt böyiça köriş (reja, yöl xaritasi, işlab çiqariş grafigi).
Işlatmang
- Uçraşuv va hodisalarni haftalik/oylik köriş →
schedule - Faoliyat tarixi (nima böldi) →
timeline - Oddiy vazifalar röyxati →
row - Keçikişni faqat qizil rang bilan bermang — «Keçikdi» yozuvi va qalin çegara bor.
- Bosqiçni (romb) uzoq iş uçun işlatmang — u bir kunlik voqea; iş plaşka böladi.
- Boğliqlik öqlarini hamma plaşkaga çizmang — faqat haqiqiy tösiqlarga, aks holda çalkaşadi.
- Gantt'ni telefon ekranida asosiy köriniş qilmang — ixçam röyxat yoki jadval muqobilini bering.
- Hafta masştabida bir kunlik tafsilotni kutmang — kun masştabiga öting.
npx foxui add gantt
<div class="fx-gantt" data-fx-gantt data-start="2026-10-12" data-days="35" data-today="2026-10-17" role="group" aria-label="Loyiha rejasi: 12-oktyabr — 15-noyabr" style="--fx-gantt-height: 28rem">
<div class="fx-gantt__inner">
<div class="fx-gantt__head"><div class="fx-gantt__corner">Vazifa</div></div>
<div class="fx-gantt__row" data-group role="row"><div class="fx-gantt__name"><span>Loyihalaş</span><span class="fx-gantt__count"></span></div><div class="fx-gantt__track"></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Texnik topşiriq</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g1" data-start="2026-10-12" data-end="2026-10-13" data-progress="100"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Smeta</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g2" data-start="2026-10-14" data-end="2026-10-16" data-progress="60" data-after="g1"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Çizmalar</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g3" data-start="2026-10-14" data-end="2026-10-24" data-progress="35" data-after="g1" data-tone="blue"></button></div></div>
<div class="fx-gantt__row" data-group role="row"><div class="fx-gantt__name"><span>Quriliş</span><span class="fx-gantt__count"></span></div><div class="fx-gantt__track"></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Poydevor</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g4" data-start="2026-10-26" data-end="2026-10-30" data-progress="0" data-after="g2,g3" data-tone="green"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Devor va pardozlaş</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g5" data-start="2026-11-02" data-end="2026-11-10" data-progress="0" data-after="g4" data-tone="green"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Birinçi bosqiç qabuli</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__ms" id="m1" data-date="2026-10-31" data-after="g4" aria-label="Birinçi bosqiç qabuli"></button></div></div>
<div class="fx-gantt__row" data-group role="row"><div class="fx-gantt__name"><span>Işga tuşiriş</span><span class="fx-gantt__count"></span></div><div class="fx-gantt__track"></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Sinov va tuzatiş</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="g6" data-start="2026-11-11" data-end="2026-11-14" data-progress="0" data-after="g5" data-tone="purple"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Reliz</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__ms" id="m2" data-date="2026-11-15" data-after="g6" aria-label="Reliz"></button></div></div>
</div>
</div>
<!-- Hafta masshtabi: data-scale="week" -->
<div class="fx-gantt" data-fx-gantt data-scale="week" data-start="2026-10-12" data-days="84" data-today="2026-10-17" role="group" aria-label="Çorak rejasi">
<div class="fx-gantt__inner">
<div class="fx-gantt__head"><div class="fx-gantt__corner">Yönaliş</div></div>
<div class="fx-gantt__row" data-group role="row"><div class="fx-gantt__name"><span>Mahsulot</span><span class="fx-gantt__count"></span></div><div class="fx-gantt__track"></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Dizayn tizimi</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="w1" data-start="2026-10-12" data-end="2026-11-13" data-progress="55"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Mobil ilova</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__bar" id="w2" data-start="2026-11-16" data-end="2026-12-18" data-progress="0" data-after="w1" data-tone="blue"></button></div></div>
<div class="fx-gantt__row"><div class="fx-gantt__name"><span>Ommaviy sinov</span></div><div class="fx-gantt__track"><button type="button" class="fx-gantt__ms" id="w3" data-date="2026-12-21" data-after="w2" aria-label="Ommaviy sinov"></button></div></div>
</div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-error-solid --fx-bg-error-subtle --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-gantt-height --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-shadow-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-6 --fx-space-8 --fx-text-disabled --fx-text-error --fx-text-on-brand --fx-text-on-error --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-brand --fx-viz-ink
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.