elm antd

Elm Ameisendesign

Komponentengalerie

API -Dokumentation

Bringen Sie das erstaunliche Ant -Design -Kit nach Elm!

Vollständig mit elm-css gestaltet! Kein externes Stylesheet benötigt. elm install supermacro/elm-antd und Sie sind alle gut zu gehen!

Frühere Entwicklungsbescheid:

ELM ANT -Design ist nicht vollständig implementiert und in einer frühen / explorativen Phase. Eine Menge APIs funktionieren möglicherweise noch nicht (falls dies der Fall ist, melden Sie ihn bitte als ein Problem - was ich Priorität priorisieren werde). Die aktuelle API unterliegt häufigen Veränderungen, aber da ELM super cool ist, werden brechende Änderungen im Rahmen einer größeren Veröffentlichung (gemäß SEMVER) garantiert freigegeben.

Installation

 elm install supermacro/elm-antd

Verwendung

Render Stylesheet am Wurzel Ihres ELM -Projekts rendern

ELM ANTD hat ein Stylesheet in ELM implementiert, mit dem Sie sich an der Wurzel Ihres ELM -Projekts anschließen müssen. Sie müssen eine von Ant.Css.defaultStyles oder Ant.Css.createThemedStyles customTheme verwenden (siehe offizielle Dokumente, um etwas über das Treffen zu erfahren).

 import Ant.Css

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

Normalisieren Sie CSS

ELM ANT -Design wird mit Normalize.css als leere Leinwand gebaut.

Sie sollten Ihrem Projekt Normalize.css hinzufügen, da die Komponenten möglicherweise nicht wie erwartet aussehen.

Sie haben drei Optionen:

• Fügen Sie Normalize.css als link -Tag direkt zu Ihrem HTML hinzu

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

• Fügen Sie normizlize.css als ELM-Modul unter Verwendung von ELM-CSS-Moderne-Normale hinzu

 import Css.ModernNormalize as ModernNormalize

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

• Verwenden Sie einen Bundler, damit NodeJs zur Erstellung der Normalisierung in Ihre App laden können.

Link NPM Modul: https://www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[Optional] - zusätzliche Animationen hinzufügen

Es gibt zusätzliche Animationen, die Sie zu Ihrem elm-antd -Projekt hinzufügen können, indem Sie Ihrer App JS-Event-Handler hinzufügen.

Sie können sie auf zwei Arten hinzufügen:

• Fügen Sie dem head Ihrer HTML -Datei das folgende script -Tag hinzu:

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

• elm-antd-extras

Beitragen

Willst du helfen?

• Schauen Sie sich die Probleme an und suchen Sie nach "Good First Ausgabe" oder "Hilfe gesucht"!
• Schauen Sie sich den beitragenden Doc an

Inspiration:

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