x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="contents" data-controller="ui--dialog"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-sheet-5e9d6f52" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open top sheet</button><dialog id="ui-sheet-5e9d6f52" class="fixed inset-0 m-0 p-0 max-w-none max-h-none w-full h-full bg-transparent border-0 overflow-visible open:flex open:items-center open:justify-center backdrop:bg-black/60 backdrop:backdrop-blur-[1px]" aria-labelledby="ui-sheet-5e9d6f52-title" aria-describedby="ui-sheet-5e9d6f52-description" data-ui--dialog-target="content" data-state="closed"> <div class="fixed z-50 flex flex-col overflow-hidden border bg-background p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out inset-x-0 top-0 max-h-[80vh] w-full border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top" data-state="closed" data-ui--dialog-part="panel"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed absolute right-4 top-4 p-0" aria-label="Close" data-action="click->ui--dialog#close" data-ui-dialog-close="true"> <i data-lucide="x" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </button> <header class="flex flex-col space-y-1.5 text-center sm:text-left"> <h2 id="ui-sheet-5e9d6f52-title" class="text-lg font-semibold leading-none tracking-tight">Command palette</h2> <p id="ui-sheet-5e9d6f52-description" class="text-sm text-muted-foreground">Quick actions and navigation in a compact top sheet.</p> </header> <div class="overflow-y-auto flex-1 min-h-0 mt-4"> <input placeholder="Search commands" type="search" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm"> </div> </div></dialog></div>1
2
3
4
5
6
7
8
<%= render(UI::Sheet.new) do |sheet| %> <% sheet.with_trigger(variant: :outline) { "Open top sheet" } %> <% sheet.with_content(side: :top) do |content| %> <% content.with_title { "Command palette" } %> <% content.with_description { "Quick actions and navigation in a compact top sheet." } %> <%= render(UI::Input.new(type: :search, placeholder: "Search commands")) %> <% end %><% end %>No notes provided.
No params configured.