# Kördiagram és Folyamatjelző sáv elem

> A Kördiagram és a Folyamatjelző sáv elem beállításai: százalék, méret, színek, feliratok és sávok.

Két elem mutat százalékos értéket: a **Kördiagram** körívvel, a **Folyamatjelző sáv** vízszintes sávokkal.

## Kördiagram

A **Kördiagram** kör alakú folyamatjelzőt rajzol, a közepén százalékkal, ikonnal vagy saját szöveggel.

![A Kördiagram elem beállításai a szerkesztőben](./kepek/elemek-4-pie-chart.webp)

*A Kördiagram elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Százalék**, a méret, a vonal, a **Tartalom** és a színek mezői látszanak.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Százalék** | A megjelenített érték, 0 és 100 között. | 60 |
| **Diagram mérete px-ben** | A kör átmérője képpontban. | 160 |
| **Vonalvastagság px-ben** | A jelzősáv vastagsága. | 8 |
| **Vonal végződése** | A vonal végének alakja: négyzetes, lekerekített vagy vágott. | Négyzetes |
| **Tartalom** | Mi jelenjen meg a kör közepén: százalék, ikon vagy szöveg. | Százalék |
| **Ikon** | A középső ikon. Csak akkor látszik, ha a **Tartalom** ikon. | Nincs |
| **Szöveg** | A középső egyedi szöveg. Csak akkor látszik, ha a **Tartalom** szöveg. | Nincs |
| **Sáv színe** | A jelzősáv színe. | Az elsődleges téma színe |
| **Háttérsáv színe** | A háttérpálya színe. | Világos háttérszín |
| **Skála hossza px-ben** | A skálajelek hossza. | Nincs |
| **Skála színe** | A skálajelek színe. Csak akkor látszik, ha a skála hossza meg van adva. | Nincs |

## Folyamatjelző sáv

A **Folyamatjelző sáv** animált, vízszintes sávokat jelenít meg felirattal és százalékkal. Egy elemben több sáv is lehet.

![A Folyamatjelző sáv elem beállításai a szerkesztőben](./kepek/elemek-4-progress-bar.webp)

*A Folyamatjelző sáv elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a két sáv listája, a **Hozzáadás sáv** gomb, majd a **Magasság**, a **Térközök**, a **Százalék megjelenítése** kapcsoló és a színek látszanak.

Minden sávnak három mezője van:

| Mező | Mit csinál |
| --- | --- |
| Felirat | A sáv szöveges címkéje. |
| Százalék | A kitöltöttség 0 és 100 között. Dinamikus adat is használható. |
| Sáv színe | Ennek a sávnak a kitöltőszíne. |

Az összes sávra érvényes beállítások:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Magasság** | A sávok magassága. | 8px |
| **Térközök** | A sávok közötti távolság. | 20px |
| **Százalék megjelenítése** | A százalékértéket a felirat mellett mutatja. | Be |
| **Sáv színe** | A sávok alapértelmezett színe. | Nincs |
| **Sáv háttérszíne** | A sávpálya háttere. | Nincs |
| **Sáv kerete** | A sávok szegélye. | Nincs |
| **Címke tipográfiája** | A feliratok betűstílusa. | Nincs |
| Százalék tipográfiája | A százalékértékek betűstílusa. Csak bekapcsolt százalékmegjelenítésnél látszik. | Nincs |