FőoldalKarrier PortálKomponensekLépéssorozatok

Lépéssorozatok

A Karrier Portál lépéssorozat komponensei, amelyek megmutatják a felhasználóknak, hol tartanak a jelentkezési folyamatban.

Vízszintes lépéssorozat

A vízszintes lépéssorozat komponens a jelentkezési folyamat állapotát jelzi, megmutatva a befejezett, jelenlegi és jövőbeli lépéseket.

Alap lépéssorozat

Alapadatok

Önéletrajz

Kérdőív

Beküldés

Kompakt lépéssorozat

Adatok

Kérdőív

Beküldés

Kész

Kódpélda

<div class="flex items-center justify-between">
  <div class="flex flex-col items-center">
    <div class="w-12 h-12 rounded-full bg-[#f50537] text-white flex items-center justify-center text-lg font-medium">1</div>
    <span class="text-sm text-[#333333] font-medium mt-2">Alapadatok</span>
  </div>
  <div class="flex-1 h-1 bg-[#f50537]"></div>
  <div class="flex flex-col items-center">
    <div class="w-12 h-12 rounded-full bg-[#f50537] text-white flex items-center justify-center text-lg font-medium">2</div>
    <span class="text-sm text-[#333333] font-medium mt-2">Önéletrajz</span>
  </div>
  <div class="flex-1 h-1 bg-[#f50537]"></div>
  <div class="flex flex-col items-center">
    <div class="w-12 h-12 rounded-full bg-[#F5F5F5] border-2 border-[#f50537] text-[#f50537] flex items-center justify-center text-lg font-medium">3</div>
    <span class="text-sm text-[#333333] font-medium mt-2">Kérdőív</span>
  </div>
  <!-- További lépések... -->
</div>

Lépés állapotok

1
Teljesített lépés: Piros háttér, fehér szám
2
Aktuális lépés: Fehér háttér, piros szegély és szám
3
Jövőbeli lépés: Fehér háttér, szürke szegély és szürke szám

Használati irányelvek

A lépéssorozat mindig a teljes folyamatot mutassa
Minden lépésnek egyértelmű, rövid neve legyen
A teljesített lépésekhez az Audi piros (#f50537) színt használd
Mobilnézetben használj kompakt verziót, vagy függőleges elrendezést

Függőleges lépéssorozat

A függőleges lépéssorozat komponens elsősorban mobilnézethez vagy komplex folyamatokhoz használható, ahol több információt kell megjeleníteni a lépésekhez.

Alapadatok megadása

Személyes adatok és elérhetőségek

Teljesítve

Önéletrajz feltöltése

Szakmai tapasztalatok és tanulmányok

Teljesítve

Kérdőív kitöltése

Motivációs és szakmai kérdések

Folyamatban

Jelentkezés beküldése

Adatok ellenőrzése és véglegesítése

Következő lépés

Kódpélda

<div class="relative">
  <div class="absolute h-full w-0.5 bg-[#f50537] left-6 top-0 z-0"></div>
  
  <div class="relative z-10 flex mb-6">
    <div class="w-12 h-12 rounded-full bg-[#f50537] text-white flex items-center justify-center text-lg font-medium shrink-0">1</div>
    <div class="ml-4">
      <h4 class="font-medium mb-1">Alapadatok megadása</h4>
      <p class="text-sm text-[#666666]">Személyes adatok és elérhetőségek</p>
      <span class="text-xs text-[#f50537] mt-1 inline-block">Teljesítve</span>
    </div>
  </div>
  
  <!-- További lépések... -->
  
  <div class="absolute h-full w-0.5 bg-[#E0E0E0] left-6 top-0 z-0 mt-[216px]"></div>
</div>

Használati irányelvek

A függőleges lépéssorozat ideális komplex folyamatokhoz
Minden lépéshez adjunk részletes leírást
A teljesített lépésekhez az Audi piros (#f50537) színt használd
A függőleges vonal vizuálisan összeköti a lépéseket a folytonosság jelzésére
Minden lépéshez adjunk státuszjelzést (Teljesítve, Folyamatban, stb.)

Státusz sáv

A státusz sáv komponens egy egyszerűbb megközelítést kínál a folyamat megjelenítésére, különösen hasznos olyan helyzetekben, ahol korlátozott a hely.

Százalékos előrehaladás

Jelentkezési folyamat75%

KezdésBeküldés

Lépésenkénti státusz sáv

3/4 lépés teljesítve

Adatok

Kérdőív

Beküldés

Kódpélda

<!-- Százalékos előrehaladás -->
<div class="mb-2 flex justify-between">
  <span class="text-sm font-medium">Jelentkezési folyamat</span>
  <span class="text-sm font-medium">75%</span>
</div>
<div class="w-full bg-[#F5F5F5] rounded-full h-2.5">
  <div class="bg-[#f50537] h-2.5 rounded-full" style="width: 75%"></div>
</div>

<!-- Lépésenkénti státusz sáv -->
<div class="w-full flex h-2.5 gap-1">
  <div class="flex-1 bg-[#f50537] h-2.5 rounded-l-full"></div>
  <div class="flex-1 bg-[#f50537] h-2.5"></div>
  <div class="flex-1 bg-[#f50537] h-2.5"></div>
  <div class="flex-1 bg-[#E0E0E0] h-2.5 rounded-r-full"></div>
</div>

Használati irányelvek

A státusz sáv hasznos, amikor egyszerűbb jelzésre van szükség
Mindig használj szöveges információt is a vizuális jelzés mellett
Az Audi piros (#f50537) szín jelzi a már teljesített részeket
Mobil nézetben is jól működik, mivel minimális helyet foglal