A succinct message that is displayed temporarily.
<div x-data> <!-- x-data is required on root tag, you can put on body -->
<x-portal::toast position="top-right"/> <!-- This is required, you can register this tag one your root layout -->
<x-portal::button
variant="outline"
x-on:click="$dispatch('toast',{
title : 'Scheduled: Catch up',
message : 'Friday, February 10, 2023 at 5:57 PM'
})"
>
Show Alert
</x-portal::button>
</div>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:toast --force
@php
$positions = ['bottom-right','bottom-left','bottom-center','top-right','top-left','top-center']
@endphp
@foreach($positions as $position)
<x-portal::button
variant="outline"
x-on:click="$dispatch('toast',{
title : 'Scheduled: Catch up',
message : 'Friday, February 10, 2023 at 5:57 PM',
position : '{{$position}}'
})"
>
{{$position}}
</x-portal::button>
@endforeach
<x-portal::button variant="danger"
x-on:click="$dispatch('toast',{
variant : 'danger',
title : 'Uh oh! Something went wrong.',
message : 'There was a problem with your request.'
})"
>
Danger
</x-portal::button>
<x-portal::button class="!bg-green-500"
x-on:click="$dispatch('toast',{
variant : 'success',
title : 'Congratulations!',
message : 'Your changes have been saved. Keep up the great work!'
})"
>
Success
</x-portal::button>
<x-portal::button variant="outline"
x-on:click="$dispatch('toast',{
variant : 'danger',
title : 'Uh oh! Something went wrong.',
message : 'There was a problem with your request.',
action : {
label : 'Try Again',
do : () => {console.log('oke')}
}
})"
>
Show Toast
</x-portal::button>
<x-portal::button variant="outline" onclick="toast()">Show Toast</x-portal::button>
// ..
@push('scripts')
<script>
function toast() {
window.dispatchEvent(new CustomEvent('toast', {
detail: {
title: 'Scheduled: Catch up',
message: 'Friday, February 10, 2023 at 5:57 PM'
}
}))
}
</script>
@endpush
This detail object configuration that you can pass to toast event :
{
variant : "", //available : success , danger , default
title : "",
message : "",
duration : 8000, // notification duration before close
action : {
label : "", // display action label
do : () => {
// your code
}
},
position : "", // avilable bottom-right , bottom-left , bottom-center , top-right , top-left , top-center
}
// you can also put default position into toast tag