elm antd

ELM ANT Design

Компонентная галерея

Документация API

Принесите удивительный комплект дизайна муравья в ELM!

Стилизованный полностью с использованием elm-css ! Не нужна внешняя таблица стилей. Просто elm install supermacro/elm-antd , и все готово!

Уведомление о раннем развитии:

Дизайн муравья ELM не полностью реализован и на ранней / исследовательской фазе. Многие API могут еще не сработать (в случае, если это так, пожалуйста, сообщите об этом как о проблеме - который я приоритет). Текущий API подлежит частым изменениям, но поскольку ELM очень круто?, Любые нарушения гарантированно будут выпущены под основным выпуском (согласно SEMVER).

Установка

 elm install supermacro/elm-antd

Использование

Таблица стилей рендеров в корне вашего проекта ELM

Elm Antd имеет таблицу стилей, внедренную в ELM, которую вы должны подключить к корню вашего проекта ELM. Вы должны использовать один из Ant.Css.defaultStyles или Ant.Css.createThemedStyles customTheme (см. Официальные документы, чтобы узнать о темах).

 import Ant.Css

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

Применить нормализовать CSS

Дизайн муравья Elm построен с Normalize.css как его пустой холст.

Вы должны добавить Normalize.css в свой проект, иначе компоненты могут выглядеть не так, как ожидалось.

У вас есть три варианта:

• Добавить Normalize.css в качестве тега link в свой HTML напрямую

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

• Добавить normizLize.css в качестве модуля ELM с использованием ELM-CSS-модерн-нормейзы

 import Css.ModernNormalize as ModernNormalize

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

• Используйте пакет для Nodejs, чтобы загружать нормализовать в ваше приложение во время сборки.

Ссылка на модуль NPM: https://www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[Необязательно] - Добавить дополнительную анимацию

Существуют дополнительные анимации, которые вы можете добавить в свой проект elm-antd , добавив в ваше приложение обработчики событий JS.

Вы можете добавить их одним из двух способов:

• Добавьте следующий тег script в head вашего HTML -файла:

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

• Установите пакет NPM elm-antd-extras и используйте инструмент для комплекса, такой как WebPack, Gulp и т. Д., Чтобы включить код в свой HTML-файл

Внося

Хотите помочь?

• Проверьте проблемы и найдите «Хороший первый выпуск» или «Помогите хотеть»!
• Проверьте док

Вдохновение:

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