Блог

В настоящее время я разрабатываю mobile enterprise web с помощью пользовательского интерфейса ReactJS / Material, и у меня возник вопрос, как показать пользователю символ длиннее, чем ограниченная ширина TextField .

Конечно, пользователи могут видеть все символы, касаясь текстового поля и перемещая курсор, но мне нужен более эффективный метод.

Ниже приведены идеи, которые я придумал.

1. Эффект анимации? (Когда TextField не трогается, эффект перемещения вперед и назад, чтобы сделать весь текст видимым)
2. Отображать multiline текстовое поле, когда пользователь касается текстового поля. (динамический multiline по всей длине текста)

Есть идеи?

Я бы сделал это просто:

• Для длинного текста (содержимое, описание …): я просто установлю его на multiline

• Для короткого текста (адрес электронной почты, пароль …) Я установлю fullWidth на мобильный.

Не нужно переусердствовать. Посмотрите на формы с самых популярных известных вам веб-сайтов, видите ли вы что-нибудь, кроме fullWidth или multiline ?

Но если вы установите TextField multiline значение, вы можете изменить его размер автоматически, когда не хватает места для отображения длинного текста, установив resize: both его в css. Значение по умолчанию none (отключено).

 const useStyles = makeStyles({
  textarea: {
    resize: "both"
  }
});
  

 <TextField
  label="MUI Text Area"
  multiline
  inputProps={{ className: classes.textarea }}
/>
  

Вы также можете использовать TextareaAutosize , но это отстой и совсем не похоже на готовый компонент MUI, поэтому не используйте его.

Живая демонстрация