FabMenu Demo

FabMenu

Floating Action Button mit aufklappbarem Menü. Standardmäßig fixiert rechts unten auf der Seite – alternativ als Inline-Variante direkt im Elementfluss verwendbar.

Standard (fixed)

Der FAB-Button ist rechts unten auf dieser Seite fixiert. Klicke darauf, um das Menü zu öffnen.

Zuletzt geklickt: –

Aktiver Eintrag (IsActive)

Ein Eintrag kann als aktiv markiert werden – z. B. für den aktuell gewählten Modus oder die aktive Ansicht.

Aktive Ansicht: Liste

Inline-Modus

Mit Inline="true" sitzt der FAB im normalen Elementfluss – ideal für Toolbars oder Kartenbereiche. Das Menü öffnet sich nach oben.

Inline-Aktion: –

Mehrere Inline-FABs können nebeneinander platziert werden.

Parameter

Über Icon (Material-Symbol-Name) und Title (Tooltip) ist der FAB-Button frei konfigurierbar. Die Einträge werden als List<FabMenuItemModel> übergeben – jeder Eintrag hat Text, Icon, OnClick und optional IsActive. Mit Inline="true" wechselt der FAB von der fixed-Positionierung in den normalen Dokumentfluss.

SKILL.md – Fabmenu

---
name: FabMenu
description: Onesown Blazor Komponente FabMenu (Navigation). Verwende diesen Skill wenn du die FabMenu-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# FabMenu

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Navigation  

Floating Action Button mit aufklappbarem Menü – positioniert sich fixed rechts unten. Unterstützt beliebig viele Einträge via FabMenuItemModel und einen optionalen Inline-Modus.

**Live-Demo:** https://components.schini.com/demo/fabmenu  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Icon`` | ``string`` | ``"dashboard_customize"`` | Material Symbol Icon-Name des FAB-Buttons (Standard: dashboard_customize). |
| ``Title`` | ``string`` | ``"Menü öffnen"`` | Tooltip-Text des FAB-Buttons. |
| ``Items`` | ``List<FabMenuItemModel>`` | ``[]`` | Liste der Menüeinträge. |
| ``Inline`` | ``bool`` |  | Inline-Modus: Der FAB sitzt im Elementfluss (nicht fixed rechts unten), Menü öffnet nach oben. |

## Hinweise

- Standard: fix rechts unten; <c>Inline="true"</c> für Position im Elementfluss
- Items befüllen: <c>Items="new List&lt;FabMenuItemModel&gt; { new() { Text = "...", Icon = "...", OnClick = EventCallback } }"</c>
- Aktiven Eintrag hervorheben: <c>IsActive = true</c> am <c>FabMenuItemModel</c>
- Icon und Tooltip des FAB-Buttons anpassen: <c>Icon="add"</c> und <c>Title="Neu erstellen"</c>
- Menü schließt automatisch nach Klick auf einen Eintrag