chayns components
v4.20.24
Satu set komponen reaksi yang indah untuk mengembangkan aplikasi Chayns®.
Pertama, Anda harus menginstal paket chayns-components ke dalam proyek Anda:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components Gaya untuk komponen kami disediakan melalui Perpustakaan chayns-css dan beberapa komponen juga mengandalkan API chayns-js , jadi Anda harus memasukkan ini ke dalam html Anda:
<!-- CSS styles -->
< script
src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
version =" 4.2 "
> </ script >
<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > Komponen berikut adalah bagian dari paket ini:
| Komponen | Keterangan |
|---|---|
| Akordeon › | Akordeon adalah bagian yang dapat dilipat yang diaktifkan dengan berinteraksi dengan header yang terlihat secara permanen. |
| Jumlah Kontrol › | Kontrol jumlah adalah kontrol tiga segmen yang digunakan untuk meningkatkan atau mengurangi nilai tambahan. |
| AnimationWrapper › | AnimationWrapper menyediakan animasi awal yang menarik bagi anak-anaknya. |
| Lencana › | Lencana kecil, wadah melingkar yang digunakan untuk menghiasi komponen lain dengan informasi yang dapat dipengaruhi. |
| Bubble › | Gelembung mengambang yang terutama digunakan untuk memberi daya pada komponen ContextMenu dan Tooltip . |
| Tombol > | Tombol -tombol memulai tindakan, dapat mencakup judul atau ikon dan dilengkapi dengan satu set gaya yang telah ditentukan. |
| Kalender › | Kalender grid interaktif yang dapat menyoroti tanggal tertentu. |
| Kotak centang › | Kotak centang memungkinkan pengguna untuk menyelesaikan tugas yang melibatkan membuat pilihan seperti memilih opsi. Dapat ditata sebagai sakelar, sakelar visual antara dua negara bagian yang saling eksklusif - hidup dan mati. |
| ColorPicker › | Memungkinkan pengguna memilih warna untuk teks, bentuk, alat penanda, dan elemen lainnya. |
| ColorsCheme › | Menyesuaikan skema warna untuk semua komponen anak. |
| ComboBox › | Tombol dengan dropdown yang berisi daftar nilai berbeda yang dapat digulir dari mana orang dapat memilih. |
| ContextMenu › | Memberi orang akses ke fungsionalitas tambahan yang terkait dengan item layar tanpa mengacaukan antarmuka. |
| DateInfo › | Memformat rentang tanggal atau tanggal agar mudah dibaca dan mengungkapkan tanggal absolut pada hover. |
| Emojiinput › | Input teks yang memungkinkan emoji dimasukkan. |
| ExpandableContent › | Bagian yang dapat dilipat yang mengungkapkan anak -anaknya dengan transisi tinggi. |
| FileInput › | Menerima jenis file yang ditentukan melalui dialog atau seret dan drop. |
| Filterbutton › | Komponen seperti chip yang digunakan untuk memfilter daftar. Biasanya digunakan dalam kelompok 2 atau lebih. |
| FormattedInput › | Input teks yang secara otomatis memformat inputnya dengan formatter. Karena komponen ini didasarkan pada Input -komponen, dibutuhkan salah satu dari Input , yang tidak tercantum di sini. Komponen ini hanya berfungsi sebagai komponen yang tidak terkendali, yang berarti tidak mengambil value -prop. |
| Galeri › | Galeri gambar yang menampilkan hingga empat gambar secara default. Juga mendukung pemesanan ulang dan penghapusan gambar dan pratinjau gambar kabur untuk gambar yang dimuat dari tsimg.cloud . |
| Ikon › | Menampilkan ikon fontawesome. |
| Imageaccordion › | Akordeon yang memiliki gambar besar dan muncul di kisi -kisi. Harus digunakan di dalam kelompok ImageAccordionGroup . |
| ImageaccordionGroup › | Mengelompokkan beberapa komponen ImageAccordion bersama -sama, sehingga hanya satu dari mereka yang dapat terbuka sekaligus. |
| Input › | Input teks yang dapat divalidasi dan didekorasi dengan desain yang berbeda. |
| Daftar > | Pembungkus untuk ListItem -Component untuk membuat daftar. |
| ListItem › | Item dalam daftar untuk menampilkan data terkait dalam format terstruktur. Harus digunakan di dalam komponen List . |
| OpenTimes › | Input untuk waktu pembukaan. |
| Personfinder › | Pencarian AutoComplete untuk orang yang dapat disesuaikan untuk bekerja dengan data sewenang -wenang. |
| PositionInput › | Input lokasi dengan peta dan input teks. Ini membutuhkan API JavaScript Google Maps dengan pustaka tempat diaktifkan. Anda dapat menemukan informasi lebih lanjut tentang API peta di sini. |
| Progressbar › | Bilah kemajuan animasi yang dapat menunjukkan kemajuan tindakan atau keadaan tak tentu seperti pemintal pemuatan. |
| Radiobutton › | Tombol radio yang memungkinkan untuk memilih salah satu dari beberapa opsi. |
| RfidInput › | Komponen untuk mengambil sinyal RFID. |
| ScrollView › | Wadah yang dapat digulir dengan scrollbar khusus yang terlihat bagus di setiap perangkat. |
| Searchbox › | Input AutoComplete untuk mencari melalui daftar entri. |
| SELECTBUTTON › | Tombol Pilih yang Membuka Dialog Pilihan Saat Diklik. |
| SelectItem › | Tombol radio yang memperluas kontennya saat dipilih. Harus digunakan di dalam SelectList . |
| SelectList › | Daftar vertikal tombol radio yang mengungkapkan konten saat dipilih. |
| Setupwizard › | Satu set langkah yang harus dilakukan pengguna secara berurutan. |
| Setupwizarditem › | Item yang mewakili satu langkah dalam SetupWizard . |
| SharingBar › | Menu konteks untuk berbagi tautan dan beberapa teks di berbagai platform. |
| Tanda tangan > | Komponen untuk membiarkan pengguna berlangganan |
| Slider › | Jalur horizontal dengan ibu jari yang dapat dipindahkan antara nilai minimum dan maksimum. |
| SliderButton › | Satu set tombol linier yang saling eksklusif. |
| SmallwaitCursor › | Indikator pemuatan melingkar kecil. |
| TagInput › | Input teks yang memungkinkan nilai dikelompokkan sebagai tag. |
| TexTarea › | Input teks multiline yang dapat secara otomatis tumbuh dengan kontennya. |
| TextString › | Memuat string teks dari basis data kami dan menampilkannya. Menangani penggantian dan mengubah string melalui CTRL + Click (hanya internal). |
| Tooltip › | Membungkus komponen anak dan menampilkan pesan ketika anak dilayang atau diklik. Memungkinkan untuk ditampilkan secara imperatif dengan menelepon .show() atau .hide() pada rujukannya. |
| Verificationicon › |
Kami juga menyediakan satu set fungsi utilitas umum:
| Fungsi | Keterangan |
|---|---|
| Imageupload | Fungsi untuk mengunggah gambar ke tsimg.cloud |
| ISTOBItEmployee | Dapatkan informasi jika pengguna adalah karyawan Tobit |
| createLinks | Membuat string dengan tautan dari string dengan URL |
| Hapus HTML | Menghapus tag HTML dari string |
| Colorutils | Fungsi utilitas untuk mengonversi nilai warna (hex, rgb, hsv) |
| Equalizer | Fungsi utilitas untuk menyamakan lebar elemen html |
Jika Anda ingin berkontribusi pada chayns-components , lihat file Contributing.md.
