elm antd

Desain semut elm

Galeri Komponen

Dokumentasi API

Membawa kit desain semut yang luar biasa ke Elm!

Dinyatakan sepenuhnya menggunakan elm-css ! Tidak diperlukan stylesheet eksternal. Just elm install supermacro/elm-antd dan Anda semua baik-baik saja!

Pemberitahuan Pembangunan Awal:

ELM Ant Design tidak sepenuhnya diimplementasikan dan dalam fase awal / eksplorasi. Banyak API mungkin belum berfungsi (dalam hal ini masalahnya, harap laporkan sebagai masalah - yang akan saya prioritaskan). API saat ini mengalami perubahan yang sering, tetapi karena ELM sangat keren ?, Ada perubahan yang dijamin akan dirilis di bawah rilis utama (sesuai SEMVER).

Instalasi

 elm install supermacro/elm-antd

Penggunaan

Render Stylesheet pada akar proyek ELM Anda

ELM Antd memiliki stylesheet yang diimplementasikan di ELM bahwa Anda harus menghubungkan pada akar proyek ELM Anda. Anda harus menggunakan salah satu Ant.Css.defaultStyles atau Ant.Css.createThemedStyles customTheme (lihat dokumen resmi untuk belajar tentang tema).

 import Ant.Css

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

Oleskan Normalisasi CSS

Elm Ant Design dibangun dengan Normalize.css sebagai kanvas kosongnya.

Anda harus menambahkan Normalize.css ke proyek Anda atau komponen mungkin tidak terlihat seperti yang diharapkan.

Anda memiliki tiga opsi:

• Tambahkan Normalize.CSS sebagai tag link ke HTML Anda secara langsung

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

• Tambahkan normizlize.css sebagai modul ELM menggunakan ELM-CSS-modern-normalisasi

 import Css.ModernNormalize as ModernNormalize

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

• Gunakan bundler untuk nodeJs untuk memuat normalisasi ke dalam aplikasi Anda saat build-time.

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

 require ( 'normalize' ) 

[Opsional] - Tambahkan animasi tambahan

Ada animasi tambahan yang dapat Anda tambahkan ke proyek elm-antd Anda dengan menambahkan penangan acara JS ke aplikasi Anda.

Anda dapat menambahkannya dalam satu dari dua cara:

• Tambahkan tag script berikut ke head file html Anda:

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

• Instal Paket NPM elm-antd-extras dan gunakan alat bundling seperti Webpack, Gulp, dll untuk memasukkan kode ke dalam file HTML Anda

Berkontribusi

Ingin membantu?

• Lihatlah masalahnya, dan cari "masalah pertama yang baik" atau "bantuan yang diinginkan"!
• Lihat dokumen yang berkontribusi

Inspirasi:

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