Zum Inhalt springen
ZVV
lightbox

Lightbox

Vollbild für nicht-interaktive Artefakte: hover über den Inhalt → ⛶. Ein Blur-Layer (Glassmorphism), Dialog-Breite aus dem Seitenverhältnis, ESC/Backdrop/Button schliessen, Focus-Trap mit Restore. Für interaktive Modals (Formulare, Bestätigungen) weiterhin den Dialog verwenden.

Atlas Spec

Bild

Beliebige children — hier ein <img> (die OG-Card der Seite) mit aspectRatio 1200∶630.

Atlas OG-Card — Blau-Gradient mit Meridian-Globus

Generiertes Diagramm (SVG-String)

Für Generator-Output (Organigramm, Zuständigkeiten) nimmt der DiagramLightbox-Wrapper den SVG-String entgegen und liest die Ratio aus der viewBox — so entsteht das Verhalten auf /organigramm.

Zuständigkeiten im ZVV Zuständigkeiten und Arbeitsteilung zwischen Kanton und 160 Gemeinden und dem Verbund: ZVV → 8 marktverantwortliche Verkehrsunternehmen → 26 weitere Verkehrsunternehmen und Transportbeauftragte. Stand: Juli 2026. Zuständigkeiten im ZVV Kanton Regierungs-, Kantonsrat, KEVU Grundsätze über Entwicklung, Angebot und Tarif, Rahmenkredit, Budget 160 Gemeinden Mitwirkung Fahrplan Anhörung Tarif ZVV Verkehrsrat, Direktion Strategisches Marketing, Finanzierung und Verkehrsplanung 8 marktverantwortliche Verkehrsunternehmen PostAuto Zürich, S-Bahn Zürich, SZU, SBW, VBG, VBZ, VZO, ZSG Angebotsplanung, operatives Marketing und Produktion 26 weitere Verkehrsunternehmen und Transportbeauftragte Leistungserstellung Stand: Juli 2026

Hochformat — Ratio-Sizing

Bei ratio < 1 begrenzt 85vh·ratio die Dialog-Breite: das Hochformat bleibt komplett sichtbar statt vertikal zu überlaufen — der Grund, warum die Breite nicht fix 90vw ist.

LinienverlaufZürich HBHardbrückeAltstettenSchlierenDietikonSpreitenbach

Verwendung

@zvvch/atlas/uitsx
import { Lightbox } from '@zvvch/atlas/ui'

// Beliebiger nicht-interaktiver Inhalt als children;
// aspectRatio (Breite/Höhe) steuert die Dialog-Breite: min(90vw, 85vh·ratio)
<Lightbox label="Netzplan 2026" aspectRatio={1200 / 630}>
  <img src="/netzplan.svg" alt="Netzplan 2026" />
</Lightbox>

// Vorgerenderte SVG-Strings (Generator-Diagramme): Wrapper extrahiert
// die Ratio aus der viewBox — example/components/showcase/diagram-lightbox.tsx
<DiagramLightbox svg={svgString} label="Organigramm" />
  • – A11y garantiert: role="dialog" + Focus-Trap mit Rückgabe an den Trigger (WCAG 2.1.2, 2.4.3); Trigger ist auch per Tastatur erreichbar.
  • – Scroll-Lock ohne Layout-Sprung; Schliessen via ESC, Backdrop-Klick oder Button.
  • – Für Widgets auf zvv.ch/AEM wird KEINE Atlas-Lightbox mitgeliefert — dort dockt das Embed an die Site-Lightbox an (Zero-JS, Pattern §7; Generator auf /organigramm).