sheet · Admiral UI kit

Example

Laravel

<x-admin::button data-adm-open="g-sheet">Open sheet</x-admin::button>
<x-admin::sheet id="g-sheet" title="Filters" description="Narrow down the list.">
    <x-admin::select name="g_sheet_status" label="Status" :options="['Synced', 'Failing']" />
    <x-slot:footer><x-admin::button variant="primary" data-adm-close>Apply</x-admin::button></x-slot:footer>
</x-admin::sheet>

Props

Prop	Required	Default
`id`	yes
`title`		`null`
`description`		`null`
`side`		`"end"`

Slots: footer

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Sheet } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack

<button type="button" class="adm-btn adm-btn--secondary" data-adm-open="g-sheet" >Open sheet</button>
<dialog id="g-sheet" class="adm-dialog adm-sheet" data-side="end"  aria-labelledby="g-sheet-title" >
            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-sheet-title">Filters</h2>            <p class="adm-subtle">Narrow down the list.</p>        </div>
        <div class="adm-dialog__body"><div class="adm-field">
            <label class="adm-label" for="g_sheet_status">Status</label>
        <select
         name="g_sheet_status"          id="g_sheet_status"                                 class="adm-select"
    >
                                        <option value="Synced" >Synced</option>
                                <option value="Failing" >Failing</option>
                
    </select>
        </div></div>
    <div class="adm-dialog__footer"><button type="button" class="adm-btn adm-btn--primary" data-adm-close="data-adm-close" >Apply</button></div></dialog>