Ātrā sākšana
Gatavo template atveriet no dist/index.html bez build soļa. Izstrādei lietojiet src/pages/ un pārģenerējiet abus slāņus ar npm run build.
Pārskatīt gatavo versiju
Atveriet dist mapi pārlūkā. Visas saites, vendor faili un mock dati darbojas lokāli.
Atvērt pārskatuUzturēt avotu
Mainiet renderētājus, CSS tokenus un mock datus. README apraksta generēšanu un Vite pārbaudi.
npm run buildFailu loma
| Ceļš | Saturs |
|---|---|
dist/ | Pašpietiekama, tieši atverama gatavā versija |
src/assets/ | CSS, JavaScript, vendor, fonti, mock dati |
src/pages/ | Ģenerētas HTML lapas uzturēšanai un Vite build |
scripts/ | Datu sinhronizācija, lapu ģenerēšana, build un testi |
Dizaina tokeni
Krāsas, tipogrāfija, atstarpes, rādiusi, ēnas un kustība nāk no tokens.css. Komponentes lieto semantiskos --app-* mainīgos, nevis raw hex vērtības.
--app-primary--app-accent--app-success--app-dangerGaišais un tumšais režīms maina tokenu vērtības zem data-bs-theme atribūta. Liellietotāja izvēle tiek saglabāta localStorage un piemērota pirms CSS ielādes.
App shell
Shell sastāv no vienas sānjoslas, topbar, viena main satura un footer. Mobilajā platumā sānjosla kļūst par off-canvas paneli ar fokusa slazdu, Esc aizvēršanu un fokusa atgriešanu.
| Stāvoklis | Pārbaude |
|---|---|
| Expanded | 264 px sānjosla ar redzamiem apakšizvēlnēm |
| Collapsed | 76 px režīms ≥ 1200 px; izvēle saglabājas |
| Off-canvas | < 992 px; fokusa slazds, backdrop un Esc |
| Command palette | Ctrl/Cmd+K; bultiņas, Enter, Esc un fokusa atgriešana |
Komponentes
Katalogā ir 54 apstiprinātās komponentes. Katrai ir definēti default, hover, active, focus, disabled, loading un error stāvokļi; demo lapas parāda galvenos variantus un koda paraugus.
| ID | Komponente | Grupa | Demonstrācija |
|---|---|---|---|
L-01 | App shell | L | Skatīt piemēru |
L-02 | Sānjosla | L | Skatīt piemēru |
L-03 | Topbar | L | Skatīt piemēru |
L-04 | Breadcrumbs | L | Skatīt piemēru |
L-05 | Page header | L | Skatīt piemēru |
L-06 | Content container | L | Skatīt piemēru |
L-07 | Footer | L | Skatīt piemēru |
L-08 | Tabs | L | Skatīt piemēru |
L-09 | Pagination | L | Skatīt piemēru |
L-10 | Stepper / wizard | L | Skatīt piemēru |
L-11 | Command palette | L | Skatīt piemēru |
D-01 | KPI kartīte | D | Skatīt piemēru |
D-02 | Statistikas kartīte | D | Skatīt piemēru |
D-03 | Diagrammas kartīte | D | Skatīt piemēru |
D-04 | Datu tabula | D | Skatīt piemēru |
D-05 | Saraksts | D | Skatīt piemēru |
D-06 | Timeline | D | Skatīt piemēru |
D-07 | Activity feed | D | Skatīt piemēru |
D-08 | Badge / tag | D | Skatīt piemēru |
D-09 | Avatar | D | Skatīt piemēru |
D-10 | Progress | D | Skatīt piemēru |
D-11 | Kanban | D | Skatīt piemēru |
D-12 | Empty state | D | Skatīt piemēru |
D-13 | Skeleton | D | Skatīt piemēru |
F-01 | Teksta ievade | F | Skatīt piemēru |
F-02 | Textarea | F | Skatīt piemēru |
F-03 | Select | F | Skatīt piemēru |
F-04 | Checkbox / radio | F | Skatīt piemēru |
F-05 | Switch | F | Skatīt piemēru |
F-06 | Faila augšupielāde | F | Skatīt piemēru |
F-07 | Datuma / laika izvēle | F | Skatīt piemēru |
F-08 | Input group | F | Skatīt piemēru |
F-09 | Validācija | F | Skatīt piemēru |
F-10 | Formas izkārtojums | F | Skatīt piemēru |
F-11 | Meklēšanas josla | F | Skatīt piemēru |
F-12 | Filtru josla | F | Skatīt piemēru |
F-13 | Form wizard | F | Skatīt piemēru |
F-14 | Rich text editor | F | Skatīt piemēru |
O-01 | Alert | O | Skatīt piemēru |
O-02 | Toast | O | Skatīt piemēru |
O-03 | Modal | O | Skatīt piemēru |
O-04 | Offcanvas | O | Skatīt piemēru |
O-05 | Tooltip | O | Skatīt piemēru |
O-06 | Popover | O | Skatīt piemēru |
O-07 | Spinner | O | Skatīt piemēru |
O-08 | Apstiprinājuma dialogs | O | Skatīt piemēru |
O-09 | Error state | O | Skatīt piemēru |
O-10 | Print styles | O | Skatīt piemēru |
A-01 | Login | A | Skatīt piemēru |
A-02 | Register | A | Skatīt piemēru |
A-03 | Forgot / reset password | A | Skatīt piemēru |
A-04 | 2FA | A | Skatīt piemēru |
A-05 | Profile menu | A | Skatīt piemēru |
A-06 | Session / lock screen | A | Skatīt piemēru |
Pieejamība
Mērķis ir WCAG 2.2 AA. Katrai lapai ir viens h1, semantiski landmarki, redzams fokuss un pilna tastatūras navigācija. Dinamiskās ziņas tiek paziņotas ar statusa reģioniem, bet kļūdas — ar alert semantiku.
- Pirmais Tab punkts ir “Pāriet uz galveno saturu”.
- Ikona nav vienīgais darbības nosaukuma avots.
- Destruktīvā dialogā sākotnējais fokuss ir uz “Atcelt”.
- Tabulu kārtošana lieto
aria-sort, bet rindu atlase — skaidrus aria nosaukumus. - Diagrammām ir teksta kopsavilkums un tabulas fallback.
Pielāgošana
Zīmola krāsu maiņa notiek semantiskajos tokenos. Jaunus komponentus pievieno ar tām pašām CSS slāņu, fokusa, stāvokļu un ARIA konvencijām. Drukas stili atrodas print.css un paslēpj navigāciju, saglabājot datu tabulas.
:root {
--app-primary: /* jūsu zīmola krāsa */;
--app-accent: /* jūsu akcenta krāsa */;
}Atbalsts
Simulētā atbalsta plūsma ir pieejama kļūdu lapās un pieteikšanās ekrānos. Produkcijas projektā aizstājiet docs-index.html#support saiti ar organizācijas atbalsta procesu un incidentu pieteikšanas URL.
Privātums
Template neizsauc backend un nesūta datus ārpus pārlūka. Mock dati ir demonstrācijas saturs; localStorage glabā tikai tēmas un sānjoslas izvēli. Pirms produkcijas lietošanas aizstājiet parauga privātuma un lietošanas noteikumu saites.
Nekas neatbilst meklēšanaiMēģiniet citu atslēgvārdu.