Elm Ant Design

Component Gallery

API Documentation

Bringing the amazing Ant Design kit to Elm!

Styled entirely using elm-css! No external stylesheet needed. Just elm install supermacro/elm-antd and you're all good to go!

Early Development Notice:

Elm Ant Design is not fully implemented and in a early / exploratory phase. The current API is subject to change, but because Elm is super cool 😎, any breaking changes will be released under a Major release (as per semver).

Installation

elm install supermacro/elm-antd

Usage

Render stylesheet at the root of your Elm project

Elm Antd has a stylesheet implemented in Elm that you must hook up at the root of your elm project. You must use one of Ant.Css.defaultStyles or Ant.Css.createThemedStyles customTheme (see official docs to learn about theming).

import Ant.Css

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

[Optional] - Add Extra animations

There are additional animations you can add to your elm-antd project by adding JS event handlers to your app.

You can add them in one of two ways:

• Add the following script tag to the head of your html file:

<script src="https://cdn.jsdelivr.net/npm/elm-antd-extras@1.0.0/index.js"></script>

• install elm-antd-extras npm package and use a bundling tool like webpack, gulp, etc in order to include the code into your html file

Contributing

Want to help out?

• Check out the issues, and search for "good first issue" or "help wanted"!
• Check out the CONTRIBUTING doc

Inspiration:

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