Таза HTML, Bootstrap 5 жана JavaScript'теги төрт дашборд, үч тиркеме жана 50 даяр барак. jQuery жок, курабай эле — каалаган бэкендге кошуңуз.
Ар бири — чыныгыдай маалыматтары бар толук барак: карточкалар, графиктер жана таблицалар чогуу кантип иштээрин көрөсүз.
Сайттын трафиги бир караганда — ким кирет, кайдан, кайсы түзмөктөн жана кайсы барактарды окуйт.
Дүйнө жүзү боюнча сатуулар интерактивдүү картада — өлкөнү тандап, анын көлөмүн, өсүшүн, баасын жана алдыңкы бренддерин көрүңүз.
Мазмун сайтынын башкы экраны: келүүчүлөр, трафик жана адамдар формаларыңыз аркылуу жөнөткөн билдирүүлөр.
Дүкөн ээси эртең менен караган нерселердин баары — сатуулар, буйрутмалар, эң көп сатылгандар жана түгөнүп бараткандар.
Сатуу командасынын көз карашындагы воронка — келишимдер, лиддер, максаттар жана ким эмне кылат.
Компаниянын акчасы бир жерде — киреше, чыгым жана пайда, акча агымынын божомолу, бюджеттер жана төлөнбөгөн эсептер.
Колдоо кызматынын күнү — кайрылуулардын агымы, SLA боюнча жооп берүү убактысы, эң бош эмес сааттар жана кардарлардын канааттануусу.
Сүйрөө, жүктөө жана чыпкалоо — аракеттер жазылып бүткөн, API'ңизге туташтырууга даяр.
Үч панелдүү файл браузери: папкалар дарагы, плитка жана тизме көрүнүштөрү, маалымат панели.
FullCalendar'дагы күндөр боюнча тапшырмалар: статусу боюнча түстөлгөн, мөөнөтү өткөндөрү белгиленген.
Канбан тактасы — «Дайындалды», «Аткарылууда», «Текшерүүдө», «Бүттү» — үстүндө жыйынтык блоктору менен.
Сайтыңыздын формалары аркылуу жөнөтүлгөн билдирүүлөр үчүн кутуча — жооптор жана ички эскертүүлөр менен.
Көрүнүштөрү, SLA таймерлери жана тизмеден чыкпай эле жооп берүү үчүн каптал панели бар колдоо кезеги.
Этаптары, тапшырмалары, негизги чекиттери жана көз карандылык жебелери бар долбоордун убакыт сызыгы — график китепканасыз.
Долбоордон төлөнгөнгө чейинки эсептер — чыпкалуу тизме, басып чыгаруу үчүн алдын ала көрүү жана эсеп куруучу.
Ким, эмне жана качан кылды — күндөр боюнча, «чейин» жана «кийин» өзгөрүүлөрү менен.
Ар бир виджет — Odin.Component классынан мурастаган класс. Ал селекторуна туура келген ар бир элементке туташат, жөндөөлөрдү data-* атрибуттарынан окуйт жана кодуңуз уга турган odin:* окуяларын жөнөтөт.
Odin.init(container) чакырыңызclass Counter extends Odin.Component {
static selector = '[data-counter]'; // elements it attaches to
static defaults = { step: 1 }; // merged with data-* options
init() {
this.value = 0;
this.on(this.el, 'click', () => {
this.value += this.options.step;
this.emit('counter-change', { value: this.value }); // odin:counter-change
});
}
}
Odin.register('counter', Counter);/* One file sets the look of every page */
:root {
/* Sidebar */
--sidebar-bg: #0B132B;
--sidebar-text: #8D99AE;
/* Brand & states */
--primary: #00B4D8; /* change it, every button follows */
--primary-hover: #0096C7;
--success: #10B981;
--danger: #EF4444;
/* Surfaces */
--bg-body: #F8F9FA;
--bg-card: #FFFFFF;
}<!-- The demo reads its figures from a JSON file -->
<div data-finance-dashboard
data-source="json/finance.json"></div>
<!-- Your app: the same shape, from your own route -->
<div data-finance-dashboard
data-source="/admin/finance/data"></div>
<!-- No server yet? An inline copy is the fallback -->
<script type="application/json" id="finance-data">
{ "months": [ … ] }
</script>// A card was dragged to another kanban column
document.addEventListener('odin:task-move', (event) => {
const { id, status, sort } = event.detail;
fetch(`/api/tasks/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status, sort }),
});
});
// Same idea for every app: odin:invoice-save,
// odin:gantt-change, odin:permissions-save …Бир кечте окуп чыга турган жөнөкөй файлдар, керектүүсүн гана өзгөртө тургандай түзүлгөн.
Статикалык HTML, CSS жана JS. Файлдарды Laravel, Django, Rails, .NET же башка каалаганга көчүрүңүз.
Ар бир виджет — таза JavaScript'теги кичинекей класс. Плагиндер ошого жараша тандалган — Select2 эмес, Tom Select.
Түстөр, каптал панель жана беттер — бир файлдагы өзгөрмөлөр. Компоненттерге тийбей теманы өзгөртүңүз.
base, layout, components, pages жана vendor файлдарына бөлүнгөн — барак колдонгонду гана кошуңуз.
Компьютерде каптал панель сөлөкөттөр тилкесине чейин жыйналат, телефон жана планшетте сыртка жылып чыгат, ал эми таблицалар, тактачалар жана формалар экранга ыңгайлашат.
ApexCharts жана Chart.js — ар биринин өз демо барагы бар, кошумча дүйнө картасы. Графиктер data-атрибуттар аркылуу жөндөлөт.
Ролдордун карточкалары жана «модуль × аракет» укуктар матрицасы, сакталбаган өзгөрүүлөр тууралуу эскертүү менен — сиздин кирүү эрежелериңизге даяр.
Виджеттер odin:task-move сыяктуу окуяларды жөнөтөт, ошондуктан өзгөрүүлөрдү API'ңизге сактоо бир нече сап гана.
Жаңы фреймворкка өтүүнүн жана эч нерсени курастыруунун кереги жок — бэкендиңиз барактарды берет, калганын шаблон аткарат.
css, js жана images папкаларын долбоордун ачык папкасына салыңыз. Bootstrap жана плагиндер CDN аркылуу жүктөлөт.
Бир баракты негизги шаблонго бөлүңүз — каптал панель, үстүңкү панель, аяк бөлүк — жана мазмун аймагын өз көрүнүштөрүңүздөн толтуруңуз.
data-source ичинде өз маршрутуңузду көрсөтүп, өзгөрүүлөрдү API аркылуу сактоо үчүн odin:* окуяларын угуңуз.
Бардык барактардын каптал панели, үстүнкү панели жана төмөнкү бөлүгү бирдей, ошондуктан аларды эркин айкалыштырсаңыз болот.
Free акысыз версияда да бар Free менен Pro'ну салыштыруу
Белгилүү ачык булактуу китепканалар, ар бири керектүү барактарда гана жүктөлөт.
Лицензиялар, жүктөө жана шаблон долбооруңузга кантип кошулат.