Portal UI

Command

Command menu

<x-portal::button variant="outline" x-on:click="$dispatch('open-command')">Open</x-portal::button>
<x-portal::command>
    <x-portal::command.search x-on:keyup="console.log($el.value)" />
    <x-portal::command.content>
        <x-portal::command.group label="Suggestions">
            <x-portal::command.item href="">
                <x-tabler-calendar-event-filled class="h-5" />
                Calendar
            </x-portal::command.item>

            <x-portal::command.item href="">
                <x-tabler-mood-smile class="h-5" />
                Search Emoji
            </x-portal::command.item>
            <x-portal::command.item href="">
                <x-tabler-calculator class="h-5" />
                Calculator
            </x-portal::command.item>
        </x-portal::command.group>
        <x-portal::command.group label="Setting">
            <x-portal::command.item href="">
                <x-tabler-user class="h-5" />
                Profile
            </x-portal::command.item>
            <x-portal::command.item href="">
                <x-tabler-credit-card class="h-5" />
                Billing
            </x-portal::command.item>
            <x-portal::command.item href="">
                <x-tabler-settings class="h-5" />
                Settings
            </x-portal::command.item>
        </x-portal::command.group>
    </x-portal::command.content>
</x-portal::command>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:command --force