У меня есть список флажков, и я хотел бы добавить переключатель «выбрать все». У меня уже работает, включая установку неопределенного состояния при выборе некоторых элементов. Что я хотел бы знать, так это то, что когда список представляет собой Список Capital-L, указывает ли материал, как разместить поле «выбрать все»?

В настоящее время он встроен в остальной список, но мне не нравится, как он выглядит:

List styling

Я думаю поместить это как второстепенное действие (справа) в заголовке раздела, но это может вызвать свои проблемы. Я надеюсь, что есть «правильный» способ сделать это, но я соглашусь на предложения, если нет.

7
Mike M 29 Авг 2017 в 19:02
1
Просто любопытно: что вы подразумеваете под «списком заглавных букв»? Я не знаком с этим термином.
 – 
Mike M
29 Авг 2017 в 16:36
Извините, я имел в виду имя собственное «список», как оно определено в Спецификации материалов, в отличие от общего термина «список» или веб-специфического значения <ul> / <ol>
 – 
Coderer
30 Авг 2017 в 10:01

2 ответа

Лучший ответ

Попробуйте совместить заголовок раздела и основной флажок над списком.

Я не уверен, как выглядит остальная часть вашего пользовательского интерфейса, но часто в выбираемом списке есть «выбрать все» вдоль заголовка таблицы или заголовка раздела.

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

Подобно этому:

enter image description here

Таким образом, он подчеркивает заголовок списка, и у вас есть четкая строка сканирования вниз по списку.

Материал не так часто отступает, обычно только для подпунктов. Например, если у флажка или переключателя есть дополнительные параметры, зависящие от их выбора, то под родительским элементом появится список с отступом.

В вашем случае «Все» - это не родительский элемент, а главный элемент управления и индикатор в одном.

В приведенном выше примере вы можете сохранить выравнивание.

Другой пример: в элементе управления выпадающим списком:

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

enter image description here

Я привел этот пример в другое сообщение:

9
Community 16 Июн 2020 в 13:51
Это более или менее то, с чем я пошел, хотя, как и в вашем анимированном примере, я думаю, что важно различать заголовок по цвету - одного веса недостаточно, чтобы прояснить наличие иерархии.
 – 
Coderer
30 Авг 2017 в 11:24

Вы можете попробовать сделать отступ ниже всех значений. Это даст четкую картину и устранит проблему инлайна. Надеюсь, это решит проблему, и дайте мне знать, если у вас есть какие-либо сомнения.

enter image description here

1
Community 16 Июн 2020 в 13:51