При просмотре компонентов материального дизайна, особенно полей ввода текста, рекомендации действительно понятны для ввода. поля.

Однако неясно, как размещать не вводимые текстовые поля.

Скажем, у меня есть такая форма:

enter image description here

Это нормально, если пользователь ожидает отредактировать все поля, однако я часто получаю такую ​​​​информацию только для чтения (или нет смысла редактировать ее когда-либо, например, если она сообщает информацию об операции или расчете )

Тем не менее, идея «метки» для «поля ввода», которое нависает над ним, установлена. Если бы я не использовал обведенное текстовое поле ввода, я бы получил что-то ужасно беспорядочное, если бы все было объединено - например, если бы я мог редактировать только номер сотрудника и площадь помещения:

enter image description here

Или я должен эмулировать «плавающую метку» без строки под ней, чтобы указать ввод пользователя?

enter image description here

13
Joe 9 Сен 2016 в 16:13
1
Что ты в итоге сделал?
 – 
Meli
23 Июн 2017 в 03:31
Второй вариант. Нет строки, чтобы отличить его от фактического ввода, но он помечен так же, как ввод с меткой выше.
 – 
Joe
6 Июл 2017 в 15:24

3 ответа

Лучший ответ

Последовательность имеет ключевое значение.

Angular Material — Демонстрация — Ввод

Ваше второе изображение нарушило бы непротиворечивый визуальный эффект, закрепленный в форме. Эмуляция «плавающей метки» сохранит согласованность, но только удаление подчеркивания ввода может не четко отображать, что здание не является редактируемым полем.

Возможно, серый текст похож на плавающую метку. Это может не требоваться, и может быть достаточно просто опустить подчеркивание в поле. Если вы посмотрите на пример отключенного поля ввода в демонстрационном материале, на который я ссылаюсь, вы увидите, что значение неактивно, но также подчеркнуто пунктирной линией. Текст, выделенный серым цветом, информирует пользователя о том, что ввод в настоящее время недоступен для редактирования, пунктирная линия означает, что пользователь, возможно, сможет изменить его в будущем.

Я также хотел бы, чтобы метка ввода была «Здание», а не «Имя здания». У вас есть это на первых двух изображениях, но не на третьем.

Надеюсь это поможет!

4
Tory 9 Сен 2016 в 17:05
Как насчет части просмотра? означает не экран редактирования. На экране редактирования мы можем разместить редактируемые текстовые поля. Что довольно приятно видеть. Но я запутался в просмотре пары данных ключ-значение. например (имя: Джо, город: Токио и т. д.)
 – 
KIRAN K J
1 Ноя 2021 в 16:47

Цвет — это наиболее очевидный способ показать пользователю, что существует разница между редактируемыми полями и полями только для чтения. К сожалению, все варианты, которые вы проиллюстрировали, кажутся мне разрозненными. Я чувствую, что каждая запись должна иметь подчеркивание, иначе трудно определить разницу между элементами, не входящими в форму (например, заголовком), и элементами формы.

Вы можете попробовать изменить цвет переднего плана на светло-серый, но вам придется найти другой цвет для ваших заголовков (возможно, основной цвет приложений? что-то не в оттенках серого)

2
stackoverfloweth 9 Сен 2016 в 16:41

Вы можете использовать компонент текстового поля, который отключен. Согласно спецификации MD:

Отключенные текстовые поля недоступны для редактирования. Они имеют пунктирную линию ввода и меньшую непрозрачность, поэтому они кажутся менее нажимаемыми.

enter image description here

Ссылка: https://material.io/guidelines/components/ text-fields.html#text-fields-states

2
Meli 24 Май 2017 в 06:27