サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

現在位置: index.html » elm » elm-chat

トレース:

elm:elm-chat

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- elm:elm-chat [2019/06/16] – [linuss/smooth-scrollパッケージ] adash333
+++ elm:elm-chat [2019/06/16] (現在) – [elmでchatアプリ] adash333
@@ 行 1: / 行 1: @@
 ====== elmでchatアプリ ======
+http://i-doctor.sakura.ne.jp/font/?p=38884
+ElmとFirebaseでチャットアプリを写経してみる（２）複数ファイルを1個のファイルにする
+年6月16日
+ソースコード
+（index.htmlの55行目のFirebaseのアドレスはご自身のものを入力してください。）
+https://github.com/adash333/elm-firebase-chat2
+DEMOサイト
+https://romantic-noyce-862b75.netlify.com/
@@ 行 62: / 行 72: @@
 ===== linuss/smooth-scrollパッケージ =====
 https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/
+使用例
+https://ellie-app.com/5Q2PJn9nHdsa1
+https://ellie-app.com/5Q6J4RdVfkca1
+  *パッケージのインストール
 <code>
@@ 行 67: / 行 85: @@
 </code>
+  *以下の2つをimport
-https://ellie-app.com/5Q2PJn9nHdsa1
+<code>
+import SmoothScroll exposing (scrollTo)
-https://ellie-app.com/5Q6J4RdVfkca1
+import Task exposing (Task)
+</code>
+  *msgに以下の2つを追加
+<code>
+type Msg
+    = NoOp
+    | SmoothScroll String
+</code>
+  *update msg modelに以下を追加
+<code>
+update msg model =
+    case msg of
+        NoOp ->
+            ( model, Cmd.none )
+        SmoothScroll id ->
+            ( model, Task.attempt (always NoOp) (scrollTo id) )
+</code>
+  *VIEWに以下を追加
+<code>
+view model =
+    { title = "Foo"
+    , body =
+        [ div []
+            [ p
+                [ id "p-one"
+                , onClick (SmoothScroll "p-two")
+                ]
+                [ text "p one" ]
+            , div [ style "margin-top" "500px"][ text "555555" ]
+            , p
+                [ id "p-two"
+                , style "margin-top" "1500px"
+                , onClick (SmoothScroll "p-one")
+                ]
+                [ text "p two" ]
+            ]
+        ]
+    }
+</code>

elm/elm-chat.1560666899.txt.gz · 最終更新: 2019/06/16 by adash333