Material-UI adalah sebuah framework desain komponen untuk React yang memungkinkan pengembang membuat antarmuka pengguna yang konsisten dan menarik. Dalam artikel ini, kita akan membahas cara menggunakan prop endAdornment pada komponen TextField untuk menambahkan ikon di sebelah kanan.
Pastikan proyek React Anda telah menginstal React dan Material-UI. Jika belum, lakukan instalasi dengan perintah:
npm install react @mui/material @emotion/react @emotion/styled
Import komponen-komponen yang diperlukan ke dalam file komponen React Anda. Pastikan Anda mengganti YourIcon dengan ikon yang sesuai dari 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 TextField dengan ikon menggunakan prop endAdornment.
const TextFieldWithIcon = () => {
return (
<TextField
label="Input Text"
variant="outlined"
fullWidth
InputProps={{
endAdornment: (
<IconButton>
<YourIcon />
</IconButton>
),
}}
/>
);
};
export default TextFieldWithIcon;
Gunakan komponen tersebut di dalam komponen atau halaman React Anda.
import React from 'react';
import TextFieldWithIcon from './TextFieldWithIcon'; // Sesuaikan dengan path file Anda
const App = () => {
return (
<div>
<h1>Contoh Penggunaan TextField dengan Icon di Sebelah Kanan</h1>
<TextFieldWithIcon />
</div>
);
};
export default App;
