React.js adalah salah satu library JavaScript yang populer untuk membangun antarmuka pengguna yang responsif dan dinamis. Material-UI, di sisi lain, adalah sebuah framework komponen React yang dirancang dengan desain Material Design dari Google. Dalam artikel ini, kita akan membahas cara membuat TextField dengan Material-UI dan menambahkan sebuah ikon di sebelah kanan TextField.
Pertama, pastikan Anda telah menginstal React dan Material-UI di proyek Anda. Jika belum, Anda dapat melakukannya dengan perintah berikut:
npm install react @mui/material @emotion/react @emotion/styled
Pastikan Anda mengganti YourIcon dengan ikon yang ingin Anda gunakan. Anda dapat mencari ikon yang tersedia di Material-UI Icons.
import React from 'react';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import YourIcon from '@mui/icons-material/YourIcon'; // Ganti YourIcon dengan ikon yang diinginkan
Sekarang, mari kita buat komponen React yang memiliki TextField dengan sebuah ikon di sebelah kanan.
const TextFieldWithIcon = () => {
return (
<div>
<TextField
label="Input Text"
variant="outlined"
fullWidth
// Tambahan style jika diperlukan
// style={{ marginBottom: '10px' }}
/>
<IconButton>
<YourIcon />
</IconButton>
</div>
);
};
export default TextFieldWithIcon;
Gunakan komponen yang telah dibuat di langkah sebelumnya di dalam komponen lain atau di halaman Anda.
import React from 'react';
import TextFieldWithIcon from './TextFieldWithIcon'; // Sesuaikan dengan path file Anda
const App = () => {
return (
<div>
<h1>Contoh Penggunaan TextField dengan Icon</h1>
<TextFieldWithIcon />
</div>
);
};
export default App;
