You're viewing the TallCraftUI v2.0 documentation
TallCraftUI

Dialog Components

Toast

# Configuration 

{{-- Add the Toast component on your main layout. --}}
<body>
    <x-toast />
</body>

Import WithTcToast trait and call the $this->toast(...) method

use Developermithu\Tallcraftui\Traits\WithTcToast;
 
class Toast extends Component
{
    use WithTcToast;
 
    public function save()
    {
        $this->success(...);
        $this->error(...);
        $this->warning(...);
        $this->info(...);
 
        // OR
        $this->toast(...);
    }
}

# Basic Usage 

// Toast 1
$this->toast('User created successfully'); // OR
$this->success('User created successfully');
 
// Toast 2
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.'
);
 
// Toast 3
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.',
    showProgress: true
);
 
// Toast 4
$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.',
    showCloseIcon: true
);

# Toast type 

$this->success('This is a success message');
$this->warning('This is a warning message');
$this->info('This is a info message');
$this->error('This is a error message');

# Toast position 

$this->success(title: 'User created successfully', position: 'top-right');
$this->success(title: 'User created successfully', position: 'top-left');
$this->success(title: 'User created successfully', position: 'bottom-right');
$this->success(title: 'User created successfully', position: 'bottom-left');

# With progress bar 

$this->success(title: 'User created successfully', showProgress: true);

# With redirecting 

$this->success(
    title: 'User created successfully',
    redirectTo: route('docs.installation')
);

# Duration

By default, toasts disappear after 3 seconds. To adjust this, specify a custom duration in milliseconds using the timeout prop. 
$this->success(title: 'User created successfully', timeout: 5000);

# Persist

To keep the toast open indefinitely, set the timeout prop to 0. 
$this->success(title: 'User created successfully', timeout: 0);

# With description 

$this->success(
    title: 'User created successfully',
    description: 'Your changes have been saved permanently.'
);

# All available props 

$this->toast(
    type: 'success',
    title: 'User created successfully',
    description: 'Your changes have been saved permanently',
    position: 'bottom-right',
    icon: 'check-circle',
    showCloseIcon: false,
    showProgress: false,
    timeout: 3000,
    redirectTo: '/'
);

Default settings

Change toast default settings according your needs config/tallcraftui.php 

return [
    'toast' => [
        'position' => ToastPosition::BOTTOM_RIGHT->value,
        'showCloseIcon' => false,
        'showProgress' => false,
        'timeout' => 3000
    ],
];
Code highlighting powered by Torchlight