Hafenstraße 12
Hamburg
CCS · 150 kWTyp2 · 22 kW
<DgButton />
/* voltgrid */ → ui-kit
VoltGrid UI-Kit
Aus wenigen Primitiven (Button, Tag, Window) entstehen Fach-Komponenten wie die Säulen-Karte, und daraus ganze Screens. Unten im Composer kannst du dir das Dashboard selbst zusammenbauen.
// die bausteine, so sehen sie auf der seite aus
<DgTag />
● frei● lädt● wartung
<VgStatTile />
aktive sessions
312
+12 %
<VgStationCard /> ← komponiert aus DgTag + DgButton
● frei
<VgLoadChart />
netzlast · 24h
4,2 MW peak
// der composer, bau dir dein dashboard
Links Bausteine anklicken, sie erscheinen auf der Leinwand. Hover über einen Block: nach oben/unten schieben oder entfernen. Unten schreibt sich der Komponenten-Code live mit.
leinwand (4)
Seitenkopf
/* voltgrid */ betreiber-dashboard
Netz-Übersicht
KPI-Zeile
aktive sessions
312
+12 %
säulen im netz
2.418
+38
uptime 30d
99,2 %
−0,1 %
Lastkurve
netzlast · 24h
4,2 MW peak
Säulen-Karte
Hafenstraße 12
Hamburg
CCS · 150 kWTyp2 · 22 kW
<template> <VgPageHead title="…" /> <VgStatTile v-for="kpi in kpis" … /> <VgLoadChart :series="load24h" /> <VgStationCard :station="station" /> </template>
// Dieselben Primitiven (DgButton, DgTag, DgWindow) stecken überall auf dieser Portfolio-Seite · einmal gebaut, überall konsistent.