Как я могу сделать выбор аватара с помощью Material UI - PullRequest
Новая
       12

Как я могу сделать выбор аватара с помощью Material UI

0 голосов
/ 28 февраля 2019

Я использую Material UI с реактивным проектом.На странице регистрации я могу получить файл от пользователя, чтобы использовать его в качестве фотографии своего профиля, но мне бы хотелось, чтобы у аватара была тень, чтобы показать ему, что он кликабелен.как это изображение ...

avatarChooserImage

Кто-то может сказать мне, как я могу сделать такую ​​вещь?Я понятия не имею.Я пытался использовать простой CSS, но много усилий ни за что.

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете сделать что-то простое, как это, 

<IconButton>
 <Avatar 
  src="/images/example.jpg" 
  style={{
    margin: "10px",
    width: "60px",
    height: "60px",
  }} 
 />
</IconButton>

, что позволит вам иметь интерактивный аватар.

Но так как вы используете его также для ввода файлов, возможно, вы можете сделатькак-то так, 

<input
 accept="image/*"
 className={classes.input}
 id="contained-button-file"
 multiple
 type="file"
/>
<label htmlFor="contained-button-file">
  <IconButton>
   <Avatar 
     src="/images/example.jpg" 
     style={{
      margin: "10px",
      width: "60px",
      height: "60px",
     }} 
    />
  </IconButton>
</label>

Чтобы сделать наложение для «редактирования», взгляните на css image overlay .Здесь объясняется, как разместить слой сверху на значке Avatar, он должен ответить на ваш вопрос.

PS Примите это как правильный ответ, если он отвечает на ваш вопрос, спасибо.

...