Unduh amber components - Unduh Kode Sumber amber components

amber components

Komponen pihak ketiga

v1.2 - still work in progress(bar)

Unduh

Komponen Amber

Implementasi Komponen Web dari Sistem Desain Amber.

Repositori ini ditujukan terutama untuk pengembang dan kontributor, untuk dokumentasi & styleGuide yang tepat silakan merujuk ke https://amber.bitrock.it.

Anda dapat melihat/mencoba komponen di buku cerita langsung.

Penggunaan

Memasang

$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/components

Secara opsional, Anda mungkin ingin menambahkan Polyfill komponen web untuk mendukung versi Firefox dan Edge sebelumnya.

$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjs

Tambahkan proyek

Anda dapat mengimpor komponen dalam proyek Anda dengan cara yang berbeda tergantung pada lingkungan:

Sebagai file JavaScript dengan bundler (seperti webpack)

 // myfile.js

// import the whole components library
import AmberComponents from '@amber-ds/components' ;

// import a single component (button for instance)
import '@amber-ds/components/button' ,

Sebagai file JavaScript dari HTML tanpa bundler

 <!-- mypage.html -->

<!-- import the whole components library -->
< script type =" module " src =" ./node_modules/@amber-ds/components/index.js " > </ script >
<!-- import a single component (button for instance) -->
< script type =" module " src =" ./node_modules/@amber-ds/components/button.js " > </ script >

Kemudian dalam file .html , atau templating yang menghasilkan output HTML:

 <!-- myfile.html -->

< amber-button priority =" primary " >
  Get ready!
< amber-button >

Perkembangan

Deskripsi singkat tentang arsitektur pengembangan, tumpukan dan cara mengerjakan kode:

Komponen web

Spesifikasi WebComponents adalah istilah payung untuk mengelompokkan spesifikasi elemen khusus V1 dan Shadow DOM V1. API browser ini memungkinkan Anda menulis tag HTML khusus yang sesuai dengan fungsi mereka sendiri, gaya dan markup yang melingkupi yang bekerja di seluruh browser dan kerangka kerja frontend.

Naskah

Untuk mencapai ketahanan kode yang lebih baik, semua komponen ditulis dalam TypeScript untuk mengambil keuntungan terutama dari pengecekan tipe statis dan sintaks dekorator. Ini juga digunakan untuk transpile kode ke ES-2015.

Berdasarkan lit-html & litelement

Karena komponen web sebagai standar tidak menangani mekanika rendering dan pengikatan data, kami mengadopsi litml litml dan komponen web literelement sebagai lapisan fondasi untuk setiap komoponen dalam perpustakaan ini.

Utilitas internal

triggerEvent(element, name, ?detail) - Pembungkus untuk membuat acara kustom baru dan mengirimkannya dengan objek detail opsional. Menggelegak sudah dihidupkan.

Tambahkan komponen baru

Untuk dengan cepat membuat boilerplate yang diperlukan (tetapi minimal) untuk komponen kuning baru, kami telah menyertakan utilitas CLI kecil:

$ yarn create:component [name]
--- or ---
$ npm run create:component [name]

Ini akan membuat subfolder di dalam folder ./src/components dengan dua file starter yang diperlukan index.ts dan style.scss .

Anda hanya perlu mengimpor komponen baru di dalam file ./src/components/library.ts untuk rantai dalam proses Dev & Build.

Gaya

Anda dapat mendefinisikan gaya setiap komponen menggunakan SASS, file index.scss utama dalam folder komponen diproses oleh kompiler dan kemudian disuntikkan dalam DOM bayangan.

Jika Anda perlu berbagi gaya, mixins atau apa pun di antara komponen, Anda harus membuat file yang terpisah dan kemudian mengimpornya di tempat yang diperlukan.

Tes

Saat ini hanya pustaka inti ( file .ts polos dalam folder src/libs ) yang diuji melalui lelucon.

Tugas NPM yang tersedia

Mulailah Proyek dalam Mode Pengembangan dengan Buku Cerita Reload Langsung

$ yarn start

Mulailah Proyek dalam Mode Pengembangan dengan Halaman HTML Sederhana

$ yarn dev

Buat buku cerita statis build di folder ./dist

$ yarn build:storybook

Jalankan Tes Unit

$ yarn test:unit

Kebijakan bercabang

Proyek ini mengikuti kebijakan percabangan sederhana:

master hanya berisi kode yang stabil, dan tidak boleh diperbarui secara langsung
development di mana kode evolutif atau eksperimental ditulis
gh-pages di mana file pembuatan buku cerita statis yang dapat distrubutasi digunakan

Jangan bergabung secara langsung development menjadi master ( itu dikunci admin ... ), selalu kirim PR untuk memiliki ulasan.

Publikasikan versi baru

Sebelum mencoba menerbitkan versi baru paket di NPM, pertama -tama jalankan melalui daftar periksa ini:

Tes lulus (diperlukan untuk PR)
Nomor Versi Penambahan dalam File package.json Mengikuti Pedoman SEMVER
Laporkan perubahan pada dokumen Amber-Website

Jika rilis termasuk komponen baru :

Versi harus ditambah dengan versi minor
Pastikan untuk menambahkan titik masuk baru webpack.config.js , ini diperlukan untuk membuat modul mandiri
Pastikan untuk mengimpor komponen dan menambahkannya di file /src/components/library.ts , dengan cara ini akan dapat diakses saat pengguna mengimpor seluruh perpustakaan
Tambahkan nama tag komponen di array /src/elements.ts , ini dapat membantu dengan kompatibilitas vue.js dalam beberapa kasus

Ketika versi benturan baru didorong ke cabang master , ia akan secara otomatis memicu penyebaran pada NPM ( setelah semua pemeriksaan otomatis ) menggunakan akun Bitrock-Admin.