elm antd

Diseño de hormigas de olmo

Galería de componentes

Documentación de API

¡Trayendo el increíble kit de diseño de hormigas a Elm!

¡Styled por completo con elm-css ! No se necesita hoja de estilo externo. ¡Solo elm install supermacro/elm-antd y estará listo para comenzar!

Aviso de desarrollo temprano:

El diseño de hormigas ELM no se implementa completamente y en una fase temprana / exploratoria. Es posible que muchas API aún no funcionen (en el caso de que este sea el caso, informa como un problema, que priorizaré). La API actual está sujeta a cambios frecuentes, pero debido a que ELM es súper genial?, Se garantiza que los cambios de ruptura se liberen bajo un lanzamiento importante (como Semver).

Instalación

 elm install supermacro/elm-antd

Uso

Renderiza la hoja de estilo en la raíz de tu proyecto ELM

Elm Antd tiene una hoja de estilo implementado en ELM que debe conectarse en la raíz de su proyecto ELM. Debe usar una de Ant.Css.defaultStyles o Ant.Css.createThemedStyles customTheme (ver documentos oficiales para aprender sobre temas).

 import Ant.Css

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

Aplicar normalizar CSS

El diseño de ELM Ant está construido con Normalize.css como su lienzo en blanco.

Debe agregar Normalize.css a su proyecto o de lo contrario los componentes pueden no parecer como se esperaba.

Tienes tres opciones:

• Agregue Normalize.css como una etiqueta link a su HTML directamente

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

• Agregue Normizlize.css como un módulo ELM utilizando ELM-CSS-Modern-Normalize

 import Css.ModernNormalize as ModernNormalize

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

• Use un Bundler para NodeJS para cargar Normalize en su aplicación a tiempo de compilación.

Enlace del módulo NPM: https://www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[Opcional] - Agregar animaciones adicionales

Hay animaciones adicionales que puede agregar a su proyecto elm-antd agregando controladores de eventos JS a su aplicación.

Puede agregarlos de una de dos maneras:

• Agregue la siguiente etiqueta script al head de su archivo HTML:

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

• Instale el paquete NPM elm-antd-extras y use una herramienta de agrupación como Webpack, Gulp, etc. para incluir el código en su archivo HTML

Que contribuye

¿Quieres ayudar?

• ¡Mira los problemas y busca "buen primer problema" o "ayuda de ayuda"!
• Echa un vistazo al documento contribuyente

Inspiración:

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