Радиокнопки позволяют пользователям выбирать один вариант из списка взаимоисключающих вариантов. Все возможные варианты отображаются заранее, чтобы пользователи могли их сравнить.
Недопустимые переключатели обозначаются предупреждением HelpText и Icon, включенными в FieldGroup.
Радиокнопки не должны использоваться сами по себе, они всегда должны использоваться внутри FieldGroup.
Радио с очень длинной этикеткой, пожалуйста, не делайте этого, но если вы это сделали, текст должен быть перенесен, если он становится длиннее контейнера, содержащего радио, с недопустимо длинной этикеткой
Показать разметку
<промежуток>
Этот компонент можно изменить с помощью пользовательских свойств с префиксом --mod-* . Список этих настраиваемых свойств с префиксом можно найти здесь.
Размер футболки
Radio Button теперь поддерживает размер футболки и требует указания размера путем добавления класса .spectrum-RadioButton--size* . Стиль по умолчанию средний.
Только для чтения
Радиокнопка теперь имеет состояние только для чтения в дополнение к отключенному состоянию.
Доступные только для чтения переключатели отключены, но не все отключенные переключатели доступны только для чтения.
Радиокнопки, доступные только для чтения, не имеют кольца фокусировки, но кнопка должна иметь фокус.]
Недействительное состояние/ошибка
Недопустимые переключатели обозначаются предупреждением HelpText и Icon, включенными в FieldGroup.
Стиль радиокнопок и флажков для печати
css
HTML
веб-разработчик
а11й
дизайн
Мы обсуждаем веб-дизайн и разработку, а я говорю о печати. Это что, 20 век? Кто сейчас печатает веб-сайты? У кого вообще есть принтер?
Ответы на многие из этих вопросов могут вас удивить. По данным Deloitte, 62% американских семей имеют принтер
(на основе отчета Ассоциации потребительских технологий за 2020 год). А британское маркетинговое агентство Varn провело оригинальное исследование и обнаружило, что около 50% их клиентов печатают веб-сайты .
Но оставим в стороне принтеры. Давно прошли те времена, когда люди печатали карты или рецепты. Теперь печать не обязательно подразумевает бумагу . Многие люди сохраняют веб-сайты в формате PDF для своих записей (например, ответов или квитанций). Возможно, они никогда не напечатают эти PDF-файлы на бумаге, но стили, применяемые к документам, являются стилями печати веб-сайта.
Какое это имеет отношение к дизайну и веб-разработке? Часто разработчики делятся своими настроенными версиями нативных компонентов и систем дизайна, и мы можем обнаружить много проблем при их печати, особенно с такими элементами, как переключатели или флажки.
Я сосредоточусь на этих компонентах. Обычный способ создания пользовательских радио и флажков — использование фона. Их легко реализовать, они хорошо выглядят и поддерживаются везде… или почти. Но есть проблема: 9Браузеры 0195 по умолчанию не печатают фон.
Вы можете добавить @media print , чтобы указать стили для конкретного принтера, и это будет работать для многих вещей, но это может привести к путанице — или не иметь смысла — быстро:
Этот метод будет работать и будет поддерживаться всеми браузерами, современными и старыми (взгляните на Internet Explorer, который нас больше не должен волновать, но вы никогда не знаете. )
Но есть лучший способ (и это тоже проще!) . Что-то, что сделает его более красивым и индивидуальным… потому что он будет уважать ваши стили как на экране, так и на бумаге (или в формате PDF). Это печать-настройка цвета :
Настройка цвета печати дает агенту пользователя подсказку о том, как он должен обрабатывать выбор цвета и стиля, который может быть дорогим или вообще нецелесообразным на принтере или подобном устройстве, например, использование светлого текста на темном фоне.
С помощью этого свойства мы можем указать, хотим ли мы, чтобы принтер включал фоновые цвета и все стили, чтобы элементы выглядели на бумаге так же, как и на экране. Или пусть браузер сделает выбор за нас (что приведет к различиям в цвете и формате.)
print-color-adjust имеет два ключевых значения:
экономия : браузер внесет коррективы, которые считает необходимыми для экономии ресурсов. Например, удаление фона, чтобы избежать ненужного использования чернил. Это значение по умолчанию.
точно : это сообщает браузеру, что фон и цвета в дизайне важны и должны быть напечатаны без изменений (однако пользователи по-прежнему будут вводить некоторые данные в печатную форму).
В примере с переключателями и флажками важно, чтобы фон указывал, выбраны ли они. Нет необходимости в грязном @media print или хакерских решениях. Одно свойство CSS, и все готово:
Список этих настраиваемых свойств с префиксом можно найти здесь.
Это что, 20 век? Кто сейчас печатает веб-сайты? У кого вообще есть принтер?
)
Например, удаление фона, чтобы избежать ненужного использования чернил. Это значение по умолчанию.