Andreas Reinhold / reiniandClaude Opus 5
88c46001fb
Plan step 22, actions.md § Missing (Menus as a filtering surface): M3's menus page describes a menu that embeds a text field and filters its options as you type, and nothing in the library did that. `<x-menu filter>` renders the field, sticky above the list, and hides the rows the query leaves out — client-side over the items already rendered, so nothing is fetched and a `wire:click` stays where it was. The field keeps the focus and the arrow keys move a highlight it names through `aria-activedescendant`, the APG combobox keyboard `<x-choices searchable>` already uses; Enter chooses the highlighted row, and a query that leaves nothing says so. The list becomes a `role="menu"` inside the popover, because a text field is not something a menu may contain. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
138 lines
6.5 KiB
PHP
138 lines
6.5 KiB
PHP
@php
|
|
$examples = [
|
|
'A menu' => <<<'BLADE'
|
|
<x-menu label="Share actions">
|
|
<x-slot:trigger>
|
|
<x-button icon="more_vert" tooltip="More" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
|
|
<x-menu-item label="Download" icon="download" />
|
|
<x-menu-item label="Rename" icon="edit" description="Change what recipients see" />
|
|
<x-menu-separator />
|
|
<x-menu-item label="Delete" icon="delete" />
|
|
</x-menu>
|
|
|
|
<x-menu label="Sort" position="bottom-end">
|
|
<x-slot:trigger>
|
|
<x-button label="Sort" icon-right="arrow_drop_down" variant="outlined" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-group label="Sort by">
|
|
<x-menu-item label="Newest" :selected="true" keep-open />
|
|
<x-menu-item label="Largest" :selected="false" keep-open />
|
|
<x-menu-item label="Expiring soon" :selected="false" keep-open />
|
|
</x-menu-group>
|
|
<x-menu-separator />
|
|
<x-menu-item label="Reset" icon="restart_alt" disabled />
|
|
</x-menu>
|
|
|
|
<x-menu label="Vibrant" vibrant>
|
|
<x-slot:trigger>
|
|
<x-button label="Vibrant" variant="tonal" color="tertiary" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Upload files" icon="upload_file" />
|
|
<x-menu-item label="Upload a folder" icon="drive_folder_upload" />
|
|
</x-menu>
|
|
BLADE,
|
|
'Submenus' => <<<'BLADE'
|
|
<x-menu label="Share actions">
|
|
<x-slot:trigger>
|
|
<x-button label="Share" icon="share" variant="tonal" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
|
|
<x-menu-item label="Send to" icon="send" submenu>
|
|
<x-menu-item label="A person" icon="person" />
|
|
<x-menu-item label="A team" icon="group" />
|
|
<x-menu-item label="Somewhere else" icon="more_horiz" submenu>
|
|
<x-menu-item label="Slack" icon="chat" />
|
|
<x-menu-item label="Email" icon="mail" />
|
|
</x-menu-item>
|
|
</x-menu-item>
|
|
<x-menu-item label="Export as" icon="download" submenu>
|
|
<x-menu-item label="ZIP" icon="folder_zip" />
|
|
<x-menu-item label="PDF" icon="picture_as_pdf" />
|
|
<x-menu-item label="CSV" icon="table" disabled />
|
|
</x-menu-item>
|
|
<x-menu-separator />
|
|
<x-menu-item label="Delete" icon="delete" />
|
|
</x-menu>
|
|
BLADE,
|
|
'Clusters: a gap, or a divider' => <<<'BLADE'
|
|
<x-menu label="Grouped by a gap">
|
|
<x-slot:trigger>
|
|
<x-button label="A gap" icon-right="arrow_drop_down" variant="outlined" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-group gap>
|
|
<x-menu-item label="Cut" icon="content_cut" shortcut="⌘X" />
|
|
<x-menu-item label="Copy" icon="content_copy" shortcut="⌘C" />
|
|
<x-menu-item label="Paste" icon="content_paste" shortcut="⌘V" />
|
|
</x-menu-group>
|
|
|
|
<x-menu-group label="Then" gap>
|
|
<x-menu-item label="Rename" icon="edit" />
|
|
<x-menu-item label="Delete" icon="delete" />
|
|
</x-menu-group>
|
|
</x-menu>
|
|
|
|
<x-menu label="Separated by a divider">
|
|
<x-slot:trigger>
|
|
<x-button label="A divider" icon-right="arrow_drop_down" variant="outlined" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Cut" icon="content_cut" shortcut="⌘X" />
|
|
<x-menu-item label="Copy" icon="content_copy" shortcut="⌘C" />
|
|
<x-menu-item label="Paste" icon="content_paste" shortcut="⌘V" />
|
|
<x-menu-separator />
|
|
<x-menu-item label="Rename" icon="edit" />
|
|
<x-menu-item label="Delete" icon="delete" />
|
|
</x-menu>
|
|
BLADE,
|
|
'A menu that filters as you type' => <<<'BLADE'
|
|
<x-menu label="Assign to" filter="Find a person">
|
|
<x-slot:trigger>
|
|
<x-button label="Assign to" icon="person_add" variant="tonal" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Ada Lovelace" icon="person" description="Engineering" />
|
|
<x-menu-item label="Grace Hopper" icon="person" description="Engineering" />
|
|
<x-menu-item label="Katherine Johnson" icon="person" description="Research" />
|
|
<x-menu-item label="Mary Jackson" icon="person" description="Research" />
|
|
<x-menu-item label="Radia Perlman" icon="person" description="Networks" />
|
|
<x-menu-item label="Barbara Liskov" icon="person" description="Networks" />
|
|
<x-menu-separator />
|
|
<x-menu-item label="Nobody, for now" icon="person_off" />
|
|
</x-menu>
|
|
BLADE,
|
|
'Icons in their own colour' => <<<'BLADE'
|
|
<x-menu label="New plan">
|
|
<x-slot:trigger>
|
|
<x-button label="New plan" icon="add" variant="filled" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Running" icon="directions_run" icon-class="text-tertiary" />
|
|
<x-menu-item label="Cycling" icon="directions_bike" icon-class="text-secondary" />
|
|
<x-menu-item label="Swimming" icon="pool" icon-class="text-info" />
|
|
<x-menu-item label="Rowing" icon="rowing" icon-class="text-tertiary" disabled />
|
|
</x-menu>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="menus" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Menus</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-menu></code> with <code><x-menu-item></code>, <code><x-menu-group></code> and <code><x-menu-separator></code>.
|
|
Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
|
|
— Right to enter it, Left to come back.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|