elm antd

エルムアリのデザイン

コンポーネントギャラリー

APIドキュメント

Amazing Ant Design KitをElmにもたらします！

elm-cssを使用して完全にスタイルを整えました！外部スタイルシートは必要ありません。 elm install supermacro/elm-antdだけで、あなたはすべて行ってくれます！

早期開発通知：

エルムアリのデザインは完全に実装されておらず、初期 /探索的段階で。多くのAPIがまだ機能しない可能性があります（これが事実である場合は、問題として報告してください - これは優先順位を付けます）。現在のAPIは頻繁に変化する可能性がありますが、ELMは非常にクールであるため、大規模なリリース（SEMVERごとに）で壊れた変更がリリースされることが保証されています。

インストール

 elm install supermacro/elm-antd

使用法

StyleSheetをELMプロジェクトのRootでレンダリングします

Elm Antdには、ELMプロジェクトのRootに接続する必要があるというStyleSheetがELMに実装されています。 Ant.Css.defaultStylesまたはAnt.Css.createThemedStyles customThemeのいずれかを使用する必要があります（テーマについて学ぶための公式ドキュメントを参照）。

 import Ant.Css

view : Model -> Html Msg
view model =
    div []
      [ Ant . Css . defaultStyles
      , viewApp model
      ] 

正規化CSSを適用します

エルムアリのデザインは、空白のキャンバスとしてremormize.cssを使用して構築されています。

remormize.cssをプロジェクトに追加する必要があります。そうしないと、コンポーネントが期待どおりに見えない場合があります。

3つのオプションがあります。

• htmlへのlinkタグとしてremormize.cssを直接追加する

 < link href =" https://pagecdn.io/lib/normalize/8.0.1/normalize.min.css " rel =" stylesheet " crossorigin =" anonymous "  >

• ELM-CSS-Modern-normalizeを使用して、ELMモジュールとしてnormizlize.cssを追加します

 import Css.ModernNormalize as ModernNormalize

view : Model -> Html Msg
view _ =
    [ ModernNormalize . globalHtml
    , Ant . Css . defaultStyles
      -- Your application view comes here
    ]

• nodejsにバンドラーを使用して、ビルド時にアプリに正規化します。

NPMモジュールリンク：https：//www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[オプション] - 追加のアニメーションを追加します

JSイベントハンドラーをアプリに追加することで、 elm-antdプロジェクトに追加できる追加のアニメーションがあります。

2つの方法のいずれかで追加できます。

• 次のscriptタグをHTMLファイルのheadに追加します。

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/index.js " > </ script >

• elm-antd-extras NPMパッケージをインストールし、HTMLファイルにコードを含めるために、Webpack、Gulpなどのバンドルツールを使用します

貢献

助けたいですか？

• 問題をチェックして、「良い最初の問題」または「ヘルプ募集」を検索してください！
• 貢献ドキュメントをご覧ください

インスピレーション：

• https://github.com/aforemny/elm-mdc
• https://github.com/edutainmentlive/elm-bootstrap
• https://github.com/noredink/noredink-ui