Pengkodean

Pengantar Unggahan File UI Material | Unggah file di UI Material & Contoh

Daftar Isi sembunyikan 1 Mengapa Material UI? 2 Apa saja Contoh Komponen Material UI? 3 Bagaimana Saya Mengunggah...

Ditulis oleh Daniel Roncaglia · 3 min baca >
Unggahan File UI Materi

Material UI adalah alat yang paling optimal dan efektif untuk menambahkan grafik dan animasi ke aplikasi dan menggunakannya dengan inovasi teknologi dan ilmiah. Ini pada dasarnya adalah bahasa desain yang dibuat oleh Google pada tahun 2014. Terkadang, sulit untuk mengetahui caranya Unggah file UI Material bekerja.

Ini terintegrasi dengan semua kerangka web JavaScript, termasuk AngularJS, VueJS, dan ReactJS, untuk membuat program lebih menakjubkan dan responsif. Material UI adalah kerangka antarmuka pengguna React yang populer, dengan lebih dari 35,000 bintang di GitHub.

Fitur Material UI mencakup fungsi utilitas tingkat rendah—dikenal sebagai “fungsi gaya”—yang dapat digunakan untuk membuat sistem desain yang canggih.

Mengapa Material UI?

Material UI adalah perpustakaan React UI favorit kami, dan sejujurnya, kami tidak dapat memikirkan perpustakaan kedua yang dapat kami sarankan. 

Namun, membuat perpustakaan UI yang bagus merupakan tantangan karena berbagai alasan. Bukan hanya waktu dan upaya yang diperlukan untuk menciptakan komponen fungsional dan menarik yang menciptakan hambatan; sebaliknya, perpustakaan juga perlu didokumentasikan dengan baik, memiliki model praktis, dan menangani situasi yang tidak ada habisnya seperti reaktivitas, kegunaan, lokalisasi, tema, dan sebagainya.

Material UI adalah pilihan default kami untuk proyek perusahaan karena banyaknya pekerjaan yang telah dilakukan di dalamnya. Jika Anda pernah mencoba membuat perpustakaan UI, Anda memahami betapa memakan waktu untuk mendapatkan gaya dan fungsionalitas yang tepat. 

Hasilnya, menggunakan Material UI akan menghemat banyak waktu yang dapat Anda gunakan untuk mengembangkan fitur untuk proyek khusus Anda.

Nilai tema diakses langsung dari properti komponen. Ada juga manfaat lainnya. Misalnya, UI Materi:

  • Mendorong keseragaman dalam antarmuka pengguna
  • Menulis secara responsif dengan mudah
  • Menggunakan objek tema apa pun
  • Cukup cepat untuk menjalankan semua fungsi.

Dengan tumpukan file, upload file mudah dan tidak repot. 

Apa saja Contoh Komponen Material UI?

Saat mempelajari cara mengimplementasikan Material UI, Anda akan menghabiskan sebagian besar waktu Anda di area “Komponen”. Aspek terpenting dari setiap komponen adalah Anda biasanya dapat mencoba model praktis di halaman tersebut.

Coba klik simbol kode untuk setiap contoh untuk melihat keseluruhan kode sumber: > untuk setiap contoh. Hal paling umum yang akan Anda perhatikan pada setiap komponen adalah contoh cara menggunakannya, namun Anda mungkin ingin memeriksa cara penggunaannya, CSS yang diterapkan, dan daftar lengkap impor.

Oleh karena itu, Anda harus selalu mengklik ikon “Tampilkan Sumber Lengkap”. Anda bahkan dapat menggunakan opsi “Edit di CodeSandbox” untuk melihat sampel secara real-time.

Bagian terbaiknya adalah contoh-contoh ini berfungsi, sehingga Anda dapat menyalin seluruh kode ke dalam proyek Anda dan kemudian mengintegrasikan contoh tersebut dengan mudah. Sampelnya biasanya inventif dan memanfaatkan berbagai fitur Material UI.

Bagaimana Saya Mengunggah File Menggunakan Material UI?

TextField dapat digunakan untuk mengunggah file sederhana.

Seperti inilah tampilan kodenya:

<TextField

  nama=”unggah-foto”

  ketik=”berkas”

/>

Alat peraga tipe harus disetel ke file.

Bagaimana Anda menjadikannya milik Anda?

Kita mungkin perlu mengubah kontrol dasar karena mereka tidak terlalu suka melakukan hal ini. Namun, prosesnya sederhana karena kami bekerja dengan Material UI.

Langkah 1: Buat Masukan

Buat input html dengan id properti dan file. Kami tidak ingin melihatnya; oleh karena itu, gunakan style='display:none'.

Ini adalah bagaimana kodenya akan muncul.

<input  style={{ display: ‘none’ }} 

         id=”unggah-foto”  

         nama=”unggah-foto”  

         ketik=”berkas”/> 

Langkah 2: Sesuaikan Kode

Buatlah label untuk masukan yang kita buat pada langkah pertama.

Bergantung pada tampilan unggahan file yang Anda inginkan, gunakan Tombol Material UI atau Fab.

Mari kita mulai dengan sebuah tombol.

Tambahkan komponen tombol ke label yang baru saja kita buat. Tetapkan rentang nilai untuk komponen props. Jika tidak, elemen tombol akan dirender menggunakan tag HTML button>, yang akan menyebabkan pengunggahan file kita gagal.

Kode untuk elemen tombol adalah sebagai berikut. 

  

    gaya={{ tampilan: 'tidak ada' }}

    id=”unggah-foto”

    nama=”unggah-foto”

    ketik=”berkas”

  />

  

    Tombol unggah

  

;

Sekarang mari kita lihat antarmuka pengguna baru.

Untuk ini, kita akan menggunakan elemen Material UI Fab. Kode ini sangat mirip dengan kode contoh tombol.

  

    gaya={{ tampilan: 'tidak ada' }}

    id=”unggah-foto”

    nama=”unggah-foto”

    ketik=”berkas”

  />

  <Fab

    warna=”sekunder”

    ukuran=”kecil”

    komponen=”rentang”

    aria-label=”tambahkan”

    varian=”diperpanjang”

  >

    Mengunggah foto

  

  <br />

  <br />

  

    

  

;

Apakah Anda Siap melakukan Pengunggahan File Material UI?

Sesuai dengan namanya, Material UI telah dikonfigurasikan sebelumnya untuk bekerja dengan Desain Material Google. Hasilnya, Anda akan memiliki akses ke pustaka komponen yang mungkin terlihat dan terasa familier bagi pengguna Anda. Ini membantu Anda memulai perpustakaan dengan cepat sambil menghabiskan waktu sesedikit mungkin untuk menata komponen dan bereksperimen dengan CSS. 

Desain Material adalah sistem desain lengkap yang menjelaskan tujuan berbagai komponen yang dapat diakses dan memberikan contoh bagaimana komponen tersebut harus digunakan di seluruh proyek Anda. Anda tidak hanya mendapatkan perpustakaan yang sudah sesuai dengan Desain Material, tetapi Anda juga mendapatkan akses ke Ikon Material. Hal ini memerlukan serangkaian ikon yang konsisten untuk dipilih dan kompatibel dengan sistem desain yang digunakan.

Apakah Anda mencari alat API canggih yang dapat membantu Anda mengunggah dan mentransfer konten dengan cara yang paling tanpa kerugian? Mengunduh tumpukan file hari ini dapat membantu Anda mengunggah file Material UI.

Tinggalkan Balasan

Translate »