Téléchargement elm antd - Téléchargement du code source elm antd

elm antd

Composants tiers

Customizeable Vertical Offsets for Ant.Modal

Télécharger

Conception de fourmi de l'orme

Galerie de composants

Documentation API

Apporter l'incroyable kit de conception de fourmis à l'orme!

Stylé entièrement à l'aide d' elm-css ! Aucune feuille de style externe nécessaire. Il suffit elm install supermacro/elm-antd et vous êtes tout prêt à partir!

Avis de développement précoce:

La conception de la fourmi des ormes n'est pas entièrement mise en œuvre et dans une phase précoce / exploratoire. De nombreuses API peuvent ne pas encore fonctionner (en cas de cas, veuillez le signaler comme un problème - que je prioriserai). L'API actuelle est sujette à des changements fréquents, mais parce que l'ELM est super cool ?, Les changements de rupture sont garantis pour être libérés dans une version majeure (selon SEMVER).

Installation

 elm install supermacro/elm-antd

Usage

Rendre la feuille de style à la racine de votre projet d'orme

Elm Antd a une feuille de style implémentée dans l'ELM que vous devez vous connecter à la racine de votre projet d'ELM. Vous devez utiliser l'un des Ant.Css.defaultStyles ou Ant.Css.createThemedStyles customTheme (voir les documents officiels pour en savoir plus sur le thème).

 import Ant.Css

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

Appliquer la normalisation de CSS

La conception de la fourmi orm est construite avec Normalize.css comme sa toile vierge.

Vous devez ajouter Normalize.css à votre projet, sinon les composants peuvent ne pas sembler comme prévu.

Vous avez trois options:

Ajouter Normalize.css en tant que balise link à votre HTML directement

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

Ajouter Nornizlize.css comme module d'ELM à l'aide de la normalisation de moderne ELM-CSS

 import Css.ModernNormalize as ModernNormalize

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

Utilisez un bundler pour NodeJS pour charger la normalisation dans votre application au moment de la construction.

Lien du module NPM: https://www.npmjs.com/package/ormalise

 require ( 'normalize' )

[Facultatif] - Ajouter des animations supplémentaires

Il existe des animations supplémentaires que vous pouvez ajouter à votre projet elm-antd en ajoutant des gestionnaires d'événements JS à votre application.

Vous pouvez les ajouter de deux manières:

Ajoutez la balise script suivante à la head de votre fichier HTML:

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

Installez le package elm-antd-extras NPM et utilisez un outil de regroupement comme WebPack, Gulp, etc. afin d'inclure le code dans votre fichier HTML