View Source PhxIzitoast (PhxIzitoast v0.1.2)
Documentation for PhxIzitoast - Phoenix Notification Package.
configuration
Configuration
Add the below config to config/config.exs. This includes the default configurations(optional).
config :phx_izitoast, :opts, # bottomRight, bottomLeft, topRight, topLeft, topCenter,
position: "topRight", # dark,
theme: "light",
timeout: 5000,
close: true,
titleSize: 18,
messageSize: 18,
progressBar: trueAdding the JS Files to Layout and Template. First import the Izitoast to your layout_view.ex
import PhxIzitoastAdd the below function to the bottom of your app.html.eex just efore the closing </body> tag . This will import the needed css and js files.
<body>
...............
<%= izi_toast(@conn) %>
.................
</body>Add the below code to your app_web/endpoint.ex file just below the existing plug Plug.Static configuration.
plug Plug.Static,
at: "/",
from: {:phx_izitoast, "priv/static"},
gzip: false,
only: ~w(css js )This adds the necessary js and css for iziToast
usage
Usage
Quickest way to use PhxIzitoast
conn
|> PhxIzitoast.message("message")or
conn
|> PhxIzitoast.success("title", "message", opts \ [])
|> PhxIzitoast.error("", "This is an Error message", [position: "center", timeout: 10000])The title can be left to "" to ignore the toast title
Usage in code would be like:
def create(conn, %{"category" => category_params}) do
slug = slugified_title(category_params["name"])
category_params = Map.put(category_params, "slug", slug)
case Categories.create_category(category_params) do
{:ok, _category} ->
conn
|> PhxIzitoast.success("Category", " created successfully")
|> redirect(to: Routes.category_path(conn, :index))
{:error, %Ecto.Changeset{} = changeset} ->
conn
|> PhxIzitoast.error("Category", "A Validation Error !!!")
|> render("new.html", changeset: changeset)
end
endWIth this you can remove the default notification alerts in app.html.eex and replace all your put_flash/2 with PhxIzitoast .
more-functions-include
More functions include:
Link to this section Summary
Functions
conn
|> PhxIzitoast.clear_toast()conn
|> PhxIzitoast.info("Error 500", "Error Occured !!!")conn
|> PhxIzitoast.error("Arrow", "You've Failed this city", position: "bottomLeft")conn
|> PhxIzitoast.info("Hey", "This is Info")conn
|> PhxIzitoast.info("Success", "awesome", position: "topRight")Inserts the CSS and Js files, takes in the @conn.Its is added in the app.html.eex just before </body>
conn
|> PhxIzitoast.message("awesome things only")conn
|> PhxIzitoast.success("title", "awesome")conn
|> PhxIzitoast.success("title", "awesome", position: "bottomRight")conn
|> PhxIzitoast.warning("title", "not very awesome")conn
|> PhxIzitoast.warning("title", "awesome", timeout: 1000)Link to this section Functions
conn
|> PhxIzitoast.clear_toast()conn
|> PhxIzitoast.info("Error 500", "Error Occured !!!")conn
|> PhxIzitoast.error("Arrow", "You've Failed this city", position: "bottomLeft")conn
|> PhxIzitoast.info("Hey", "This is Info")conn
|> PhxIzitoast.info("Success", "awesome", position: "topRight")Inserts the CSS and Js files, takes in the @conn.Its is added in the app.html.eex just before </body>
conn
|> PhxIzitoast.message("awesome things only")conn
|> PhxIzitoast.success("title", "awesome")conn
|> PhxIzitoast.success("title", "awesome", position: "bottomRight")conn
|> PhxIzitoast.warning("title", "not very awesome")conn
|> PhxIzitoast.warning("title", "awesome", timeout: 1000)