Ndicazion per l widget

Nosc tëmp sun vosta homepage – l widget dl tëmp

Cun l widget dl servisc meteo dla Provinzia Autonoma de Bulsan pudëis bel scëmpl senté ite la previjions dl tëmp diretamënter sun vosta plata web.

Pudëis crì ora danter l widget de previjions per 3 dis o l widget cherta dl tëmp de Südtirol dl dì atuel.

Widget previjions per 3 dis

per l Südtirol,
per un di 116 chemuns,
per una dla 7 grupes de crëps.

Widget cherta

tëmp de Südtirol dl dì atuel,
tëmp sa mont dl dì atuel.

Chirëde n iede ora l luech, la rujeneda, l format y cupiede dainora l code-HTML tlo dessot tla luegia che ulëis de vosta plata web.

I culëures y la grandëza dl widget possa unì adatà coche ulëis.

CSS-Anpassung (Design & Layout)

Unser Wetter-Widget lässt sich einfach über CSS-Variablen an das Design deiner Website anpassen.
Du kannst Farben, Abstände, Größen und das responsive Verhalten steuern – ohne eigenes CSS schreiben zu müssen.

Die Variablen können direkt am Widget gesetzt werden oder vom übergeordneten Container übernommen werden.

Layout & Responsivität

Diese Variablen steuern, wie die Wetterkarten angeordnet sind und sich an unterschiedliche Bildschirmgrößen anpassen:

Variable	Bedeutung	Standard
`--weather-gap`	Abstand zwischen den einzelnen Wetterkarten	`1rem`
`--weather-switcher-breakpoint`	Container-Breite, unter der die Karten automatisch untereinander (eine Spalte) angezeigt werden. 0px bedeutet: kein erzwungener Wechsel, normales Umbruch-Verhalten.	`0px`
`--weather-card-min-width`	Minimale Breite einer Wetterkarte. Bestimmt, wann ein Zeilenumbruch oder vertikales Layout erfolgt.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-card-max-width`	Maximale Breite einer Wetterkarte. Sinnvoll für mobile Geräte, damit Karten nicht zu groß werden.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-padding`	Innenabstand der Karten	`0.75rem`
`--weather-border-radius`	Abrundung der Karten-Ecken	`0.5rem`

Farben & Design

Mit diesen Variablen passt du die Farben und Lesbarkeit an dein Website-Design an:

Variable	Bedeutung	Standard
`--weather-min-temp-color`	Hintergrundfarbe für niedrige Temperaturen	`#345d8e`
`--weather-max-temp-color`	Hintergrundfarbe für hohe Temperaturen	`#d11525`
`--weather-badge-text-color`	Textfarbe der Temperatur-Badges	`white`
`--weather-bg`	Hintergrundfarbe der Wetterkarten	`#fff`
`--weather-text-primary`	Haupttextfarbe	`#000`
`--weather-text-secondary`	Sekundäre Textfarbe (Labels, Copyright, Ladezustand)	`#666`
`--weather-shadow`	Schatten der Karten	`0 0.125rem ...`

Beispiel: Widget anpassen

<weather-app-st style=" --weather-gap: 2rem; --weather-switcher-breakpoint: 500px; --weather-bg: #f5f5f5; --weather-text-secondary: #888; --weather-badge-text-color: #000; " ></weather-app-st>

Ergebnis bei --weather-switcher-breakpoint: 500px:

Container breiter als 500px → Karten nebeneinander
Container schmaler als 500px → Karten untereinander (eine Spalte)

Ideal für mobile Layouts

Meteo