elm antd

榆樹螞蟻設計

組件畫廊

API文檔

將驚人的螞蟻設計套件帶到榆樹上！

完全使用elm-css風格！無需外部樣式表。只需elm install supermacro/elm-antd ，就可以了！

早期開發通知：

ELM ANT設計尚未在早期 /探索階段完全實施。許多API可能尚不正常（如果是這種情況，請將其報告為問題 - 我將優先考慮）。當前的API經常發生變化，但是由於ELM超級酷嗎？保證在主要版本（按SEMVER）下釋放任何破壞變化。

安裝

 elm install supermacro/elm-antd

用法

在您的榆樹項目的根部渲染樣式表

ELM ANTD在ELM中實現了一個樣式表，您必須將其連接到ELM項目的根源上。您必須使用Ant.Css.defaultStyles或Ant.Css.createThemedStyles customTheme （請參閱官方文檔以了解主題）。

 import Ant.Css

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

應用標準化的CSS

Elm Ant Design以標準化為正式為空白畫布。

您應該在項目中添加歸一化。

您有三個選擇：

• 直接將normalize.css作為link標籤直接添加到您的HTML

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

• 使用ELM-CSS現代差異添加Normizlize.css作為ELM模塊

 import Css.ModernNormalize as ModernNormalize

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

• 使用bundler for Nodejs在構建時間中加載到您的應用中。

NPM模塊鏈接：https：//www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[可選] - 添加額外的動畫

您可以通過將JS事件處理程序添加到您的應用程序中，還可以將其他動畫添加到elm-antd項目中。

您可以通過兩種方式之一添加它們：

• 將以下script標籤添加到HTML文件的head ：

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

• 安裝elm-antd-extras NPM軟件包，並使用WebPack，Gulp等捆綁工具，以將代碼包括在HTML文件中

貢獻

想幫助嗎？

• 查看問題，並蒐索“良好的第一期”或“幫助想要”！
• 查看貢獻的文檔

靈感：

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