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