supermacro / elm-antd

The official Ant Design UI Kit for Elm
MIT License
58 stars 11 forks source link
ant-design antd components design-systems elm fp functional-programming hacktoberfest ui-kit
gDelgado14/elm-antd logo

Elm Ant Design

ELM_ANTD This project is using Percy.io for visual regression testing.

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. A lot of APIs may not work yet (in the event that this is the case, please report it as an issue - which I will prioritize). The current API is subject to frequent change, but because Elm is super cool šŸ˜Ž, any breaking changes are guaranteed to 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
      ]

Apply Normalize Css

Elm Ant Design is built with normalize.css as its blank canvas.

You should add normalize.css to your project or else the components may not look as expected.

You have three options:

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

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

npm module Link: https://www.npmjs.com/package/normalize

require('normalize')

[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:

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

Contributing

Want to help out?

Inspiration: