elm antd

Elm Ant Design

구성 요소 갤러리

API 문서

놀라운 개미 디자인 키트를 Elm에 가져 오십시오!

전적으로 elm-css 사용하여 스타일! 외부 스타일 시트가 필요하지 않습니다. elm install supermacro/elm-antd 모두 가면 좋습니다!

조기 개발 통지 :

Elm ant Design은 완전히 구현되지 않았으며 초기 / 탐색 단계에서입니다. 많은 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 Ant Design은 빈 캔버스로서 정상화 된 CSS로 제작되었습니다.

프로젝트에 Normalize.css를 추가해야합니다. 그렇지 않으면 구성 요소가 예상대로 보이지 않을 수 있습니다.

세 가지 옵션이 있습니다.

• html에 직접 link 태그로 ormalize.css를 추가하십시오.

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

• ELM-CSS- 모더니즘을 사용하여 ELM 모듈로 NORMIZLIZE.CSS를 추가하십시오

 import Css.ModernNormalize as ModernNormalize

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

• Bundler를 사용하여 nodejs를 사용하여 빌드 타임에 앱에 정규화를로드하십시오.

NPM 모듈 링크 : https://www.npmjs.com/package/normalize

 require ( 'normalize' ) 

[선택 사항] - 추가 애니메이션 추가

JS 이벤트 처리기를 앱에 추가하여 elm-antd 프로젝트에 추가 할 수있는 추가 애니메이션이 있습니다.

두 가지 방법 중 하나로 추가 할 수 있습니다.

• HTML 파일의 head 에 다음 script 태그를 추가하십시오.

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

• elm-antd-extras NPM 패키지를 설치하고 Webpack, Gulp 등과 같은 번들링 도구를 사용하여 코드를 HTML 파일에 포함시킵니다.

기여

도와주고 싶습니까?

• 문제를 확인하고 "좋은 첫 번째 이슈"또는 "도움말"을 검색하십시오!
• 기고 문서를 확인하십시오

영감:

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