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);
$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 ],];