web-dev-qa-db-ja.com

Elm：UIをどのように構築し、スタイルを設定しますか？

ここ数日間、私はエルムについて学びましたが、それは爽快な経験でした。 JSの土地に戻りたくないので、: 。

私の問題は、まだElmでWebアプリを作成する方法が見当たらないということです。いくつかのガイダンスとアドバイスが欲しいです。

---（evancz/start-app は、アプリの構造を整理するのに最適です。
- evancz/effects とともに elmfire は Firebase との会話を処理できます。

しかし、UIをどのように構築してスタイル設定するのでしょうか？
具体例を見てみましょう： セマンティックUIからのスタイル選択ウィジェット 。
ドロップダウンと複数選択を処理するJSとともに、divのリストとして実装されます。

私がこれまでに見つけた選択肢は次のとおりです。

  1. SemanticのCSSとJS（JQueryが必要）を含め、 ports を使用してウィジェットのJSイベントにフックします。
  2. SemanticのCSSのみを含め、Elmで機能を構築してみてください。
  3. どちらも機能とスタイルをElmで構築します （adam-r-kowalski/Elm-Css） 。
  4. Semanticを忘れて、Bootstrapでcircuithub/Elm-bootstrap-htmlを使用してサイトをやり直してください。

私が見逃している他の代替手段、または再利用可能なウィジェットはありますか？

TheSeamau5/TabbedPages コンテナーは確かに威圧的です。他のウィジェットはこれだけの作業を必要としますか？

繰り返しますが、プロジェクトにElmを使用したいのですが、自分ですべてのウィジェットを作成する知識も時間もありません。

コンテキストについて、セマンティックから使用しているウィジェットは次のとおりです。

  • 2つのハンバーガーメニュー、画面の両側に1つ。
  • スタイル付きの選択。
  • 三角形を開示し、より多くのコンテンツを非表示/表示します。
  • 画像のカルーセルのような表示。前/次とドットが下部にあります。

Elmに取り組んでいる仕事に感謝します。また、アドバイスをお願いします。

PS：私はこの質問をElmのメーリングリストにも投稿しました。

elm
42
alesch

私はこの質問に長い間答えられていたことを知っていますが、エルム0.17と0.18に0.02ドルを追加すると思いました。 Material Design Liteコンポーネント、0.17の場合 、および .18の分岐 を確認してください。

ライブデモサイト は滑らかで網羅的です。

19
banncee

まず、TabedPagesコンテナの作成者として、複雑さについて謝罪したいと思います。そのコンポーネントは、インラインスタイルと共にElmとElmアーキテクチャを使用して何が可能かを確認するための実験として実際に意味されます。要するに、コンポーネントのアイデアは、タブとページの両方のコンテンツが不明であり、全体がインラインスタイルを使用してスタイル設定されるタブ+スワイプ可能なページコンポーネントを許可することです。これはおそらくコンポーネントを作成する最も難しいルートですが、利点はあります。

ウィジェットの実装に関しては、Elmを（非常に高度なJadeのような）HTMLを作成する手段と考えてください。これは、htmlを記述し、各divにいくつかのクラスを与え、それらのクラスをCSS（または選択したプリプロセス）でスタイル設定することができることを意味します。つまり、いいえ、ウィジェットはTabbedPagesほどの作業を必要としません。

アクションの最善の方法は、おそらくCSSを含め、おそらくElmのJS部分をやり直すことでしょう。これにより、コンポーネントの作業に多額の費用を支払うことなく、エルムから多くの保証が得られます。

野生のコンポーネントについては、残念ながら、エルムはまだ若いので、残念ながら現在のところそれほど多くはありません。これはおそらく将来変更されるでしょうが、現在はそうではありません。

最後に、ハンバーガーメニューには、SVGアイコンを提供する2つの優れたパッケージがElmにあります

  1. TheSeamau5/Elm-material-icons
  2. jystic/Elm-font-awesome

2つのアイコンの間には、選択できるアイコンが1000個弱あり（実際には数えていません）、それらは単なる機能であるため、非常に使いやすいです。これらはSvg型の単なる別の名前であるHtmlを生成するので、2つを同じように使用できます。

要するに、現在のところ、最善の方法は、HTMLとロジックをElmで、スタイルをCSS（またはSass/Less/Stylus/etc ...）で作成することです。そして、jQueryのように、ロジックの大部分は、divに配置するクラスを切り替えるだけで構成されます。

そのためには、Elmアーキテクチャに従うことをお勧めします。

init : Options -> Model

update : Action -> Model -> Model
-- or update : Action -> Model -> (Model, Effects Action) 
-- if you need effects like http

view : Address Action -> Model -> Html

インラインスタイルについては、現時点ではあまり心配しないでください。それは進行中の作業であり、そのスペース（Elm-cssなど）で多くのブレークスルーが起こっています。おそらく、人々がそれをマスターし始めるたびに、いくつかのブログ投稿とコンポーネントが表示されるようになります。 （残念なことに、これは最先端をいじくり回すときに起こることですが、発見の楽しさに参加したい場合は、エルムコミュニティはとても歓迎してくれます。

23
TheSeamau5

Bootstrapを使用することに関しては、CSSクラスを使用できますが、面倒になる可能性があります。

最後に、個別のCSSファイルを作成し、LESS、SASS、Stylus、またはCSSにコンパイルされる他の言語を使用します。

Elmコードでは、CSSクラスを使用します。

div [ class "whatever" ] [ text "Hello world" ]

外部JSコンポーネントをラップするポートを使用します。

2
Rudolf Olah