1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

defmodule DemoWeb.DemoLive do
  use DemoWeb, :live_view

  alias Phoenix.LiveView.JS

  # 初期接続
  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  # 画面
  def render(assigns) do
    ~L"""
    <p><%= submit "表示/非表示", type: "button", phx_click: JS.toggle(to: "#info", in: "fade-in-scale", out: "fade-out-scale") %></p>
    <p><%= submit "文字を小さくする", type: "button", phx_click: JS.set_attribute({"style", "font-size:1px"}, to: "#info") %></p>
    <p><%= submit "文字を大きくする", type: "button", phx_click: JS.set_attribute({"style", "font-size:100px"}, to: "#info") %></p>
    <p><%= submit "初期化", type: "button", phx_click: JS.remove_attribute("style", to: "#info") %></p>
    <div id="info">
      表示中
    </div>
    """
  end
end

1
2
3
4
5
6
7
8

  scope "/", DemoWeb do
    pipe_through(:browser)

    get("/", PageController, :index)

    # /demo のパスを追加
    live("/demo", DemoLive)
  end