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アプリ ====== | ====== elmでchatアプリ ====== | ||
+ | http:// | ||
+ | ElmとFirebaseでチャットアプリを写経してみる(2)複数ファイルを1個のファイルにする | ||
+ | 2019年6月16日 | ||
+ | |||
+ | ソースコード | ||
+ | (index.htmlの55行目のFirebaseのアドレスはご自身のものを入力してください。) | ||
+ | https:// | ||
+ | |||
+ | DEMOサイト | ||
+ | https:// | ||
行 62: | 行 72: | ||
===== linuss/ | ===== linuss/ | ||
https:// | https:// | ||
+ | |||
+ | 使用例 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | *パッケージのインストール | ||
< | < | ||
行 67: | 行 85: | ||
</ | </ | ||
+ | *以下の2つをimport | ||
- | https:// | + | < |
- | + | import SmoothScroll exposing (scrollTo) | |
- | https:// | + | import Task exposing (Task) |
+ | </code> | ||
+ | *msgに以下の2つを追加 | ||
+ | < | ||
+ | type Msg | ||
+ | = NoOp | ||
+ | | SmoothScroll String | ||
+ | </ | ||
+ | *update msg modelに以下を追加 | ||
+ | < | ||
+ | update msg model = | ||
+ | case msg of | ||
+ | NoOp -> | ||
+ | ( model, Cmd.none ) | ||
+ | SmoothScroll id -> | ||
+ | ( model, Task.attempt (always NoOp) (scrollTo id) ) | ||
+ | </ | ||
+ | *VIEWに以下を追加 | ||
+ | < | ||
+ | view model = | ||
+ | { title = " | ||
+ | , body = | ||
+ | [ div [] | ||
+ | [ p | ||
+ | [ id " | ||
+ | , onClick (SmoothScroll " | ||
+ | ] | ||
+ | [ text "p one" ] | ||
+ | , div [ style " | ||
+ | , p | ||
+ | [ id " | ||
+ | , style " | ||
+ | , onClick (SmoothScroll " | ||
+ | ] | ||
+ | [ text "p two" ] | ||
+ | ] | ||
+ | ] | ||
+ | } | ||
+ | </ | ||
elm/elm-chat.1560666899.txt.gz · 最終更新: 2019/06/16 by adash333