kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

4.1-A: ExpansionCard.vue komponens + animaciok #249

New Issue
Open
opened 2026-06-08 20:05:25 +02:00 by kincses · 0 comments
kincses commented 2026-06-08 20:05:25 +02:00
Owner
Copy Link

Merfoldko: Frontend Architektura 2.0 & Dinamikus Megjelenitesi Rendszer
Cel: App Store tipusu kiterjedo kartya komponens letrehozasa Vue 3-ban.

Fuggosegek (Dependencies)

  • Bemenet: #232 (Router - a komponens a nested route-okban jelenik meg)

Implementacios Reszletek

  1. ExpansionCard.vue (frontend/src/components/ExpansionCard.vue)

    • Props: title, subtitle, icon, expanded (v-model), variant (default | premium | glass)
    • Slots: #header, #default, #actions
    • Header kattintasra toggle
    • Chevron ikon forgasa expandalt allapotban

  2. Animaciok (main.css)

    • .expand-enter-active, .expand-leave-active: transition all 0.3s ease
    • .expand-enter-from, .expand-leave-to: max-height 0, opacity 0
    • .expand-enter-to, .expand-leave-from: max-height 500px, opacity 1

  3. Variant-ok:

    • default: feher kartya szurke szegellyel
    • premium: glassmorphism effekt (blur, atlatszosag)
    • glass: atlatszo kartya minimalis szegellyel

Erintett fajlok

  • frontend/src/components/ExpansionCard.vue (uj)
  • frontend/src/assets/main.css
**Merfoldko:** Frontend Architektura 2.0 & Dinamikus Megjelenitesi Rendszer **Cel:** App Store tipusu kiterjedo kartya komponens letrehozasa Vue 3-ban. ### Fuggosegek (Dependencies) - **Bemenet:** #232 (Router - a komponens a nested route-okban jelenik meg) ### Implementacios Reszletek 1. **ExpansionCard.vue** (frontend/src/components/ExpansionCard.vue) - Props: title, subtitle, icon, expanded (v-model), variant (default | premium | glass) - Slots: #header, #default, #actions - Header kattintasra toggle - Chevron ikon forgasa expandalt allapotban 2. **Animaciok** (main.css) - .expand-enter-active, .expand-leave-active: transition all 0.3s ease - .expand-enter-from, .expand-leave-to: max-height 0, opacity 0 - .expand-enter-to, .expand-leave-from: max-height 500px, opacity 1 3. **Variant-ok:** - default: feher kartya szurke szegellyel - premium: glassmorphism effekt (blur, atlatszosag) - glass: atlatszo kartya minimalis szegellyel ### Erintett fajlok - frontend/src/components/ExpansionCard.vue (uj) - frontend/src/assets/main.css
kincses added the Status: To DoScope: FrontendType: Feature labels 2026-06-08 20:05:25 +02:00
kincses added this to the Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer milestone 2026-06-08 20:07:43 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Role: Admin
👑 Role: Admin
 Role: User
👤 Role: User
 Scope: API
🔌 Scope: API
 Scope: Backend
🏗️ Scope: Backend
 Scope: Core
⚙️ Scope: Core
 Scope: Database
Scope: Frontend
🖥️ Scope: Frontend
 Scope: Robot
Status: Blocked
Status: Done
Status: In Progress
Status: To Do
Type: Bug
🐞 Type: Bug
 Type: Database
💾 Type: Database
 Type: Feature
✨ Type: Feature
 Type: Model
🧠 Type: Model
 Type: Refactor
Type: Refactor
Type: Script
📜 Type: Script
No Label Scope: Frontend Status: To Do Type: Feature
Milestone
No items
No Milestone Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer
Projects
Clear projects
No project
Assignees
Clear assignees
kincses
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kincses/service-finder#249
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?