Welcome to VklassMainWeb
Experience the complete UI design system in action
Vklass UI-komponenter Demo
Denna sida demonstrerar alla UI-komponenter och mönster från Vklass design system baserat på Athena SCSS/CSS.
Statuskort (Modern Variant)
Kompakta statuskort för snabb översikt. Detta är en acceptabel variation från standard Athena-komponenter för förbättrad användarvänlighet.
Design Note: Dessa statuskort är en modern variation som avviker från standard Athena-komponenter. Variationen är acceptabel eftersom den förbättrar användbarheten för betygsregistrering samtidigt som den behåller kärnvarumärket (färgpalett, spacing, typografi).
Snabbåtkomst till funktioner
Moderna, kompakta kort för snabb åtkomst till vanliga funktioner i Vklass.
Meddelanden & Aviseringar
VK-Message-Box (Athena)
Element för att visa återkoppling till användare enligt Athena design system.
Standard varianter
Outlined variant
Med ikon
VK-State-Box (Athena)
Färgkodade statusindikator-rutor för att visa tillstånd.
Standard state boxes
Godkänd
Ej godkänd
Väntar
Delvis klar
Info
Klar
Varning
Med alert-indikator
Närvarande
Frånvarande
Sen
Placeholder och tom status
Ej ifyllt
Med expanderbar popout
Betyg
Note: Popout visas när data-vk-popout-expanded="true" eller aria-expanded="true"
Knappar
Standard Button Types
Button Variants (Athena)
Buttons with Icons
Formulärelement & Dropdowns
Demonstration av alla dropdown-typer enligt Vklass design system.
Kort
Elevutveckling
Spåra elevprestationer och milstolpar
Övervaka individuell elevutveckling över alla ämnen och uppgifter.
Uppgiftsstatus
Aktuella färdigställandegrader för uppgifter
Visa och hantera alla väntande och genomförda uppgifter.
Klassanalys
Omfattande prestandamått för klassen
Analysera klassprestationstrender och identifiera områden för förbättring.
Datatabeller
|
check
|
Namn
|
E-post | Betyg | Status | Åtgärder |
|---|---|---|---|---|---|
|
check
|
Anna Andersson | anna.andersson@example.com | A | Active | |
|
check
|
Erik Eriksson | erik.eriksson@example.com | B+ | Väntande | |
|
check
|
Maria Svensson | maria.svensson@example.com | C | Inaktiv | |
|
check
|
Johan Johansson | johan.johansson@example.com | A- | Active |
VK-Content-Table (Athena)
Enkel datatabell med Athena spacing-system. Designad för dataintensiva användare med fokus på informationstäthet.
Standard vk-content-table (8px 12px padding)
| Elev | Uppgift 1 | Uppgift 2 | Uppgift 3 | Genomsnitt |
|---|---|---|---|---|
| Anna Andersson | A | B | A | A- |
| Erik Eriksson | B | B | C | B |
| Maria Svensson | C | D | C | C |
| Johan Johansson | A | A | A | A |
Dense variant (6px 10px padding - maximal informationstäthet)
| Elev | Måndag | Tisdag | Onsdag | Torsdag | Fredag | % |
|---|---|---|---|---|---|---|
| Anna Andersson | N | N | N | N | N | 100% |
| Erik Eriksson | N | F | N | N | N | 80% |
| Maria Svensson | N | N | N | S | N | 100% |
| Johan Johansson | N | N | N | N | F | 80% |
Comfortable variant (16px padding - för speciella fall)
| Kurs | Lärare | Elever | Status |
|---|---|---|---|
| Matematik 7 | Thomas Nilsson | 25 | Pågående |
| Engelska 7 | Eva Johansson | 23 | Pågående |
Middle-aligned variant (vertikalt centrerat innehåll)
| Status | Uppgift | Inlämningsdatum | Betyg |
|---|---|---|---|
| check_circle | Matematikuppgift 1 | 2024-11-10 | A |
| schedule | NO-projekt | 2024-11-15 | - |
| cancel | Historieuppsats | 2024-11-08 | F |
Interactive variant (hover-effekt på desktop)
| Elev | E-post | Klass | Åtgärd |
|---|---|---|---|
| Anna Andersson | anna.andersson@edu.kommun.me | 7A | |
| Erik Eriksson | erik.eriksson@edu.kommun.me | 7A | |
| Maria Svensson | maria.svensson@edu.kommun.me | 7B |
Design Philosophy: Vklass är designad för professionella användare som arbetar mycket med datatabeller. Standard spacing prioriterar informationstäthet och skanningseffektivitet över generöst whitespace.
Laddningstillstånd
Framstegsindikatorer
Närvarodiagram - Tom Status
Donut chart widget som visar närvarostatistik i tomt tillstånd.
Närvaroöversikt med Kalender
Komplett närvarowidget med donut chart och månadskalender.
Nivå och Publicering i Tabeller
Tabellkolumner med kunskapsnivåikoner och publiceringsstatus.
|
NIVÅ
arrow_drop_up
|
PUBLICERAT
arrow_drop_down
|
|---|---|
|
F-varning
|
|
|
Godtagbara kunskaper
|
Fredag 4 nov, 25 kl 14.39
|
|
Godtagbara kunskaper
|
|
Betygsrapport klass/elev
Omfattande betygsöversikt med färgkodade betygsceller för snabb identifiering av elevprestationer.
|
Elevnamn
|
Klass | Årskurs | BI | BL | EN | FY | GE | HI | HKK | IDH | KE | MA | MU | RE | SH | SI |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Anna Andersson | 7A | 7 | C | B | A | C | D | C | B | A | C | A | E | C | C | D |
| Erik Eriksson | 7A | 7 | E | E | F | E | E | E | C | B | E | F | C | E | E | D |
| Maria Svensson | 7B | 7 | A | B | A | B | A | C | C | A | B | B | A | C | A | D |
| Johan Johansson | 7A | 7 | ** | E | C | ** | E | E | B | ** | E | E | ** | E | E | E |
Frånvarostatistik - Diagram
Trenddiagram och stapeldiagram för frånvaroanalys över tid och per klass.
Frånvaro per månad
Klass och kurs
Frånvaro per klass
Ikonsystem
Ikonstorlekar
Ikonmärken without profile picture (Athena Badge Sizes)
Ikonmärken with profile picture (Athena Badge Sizes)
Dialoger & Modaler
Expanderbara Paneler
Denna panel innehåller detaljerad elevinformation inklusive betyg, närvaro och kontaktuppgifter.
Kurslärplan, uppgifter och information om framstegsspårning.
Kursgenomförande: 85%
Komplett lista över inlämnade uppgifter och deras betyg.
Verktygsklasser & Layout (Athena)
Flexbox Layout-exempel
Fast objekt
Flexibelt objekt (växer för att fylla utrymme)
Comprehensive Flexbox Examples (All Athena Modifiers)
Direction Modifiers
vk-flex--dir-column - Column direction
Alignment Modifiers
vk-flex--v-align-center - Vertically center items
vk-flex--v-align-end - Align items to bottom
vk-flex--h-align-center - Horizontally center items
vk-flex--space-between - Space items evenly
Gap Modifiers
vk-flex--gap - Standard gap (13px)
vk-flex--gap-double - Double gap (26px)
Item Modifiers
vk-flex__item--fixed and vk-flex__item--flexible
Spacing-exempel (Athena Spacing System)
VK-Sidebar-Layout (Athena)
Responsiv sidebar-layout där sidebar placeras på sidan för större skärmar och staplas för mindre skärmar.
Basic Sidebar Layout
Sidebar Layout with Context
VK-Columns-Container (Athena)
Renderar barnelement i flera kolumner baserat på skärmstorlek: 1 på mobil, 2 på surfplatta, 3 på stor desktop.
Column Item 1
Första kolumnobjektet.
Column Item 2
Andra kolumnobjektet.
Column Item 3
Tredje kolumnobjektet.
Column Item 4
Fjärde kolumnobjektet.
Column Item 5
Femte kolumnobjektet.
Column Item 6
Sjätte kolumnobjektet.
VK-Masonry (Athena)
CSS-baserad masonry-layout: 1 kolumn på mobil, 2 på surfplatta, 3 på desktop.
Masonry Item 1
Kort innehåll.
Masonry Item 2
Längre innehåll med mer text för att visa hur masonry-layouten anpassar sig till olika höjder. Detta kort har betydligt mer innehåll än de andra.
Masonry Item 3
Medium text.
Masonry Item 4
Kort innehåll igen.
Masonry Item 5
Detta är ett masonry-kort med varierande höjd. Layouten justeras automatiskt baserat på innehållets storlek.
Masonry Item 6
Sista objektet.
VK-Field (Athena)
Formulärfält-container enligt Athena design system.
Elevens fullständiga namn enligt folkbokföring.
Detta fält är endast för visning (vk-display).
VK-Hidden-Scroll (Athena)
Scrollbart område med dold scrollbar för cleaner UI.
Scrollbart innehåll
Detta är en scrollbar som är dold på overlay scrollbar-system (Mac, iOS, Android).
Scrollbaren visas fortfarande på Windows och andra system med permanent scrollbar.
Lägg till mer innehåll för att se scrollning...
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Duis aute irure dolor in reprehenderit in voluptate velit.
Excepteur sint occaecat cupidatat non proident.
Sunt in culpa qui officia deserunt mollit anim id est laborum.
VK-Icon-Badge-Indentation (Athena)
Auto-indenterar element som följer ett icon-badge.
VK-Text-On-Phone (Athena)
Helper där __text sub-element endast visas på mobil.
Typografi
Rubrik 1 - Huvudsidestitel
Rubrik 2 - Sektionstitel
Rubrik 3 - Undersektion stitel
Detta är ett vanligt stycke med normal text. Det demonstrerar standardtypsnittsstyling och radhöjd som används i hela applikationen. Texten ska vara lätt att läsa och välplacerad.
Detta är liten text som används för bildtexter, fotnoter och sekundär information.
Detta är versaltext som används för menyalternativ och etiketter
Detta är en länk i ett stycke för att visa länkstyling.
Athena Utility Classes
Width Utilities
Border Utilities
Display & Positioning Utilities
Opacity & Visibility Utilities
Other Utilities
List Utilities
- list-style-reset - no bullets
- Second item
- Third item
- list-spacing - gap between items
- Second item with spacing
- Third item with spacing
Athena Color Utilities
Text Color Classes (vk-cl-*)
Background Color Classes (vk-bg-*)
Grayscale Color Classes
Module Color Classes
Entity Color Classes
Messenger Role Colors
Athena Accessibility Classes
Screen Reader Classes
The button contains hidden text "Screen reader only text:" for screen readers
Focus Outline Utilities
Visibility Classes (responsive breakpoints)
Athena Print Classes
Klasser för utskriftsoptimering. Testa med utskriftsförhandsgranskning (Ctrl+P / Cmd+P).
Print Visibility
Expansion Panel Print Behavior
vk-expansion-panel--expand-in-print: Innehåll alltid inkluderat vid utskrift, även när stängt.
hide-closed-expansion-panels-in-print: Wrapper för att dölja stängda paneler vid utskrift.
Ikon med Notifieringsräknare
Demonstration av hur man visar räknare på ikoner för att indikera antal olästa meddelanden, aviseringar etc.
Användning: Notifieringsräknaren visar antal olästa/väntande objekt på en ikon. Den röda cirkeln med vit text är tydligt synlig och följer WCAG-kontrastkrav.