PHP code example of zephyrphp / blade-ui

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

zephyrphp / blade-ui example snippets

return [

    /*
    |-----------------------------------------------------------------
    | Default Namespace
    |-----------------------------------------------------------------
    |
    | This config option allows you to define a default namespace for
    | your ui components. By default, components will look in the
    | "ui" namespace. You can change this value to any string.
    | usage: <x-ui::button />
    */

    'namespace' => 'ui',

];

// Default
<x-alert>
    <x-alert.heading>Heads up!</x-alert.heading>
    <x-alert.subheading>You can add components to your app using the cli.</x-alert.subheading>
</x-alert>

// Variants
<x-ui::alert variant="creative">...</x-ui::alert>
<x-ui::alert variant="destructive">..</x-ui::alert>

<x-avatar>
    <x-avatar.image alt="..." src="..."/>
</x-avatar>

// Default
<x-badge>Badge</x-avatar>

// Variant
<x-badge variant="creative">Badge</x-avatar>
<x-badge variant="destructive">Badge</x-avatar>
<x-badge variant="secondary">Badge</x-avatar>
<x-badge variant="outline">Badge</x-avatar>

// Default
<x-ui::button />

// Variants
<x-ui::button variant="destructive" />
<x-ui::button variant="filled" />
<x-ui::button variant="ghost" />
<x-ui::button variant="outline" />

// Sizes
<x-ui::button size="lg" />
<x-ui::button size="sm" />

<x-ui::card>
    <x-ui::card.header>
        <x-ui::card.heading>Heading</x-ui::card.heading>
        <x-ui::card.subheading>Subheading</x-ui::card.subheading>
    </x-ui::card.header>
    <x-ui::card.content>
        Content
    </x-ui::card.content>
    <x-ui::card.footer>
        Footer
    </x-ui::card.footer>
</x-ui::card>

<x-ui::dialog>
    <x-ui::dialog.trigger>Trigger</x-ui::dialog.trigger>
    <x-ui::dialog.content>
        <x-ui::dialog.header>
            <x-ui::dialog.heading>Heading</x-ui::dialog.heading>
            <x-ui::dialog.subheading>Subheading</x-ui::dialog.subheading>
        </x-ui::dialog.header>
        
        <div>Content</div>
        
        <x-ui::dialog.footer>
            Footer
        </x-ui::dialog.footer>
    </x-ui::dialog.content>
</x-ui::dialog>

<x-ui::dropdown>
    <x-ui::dropdown.trigger>Trigger</x-ui::dropdown.trigger>
    <x-ui::dropdown.content>
        <div>Content</div>
    </x-ui::dropdown.content>
</x-ui::dropdown>

// Default
<x-ui::form.field>
    <x-ui::form.label>Username</x-ui::form.label>
    <x-ui::form.description>Username should be unique.</x-ui::form.description>
    <x-ui::form.input name="username" />
    <x-ui::form.error name="username" />
</x-ui::form.field>

// Input size
<x-ui::form.input name="username" size="sm" />

// Checkbox
<x-ui::form.checkbox label="Remember me" name="remember" />

// Select
<x-ui::form.select label="Country" name="country">
    <x-ui::form.option value="us">United States</x-ui::form.option>
    <x-ui::form.option value="fr">France</x-ui::form.option>
</x-ui::form.select>

// Textarea
<x-ui::form.textarea label="Bio" name="bio"></x-ui::form.textarea>

// Default
<x-ui::icon name="academic-cap"/>

// Variants
<x-ui::icon name="academic-cap" variant="micro"/>
<x-ui::icon name="academic-cap" variant="mini"/>
<x-ui::icon name="academic-cap" variant="solid"/>

// Default
<x-ui::link href="...">Link</x-ui::link>

// Current
<x-ui::link current href="...">Current Link</x-ui::link>

// Default
<x-ui::menu>
    <x-ui::menu.item href="...">Link</x-ui::menu.item>
    <x-ui::menu.item href="...">Link</x-ui::menu.item>
    <x-ui::menu.separator/>
    <x-ui::menu.item href="...">Link</x-ui::menu.item>
</x-ui::menu>

// Group
<x-ui::menu>
    <x-ui::menu.group heading="Group">
        <x-ui::menu.item href="...">Link</x-ui::menu.item>
        <x-ui::menu.item href="...">Link</x-ui::menu.item>
    </x-ui::menu.group>
</x-ui::menu>

// Code
<x-ui::mockup.code>
    <pre><code>...</code></pre>
</x-ui::mockup.code>

// Default
<x-ui::navbar>
    <x-ui::navbar.item href="...">Link</x-ui::navbar.item>
    <x-ui::navbar.item href="...">Link</x-ui::navbar.item>
</x-ui::navbar>

// Current
<x-ui::navbar>
    <x-ui::navbar.item current href="...">Link</x-ui::navbar.item>
</x-ui::navbar>

// Icon
<x-ui::navbar>
    <x-ui::navbar.item href="..." icon="home">Link</x-ui::navbar.item>
</x-ui::navbar>

// Default
<x-ui::navlist>
    <x-ui::navlist.item href="...">Link</x-ui::navlist.item>
    <x-ui::navlist.item href="...">Link</x-ui::navlist.item>
</x-ui::navlist>

// Group
<x-ui::navlist>
    <x-ui::navlist.group heading="Group">
        <x-ui::navlist.item href="...">Link</x-ui::navlist.item>
        <x-ui::navlist.item href="...">Link</x-ui::navlist.item>
    </x-ui::navlist.group>
</x-ui::navlist>

// Current
<x-ui::navlist>
    <x-ui::navlist.item current href="...">Link</x-ui::navlist.item>
</x-ui::navlist>

// Icon
<x-ui::navlist>
    <x-ui::navlist.item href="..." icon="home">Link</x-ui::navlist.item>
</x-ui::navlist>

// Default
<x-ui::separator />

// Text
<x-ui::separator text="Or" />

// Vertical
<x-ui::separator vertical />

// Default
<x-ui::skeleton class="h-full w-full" />

// Default
<x-ui::typography.heading>Heading</x-ui::typography.heading>
<x-ui::typography.subheading>Subheading</x-ui::typography.subheading>

// Level
<x-ui::typography.heading level="1">H1</x-ui::typography.heading>
<x-ui::typography.heading level="2">H2</x-ui::typography.heading>
<x-ui::typography.heading level="3">H3</x-ui::typography.heading>

// Size
<x-ui::typography.heading size="lg">Large Heading</x-ui::typography.heading>
<x-ui::typography.heading size="xl">Extra-Large Heading</x-ui::typography.heading>

js
content: [
    // ...
    './vendor/zephyrphp/blade-heroicons/**/*.blade.php',
    './vendor/zephyrphp/blade-ui/**/*.blade.php'
]

bash
php artisan vendor:publish --tag="blade-ui-config"

bash
php artisan vendor:publish --tag="blade-ui-views"