MagyarmagyarProgress Bar widget
Vonalas és kör alakú folyamatjelző, ikonnal, képpel vagy Lottie-animációval.
A Progress Bar widget adatot, százalékot vagy készültséget jelenít meg látványos formában. Két stílusa van: vízszintes sáv (Progress Bar) és kör (Pie Chart). A sáv mellé ikont, képet vagy Lottie-animációt is tehetsz.
A widget az ingyenes bővítményben van. Használat előtt kapcsold be: The Plus Addons → Widgets, keress rá a Progress Bar szóra, és kapcsold be.
Layout szakasz
Szekció neve “Layout szakasz”
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Main Style | Progress Bar (vízszintes sáv) vagy Pie Chart (kör) | Progress Bar |
| Style | A kiválasztott fő stílus változatai (képes választó) | Style 1 |
| Height | A sáv magassága: Small Height, Medium Height, Large Height (csak az első sávstílusnál) | Small Height |
| Dynamic Value (0-100) | A sáv vizuális kitöltése százalékban | 59 |
A Dynamic Value (0-100) csak a kitöltés animációját vezérli, magától nem jelenik meg szövegként. A sáv melletti szám a Content szakasz Number mezőjéből jön, és független a kitöltéstől: a kettő eltérő értéket is mutathat ugyanazon a sávon, ez normális.
Content szakasz
Szekció neve “Content szakasz”- Title és Sub Title: a sáv fölött látszó cím és alcím (alapérték:
The Plus). - Number: a megjelenített szám (alapérték: 59).
- Prefix/Postfix Symbol: a szám mellé írt jel (alapérték:
%). - Position: a jel a szám előtt vagy után áll (After Number, Before Number).
Icon szakasz
Szekció neve “Icon szakasz”A Select Icon listából választhatsz: None, Icon, Image vagy Lottie (alapérték: Icon). Ikonnál és képnél az Icon Position a sáv elé (Before) vagy mögé (After) teszi a megjelenítőt.
Lottie-animáció a folyamatjelzőben
Szekció neve “Lottie-animáció a folyamatjelzőben”Mozgó animációt tehetsz a statikus ikon helyére.
- Szerezz egy Lottie JSON-fájlt, amely nyilvános URL-en elérhető (például a LottieFiles oldalról).
- Add hozzá a Progress Bar widgetet.
- Az Icon szakaszban a Select Icon listából válaszd a Lottie lehetőséget.
- A megjelenő Lottie URL mezőbe illeszd be a JSON-fájl címét.
Fontos: a Lottie-fájlnak nyilvános URL-en kell lennie, ehhez a widgetben nincs fájlválasztó.
Kör alakú folyamatjelző
Szekció neve “Kör alakú folyamatjelző”A kör alakú változat kompakt módja egy statisztika vagy százalék megmutatásának.
- Add hozzá a Progress Bar widgetet.
- A Main Style listából válaszd a Pie Chart lehetőséget.
- A Style és a Round Style képes választóban válaszd ki a változatot.
- A Stílus fül Pie Chart szakaszában (amely csak kör fő stílusnál látszik) állítsd a Dynamic Value (0-1) értékét 0 és 1 közé, például
0.75a 75 százalékhoz.
A Pie Chart szakasz további beállításai: Pie Chart Circle Size, Thickness, Pie Empty Color, Chart Fill Color (egyszínű vagy átmenetes kitöltés) és a hozzájuk tartozó színek.
Ha a kör nem jelenik meg
Szekció neve “Ha a kör nem jelenik meg”Előfordulhat, hogy a kör helyett csak a szöveges mezők látszanak, rajzolt alakzat nélkül. A böngészőkonzolban ilyenkor a Uncaught TypeError: $el.circleProgress is not a function hiba áll: a kört rajzoló jQuery-bővítmény nem töltődött be az oldalra. Ez nem az Elementor panelen javítható beállítási hiba. Addig is használd a vonalas Progress Bar stílust, amely ettől függetlenül működik, és minden frissítés után ellenőrizd újra a kört.
Készült: