Keresés és szűrők
A Karrier Portál keresés és szűrő komponensei, amelyek segítenek a felhasználóknak megtalálni a releváns állásokat.
Keresőmező
A keresőmező komponens lehetővé teszi a felhasználók számára, hogy kulcsszavak alapján keressenek álláslehetőségeket.
Alap keresőmező
Bővített keresőmező
Kódpélda
<div class="flex w-full">
<input
type="text"
placeholder="Keresés pozíció, kulcsszó alapján..."
class="flex-1 px-4 py-3 border-y border-l border-[#E0E0E0] rounded-l-[4px] focus:ring-2 focus:ring-[#f50537] focus:border-[#f50537] focus:outline-none transition"
/>
<button class="bg-[#f50537] text-white px-4 py-3 rounded-r-[4px] hover:bg-[#940826] transition-colors">
<i class="fa-solid fa-search"></i>
</button>
</div>Használati irányelvek
- A keresőmezőt a felület tetején, jól látható helyen helyezd el
- A search gomb mindig az Audi piros (#f50537) színt használja
- A placeholder szöveg nyújtson példát a keresési lehetőségekre
- Mobilnézetben a keresőmező teljes szélességű legyen
Szűrőpanel
A szűrőpanel komponens lehetővé teszi a felhasználók számára, hogy különböző kritériumok alapján szűkítsék az álláslehetőségeket.
Szűrés
Kódpélda és használat
<div class="mb-4">
<label class="block text-[#666666] text-sm mb-1">Területek</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-[#f50537] focus:ring-[#f50537] mr-2" id="engineering" checked>
<label for="engineering" class="text-[#333333]">Mérnöki</label>
</div>
<!-- További checkbox elemek -->
</div>
</div>A szűrőpanel lehetővé teszi a jelöltek számára, hogy gyorsan megtalálják a számukra releváns pozíciókat.
Kulcsfontosságú tervezési szempontok:
- A szűrők könnyen érthetőek és egyértelműek
- Mobilon a szűrőpanel összecsukható formában jelenik meg
- Az eredmények azonnal frissülnek a szűrők változtatásakor (ha lehetséges)
- Egyértelmű vizuális visszajelzés az aktív szűrőkről
- A "Szűrés alkalmazása" gomb az Audi piros (#f50537) színt használja
Aktív szűrők
Az aktív szűrők komponens jelzi a felhasználóknak, hogy milyen szűréseket alkalmaztak, és lehetőséget biztosít ezek egyszerű eltávolítására.
Aktív szűrők
Az aktív szűrők jelzik a felhasználó számára, hogy mely szűrési feltételek vannak érvényben, és lehetővé teszik azok egyszerű eltávolítását. Ez növeli a felhasználói élményt és a transzparenciát a keresési folyamatban.
Kódpélda
<div class="p-4 border border-[#E0E0E0] rounded-[4px]">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium">Aktív szűrők</h4>
<button class="text-[#f50537] text-sm hover:underline">Összes törlése</button>
</div>
<div class="flex flex-wrap gap-2">
<div class="flex items-center bg-[#F5F5F5] px-3 py-1 rounded-full text-sm">
<span>Mérnöki</span>
<button class="ml-2 text-[#666666] hover:text-[#f50537]">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<!-- További aktív szűrők -->
</div>
</div>Használati irányelvek
- Az aktív szűrőket a szűrőpanel és az eredmények között helyezd el
- Biztosíts lehetőséget az egyenkénti és az összes szűrő eltávolítására
- A szűrők eltávolítása után azonnal frissítsd az eredményeket
- Az aktív szűrők törlése gomb használja az Audi piros (#f50537) színt