PHP code example of nativemobile / laravel-mobile-ui

1. Go to this page and download the library: Download nativemobile/laravel-mobile-ui library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

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

nativemobile / laravel-mobile-ui example snippets


// Works directly in Blade templates
{!! TextView::make()->text('Hello, World!')->padding('16px')->background('#6200EE')->color('#fff') !!}

// Or as a Blade variable (Htmlable autorender)
$widget = TextView::make()->text('Hello')->padding('16px');
// {{ $widget }} works without {!! !!} escaping issues


Scaffold::make()
    ->appBar(AppBar::make()->title('Products')->withDrawer())
    ->body(
        Column::make()
            ->padding('16px')
            ->gap('12px')
            ->scrollable()
            ->children($productWidgets)
    )
    ->bottomNav(
        BottomNavigation::make()
            ->tabs(config('mobile-nav.bottom'))
            ->active('products')
            ->badges(['cart' => $cartCount])
    )


// Real-time cart badge via Livewire property
BottomNavigation::make()
    ->tabs(config('mobile-nav.bottom'))
    ->active($this->activeTab)
    ->livewire('switchTab')
    ->badges([
        'cart'          => $this->cartCount,       // Updates reactively
        'notifications' => $this->unreadCount,
    ])
    ->badgeColor('#E53935')


ListView::make()
    ->items($this->products)
    ->itemBuilder(function (array $product, int $index): string {
        return Card::make()
            ->title($product['name'])
            ->subtitle('$' . $product['price'])
            ->render();
    })
    ->separator('#f0f0f0')
    ->onScrollEnd('loadMore')   // Livewire infinite scroll
    ->padding('0 16px')

bash
# From the Laravel app root
php artisan test --compact --filter=mobile-ui

# From the package directory
./vendor/bin/pest

bash
php artisan vendor:publish --tag=mobile-ui-config