noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overflow an app bar's trailing actions below medium

Browse Source 
Plan step 25, item 7 (navigation Missing: "App bar, trailing-action
overflow at small widths"). `<x-app-bar :actions="[...]">` takes the
trailing actions as a list whose entries take <x-menu-item>'s props plus
any action attribute. M3 allows up to two trailing icon buttons, and up
to four on larger screens, and lets trailing actions collapse into an
overflow menu at smaller breakpoints: below medium the bar keeps at most
two icon buttons, from medium four, the "More options" button counted
among them, the rest in its menu. Both forms render and media queries
pick one, so there is no script and no flash; each width has its own
menu so the arrow keys never reach a hidden row. The actions slot still
takes markup and never overflows.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 10:57:50 +02:00
co-authored by Claude Opus 5
parent 12cdeaaf67
commit 092100c6ae
5 changed files with 223 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/bars.blade.php
+14 -1
View File
@@ -7,11 +7,24 @@
<x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
<x-slot:actions>
<x-button icon="search" tooltip="Search" />
<x-button icon="more_vert" tooltip="More" />
<x-button icon="filter_list" tooltip="Filter" />
</x-slot:actions>
</x-app-bar>
</div>
{{-- Resize the window: two icon buttons below 600px, four from there, the rest in "More options". --}}
<div>
<x-app-bar title="holiday-photos" :sticky="false" :actions="[
['label' => 'Share', 'icon' => 'share'],
['label' => 'Download', 'icon' => 'download'],
['label' => 'Star', 'icon' => 'star'],
['label' => 'Rename', 'icon' => 'edit'],
['label' => 'Details', 'icon' => 'info', 'link' => '#bars', 'no-wire-navigate' => true],
]">
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
</x-app-bar>
</div>
<div>
<x-app-bar variant="center" title="holiday-photos.zip" subtitle="248 MB · expires in 3 days" :sticky="false">
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>