data-theme = lofi
Notification
頁面放置一次，任意 Alpine 元件可呼叫 $dispatch("notify", { type, content }) 發送 Toast。position / appearance / size / duration / event-name 由屬性控制。
default
bordered-left / md / bottom-right (event: notify)
solid / top-right / sm (event: notify-solid)
soft / bottom-left / lg (event: notify-left)
outline / top-center / sm (event: notify-top)
使い方
{{-- 1. layout に1度だけ置く --}}
<x-notification-system />
{{-- 2. 任意のコンポーネントから dispatch --}}
<button x-on:click="$dispatch('notify', { type: 'success', content: '保存しました' })">
保存
</button>
{{-- 3. Laravel の session flash でも発火 --}}
return redirect()->back()->with('notify', ['type' => 'success', 'content' => '保存しました']);
{{-- 4. 位置・見た目を変えたい時 --}}
<x-notification-system position="top-right" appearance="solid" size="sm" :duration="5000" />
{{-- 5. 同じページに複数を共存させたい場合は event-name で分離 --}}
<x-notification-system position="top-center" event-name="notify-toast" />
<button x-on:click="$dispatch('notify-toast', { type: 'info', content: '…' })">…</button>
data-theme = night
Notification
頁面放置一次，任意 Alpine 元件可呼叫 $dispatch("notify", { type, content }) 發送 Toast。position / appearance / size / duration / event-name 由屬性控制。
default
bordered-left / md / bottom-right (event: notify)
solid / top-right / sm (event: notify-solid)
soft / bottom-left / lg (event: notify-left)
outline / top-center / sm (event: notify-top)
使い方
{{-- 1. layout に1度だけ置く --}}
<x-notification-system />
{{-- 2. 任意のコンポーネントから dispatch --}}
<button x-on:click="$dispatch('notify', { type: 'success', content: '保存しました' })">
保存
</button>
{{-- 3. Laravel の session flash でも発火 --}}
return redirect()->back()->with('notify', ['type' => 'success', 'content' => '保存しました']);
{{-- 4. 位置・見た目を変えたい時 --}}
<x-notification-system position="top-right" appearance="solid" size="sm" :duration="5000" />
{{-- 5. 同じページに複数を共存させたい場合は event-name で分離 --}}
<x-notification-system position="top-center" event-name="notify-toast" />
<button x-on:click="$dispatch('notify-toast', { type: 'info', content: '…' })">…</button>