Material-UI menyediakan banyak komponen yang mempermudah pembangunan antarmuka pengguna yang estetis dan responsif di React.js. Dalam artikel ini, kita akan membahas cara menggunakan prop startAdornment pada komponen TextField untuk menambahkan ikon di sebelah kiri.
Pastikan proyek React Anda telah menginstal React dan Material-UI. Jika belum, jalankan perintah berikut:
npm install react @mui/material @emotion/react @emotion/styled
Impor komponen yang diperlukan ke dalam file komponen React Anda. Pastikan Anda mengganti YourIcon dengan ikon yang sesuai, yang dapat Anda temukan 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
Buat komponen TextField dengan ikon menggunakan prop startAdornment.
const TextFieldWithIcon = () => {
return (
<TextField
label="Input Text"
variant="outlined"
fullWidth
InputProps={{
startAdornment: (
<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 Kiri</h1>
<TextFieldWithIcon />
</div>
);
};
export default App;
