Hex doc
Phoenix
Create toast (Client binding)
<div class="flex flex-wrap items-center gap-space">
<.action
phx-click={Corex.Toast.create("layout-toast", "Info", "Info description", :info, [])}
class="button ui-size-sm"
>
Info
</.action>
<.action
phx-click={Corex.Toast.create("layout-toast", "Success", "Success description", :success, [])}
class="button ui-size-sm"
>
Success
</.action>
<.action
phx-click={Corex.Toast.create("layout-toast", "Error", "Error description", :error, [])}
class="button ui-size-sm"
>
Error
</.action>
<.action
phx-click={
Corex.Toast.create("layout-toast", "Loading", "Loading description", :info,
duration: :infinity,
loading: true
)
}
class="button ui-size-sm"
>
Loading
</.action>
</div>
Create toast (Client JS)
<div class="flex flex-wrap items-center gap-space">
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:create', {bubbles: false, detail: { id: 'toast-cjs-info', group_id: 'layout-toast', title: 'Info', description: 'From client JS', type: 'info', duration: '5000' } }))"
>
Info
</button>
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:create', {bubbles: false, detail: { id: 'toast-cjs-success', group_id: 'layout-toast', title: 'Success', description: 'From client JS', type: 'success', duration: '5000' } }))"
>
Success
</button>
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:create', {bubbles: false, detail: { id: 'toast-cjs-error', group_id: 'layout-toast', title: 'Error', description: 'From client JS', type: 'error', duration: '5000' } }))"
>
Error
</button>
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:create', {bubbles: false, detail: { id: 'toast-cjs-loading', group_id: 'layout-toast', title: 'Loading', description: 'From client JS', type: 'info', duration: 'Infinity', loading: true } }))"
>
Loading
</button>
</div>
const el = document.getElementById("layout-toast");
const dispatch = (detail) =>
el?.dispatchEvent(
new CustomEvent("corex:toast:create", { bubbles: false, detail: { group_id: "layout-toast", ...detail } })
);
dispatch({
id: "toast-cjs-info",
title: "Info",
description: "From client JS",
type: "info",
duration: "5000",
});
dispatch({
id: "toast-cjs-success",
title: "Success",
description: "From client JS",
type: "success",
duration: "5000",
});
dispatch({
id: "toast-cjs-error",
title: "Error",
description: "From client JS",
type: "error",
duration: "5000",
});
dispatch({
id: "toast-cjs-loading",
title: "Loading",
description: "From client JS",
type: "info",
duration: "Infinity",
loading: true,
});
const el: HTMLElement | null = document.getElementById("layout-toast");
const dispatch = (detail: Record<string, unknown>) =>
el?.dispatchEvent(
new CustomEvent("corex:toast:create", { bubbles: false, detail: { group_id: "layout-toast", ...detail } })
);
dispatch({
id: "toast-cjs-info",
title: "Info",
description: "From client JS",
type: "info",
duration: "5000",
});
dispatch({
id: "toast-cjs-success",
title: "Success",
description: "From client JS",
type: "success",
duration: "5000",
});
dispatch({
id: "toast-cjs-error",
title: "Error",
description: "From client JS",
type: "error",
duration: "5000",
});
dispatch({
id: "toast-cjs-loading",
title: "Loading",
description: "From client JS",
type: "info",
duration: "Infinity",
loading: true,
});
Update toast (Client binding)
<div class="flex flex-wrap items-center gap-space">
<.action
phx-click={
Corex.Toast.create("layout-toast", "Before update", "Create this toast once, then tap Update.", :info,
id: "toast-api-update-demo",
duration: 60_000
)
}
class="button ui-size-sm"
>
Create demo toast
</.action>
<.action
phx-click={
Corex.Toast.update("layout-toast", "toast-api-update-demo", %{
title: "After update",
description: "Updated via Corex.Toast.update/3",
type: :success,
duration: 5000
})
}
class="button ui-size-sm"
>
Update
</.action>
</div>
Update toast (Client JS)
<div class="flex flex-wrap items-center gap-space">
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:create', {bubbles: false, detail: { id: 'toast-api-update-demo', group_id: 'layout-toast', title: 'Before update', description: 'Create once then tap Update.', type: 'info', duration: '60000' } }))"
>
Create demo toast
</button>
<button
type="button"
class="button ui-size-sm"
onclick="document.getElementById('layout-toast')?.dispatchEvent(new CustomEvent('corex:toast:update', {bubbles: false, detail: { id: 'toast-api-update-demo', group_id: 'layout-toast', title: 'After update', description: 'Updated via corex:toast:update', type: 'success', duration: '5000' } }))"
>
Update
</button>
</div>
const el = document.getElementById("layout-toast");
el?.dispatchEvent(
new CustomEvent("corex:toast:create", {
bubbles: false,
detail: {
id: "toast-api-update-demo",
group_id: "layout-toast",
title: "Before update",
description: "Create once then call update.",
type: "info",
duration: "60000",
},
})
);
el?.dispatchEvent(
new CustomEvent("corex:toast:update", {
bubbles: false,
detail: {
id: "toast-api-update-demo",
group_id: "layout-toast",
title: "After update",
description: "Updated via corex:toast:update",
type: "success",
duration: "5000",
},
})
);
const el: HTMLElement | null = document.getElementById("layout-toast");
el?.dispatchEvent(
new CustomEvent("corex:toast:create", {
bubbles: false,
detail: {
id: "toast-api-update-demo",
group_id: "layout-toast",
title: "Before update",
description: "Create once then call update.",
type: "info",
duration: "60000",
},
})
);
el?.dispatchEvent(
new CustomEvent("corex:toast:update", {
bubbles: false,
detail: {
id: "toast-api-update-demo",
group_id: "layout-toast",
title: "After update",
description: "Updated via corex:toast:update",
type: "success",
duration: "5000",
},
})
);
Create toast (Server)
<div class="flex flex-wrap items-center gap-space">
<.action phx-click="toast_api_push_info" class="button ui-size-sm">Info</.action>
<.action phx-click="toast_api_push_success" class="button ui-size-sm">Success</.action>
<.action phx-click="toast_api_push_error" class="button ui-size-sm">Error</.action>
<.action phx-click="toast_api_push_loading" class="button ui-size-sm">Loading</.action>
</div>
def handle_event("toast_api_push_info", _params, socket) do
{:noreply,
Corex.Toast.create(socket, "layout-toast", "Info", "From server", :info, duration: 5000)}
end
def handle_event("toast_api_push_success", _params, socket) do
{:noreply,
Corex.Toast.create(socket, "layout-toast", "Success", "From server", :success, duration: 5000)}
end
def handle_event("toast_api_push_error", _params, socket) do
{:noreply,
Corex.Toast.create(socket, "layout-toast", "Error", "From server", :error, duration: 5000)}
end
def handle_event("toast_api_push_loading", _params, socket) do
{:noreply,
Corex.Toast.create(socket, "layout-toast", "Loading", "From server", :info, duration: :infinity,
loading: true
)}
end
Update toast (Server)
<div class="flex flex-wrap items-center gap-space">
<.action phx-click="toast_api_seed_update_demo" class="button ui-size-sm">Create demo toast</.action>
<.action phx-click="toast_api_update_demo" class="button ui-size-sm">Update</.action>
</div>
def handle_event("toast_api_seed_update_demo", _params, socket) do
{:noreply,
Corex.Toast.create(socket, "layout-toast", "Before update", "Create once then tap Update.", :info,
id: "toast-api-update-demo",
duration: 60_000
)}
end
def handle_event("toast_api_update_demo", _params, socket) do
{:noreply,
Corex.Toast.update(socket, "layout-toast", "toast-api-update-demo", %{
title: "After update",
description: "Updated from server",
type: :success,
duration: 5000
})}
end