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