Я думаю, вы видели на некоторых сайтах, что некоторая часть текста изначальна невидима и только при клике на текстовую ссылку «Подробнее…», «Развернуть» или «Показать/скрыть» появляется скрытая часть текста. Это иногда удобно для навигации по тексту, если он очень большой и некоторую часть/части текста можно и даже нужно скрыть. В любом случае пользователь в любой момент может развернуть скрытый текст и прочесть его. Таким же образом можно скрыть не только текст, но и различные изображения, картинки.
Скажу по секрету, что некоторые SEO-шники таким образом скрывают текст для продвижения сайта под ссылкой простой точки, ведь этот текст предназначен для поисковиков, а не для людей, но не будем о грустном…
Раскрывающийся текст HTML
Тегов HTML, которые смогли бы развернуть при необходимости и показать скрытый текст, пока нет. На форумах в BB-коде в этих целях используется тег [spoiler][/spoiler], но он не работает в HTML.
Для раскрытия текста при клике на текстовую ссылку, нужен скрипт. Я в сети нашла очень простой скрипт.
Скрипт, раскрывающий текст
Ниже сам скрипт. Так как я знаю, как иной раз тяжело в 3 ночи что-то сообразить и понять элементарные казалось бы вещи или когда не понимаешь вообще о чём речь, но нужно кровь из носа выполнить задуманное, в скрипте подробно описано что где поменять/добавить.
Подробнее... (или любая другая надпись на ссылке, при клике на которую показывается весь скрытый изначально текст)<br />
<div>
ЗДЕСЬ ПИШЕМ ИЛИ ВСТАВЛЯЕМ ТЕКСТ, КОТОРЫЙ ДОЛЖЕН БЫТЬ ПО УМОЛЧАНИЮ СКРЫТЫМ И ПОКАЗЫВАТЬСЯ (РАСКРЫВАТЬСЯ) ТОЛЬКО ПРИ КЛИКЕ НА ССЫЛКУ "ПОДРОБНЕЕ", СО ВСЕМИ НУЖНЫМИ ТЕГАМИ.
</div>
Но этот метод, точнее, скрипт, работает только если вам необходимо скрыть на одной страничке один блок текста. В случаях, когда на одной странице таких скрывающихся блоков текста будет несколько, этот скрипт не подходит. Для этих целей есть другой скрипт, который можно использовать, как для скрытия на одной странице одного, так и нескольких блоков текста или картинок.
Скрипт ниже:
Скрипт, раскрывающий несколько блоков текста или картинок на одной странице
<p>Показать/скрыть детальную информацию о о блоке текста №1</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №1
</span>
<p>Показать/скрыть детальную информацию о о блоке текста №2</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №2
</span><p>Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №3
</span><p>Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>
Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block.
Вот и всё! В любом случае, если возникнут вопросы — пишите, буду рада помочь!
Посмотреть напутствие!
Удачи вам в этом порой нелегком деле веб-строительства, достижения всех поставленных целей, выполнения заданий в срок, постоянного совершенствования и крепкого здоровья!
Выпадающий текст — плагин WordPress Collapse-O-Matic
Сегодня рассмотрим как сделать выпадающий текст в вашей записи или странице WordPress. Для этой цели лучше всего подойдет плагин Collapse-O-Matic. Он очень простой, легкий и имеет только одну функцию — прячет под кат скрытый текст. Устанавливается плагин стандартным способом из админки WordPress или можете скачать плагин выпадающего текста на официальной странице плагина. Плагин имеет более 70 000 загрузок, то есть довольно востребован.
Содержание статьи
1 Для чего нужен выпадающий текст?
2 Как реализовать выпадающий текст плагином Collapse-O-Matic
3 Настройки плагина Collapse-O-Matic
Для чего нужен выпадающий текст?
Во-первых, таким образом вы можете сэкономить место на странице, чтобы она была более компактной и более удобной к восприятию пользователями. Во-вторых вы сможете выделить основные разделы или информацию, а дополнительную информацию убрать под кат. При необходимости посетитель страницы кликнет по ссылке и появиться выпадающий текст. Примерно вот так:
**************************
Показать раскрывающийся текст.
Этот выпадающий скрытый текст создан с помощью простого плагина Collapse-O-Matic. В скрытом контенте можно размещать не только простой текст, но и изображения, ссылки, списки, да и все, что душе угодно.
**************************
Как реализовать выпадающий текст плагином Collapse-O-Matic
Реализовать раскрывающийся текст очень просто. Необходимо заключить скрытый текст в специальный шорткод, вот так:
Справа от вашего открытого текста стоит стрелка вниз. Если пользователь кликнет по не или по тексту, появляется раскрывается скрытый текст. Если кликнуть повторно, выпадающий текст снова скроется под кат.
У нас в примере у шорткода установлен один параметр «title», который содержит текст ссылки, т.е. открытого текста, при клике на которую будет открываться скрытый текст. Однако у плагина намного больше возможностей. Плагин имет много разных дополнительных опций по настройке функционала и внешнего вида. С помощью этих параметров можно изменять рамку блока, задавать стиль оформления элементов, показывать или не показывать стрелку перед открытым текстом и другое. Прочитать обо всех параметрах можно в документации плагина. Но некоторые из опций уже присутствуют в настройках плагина в адм. панели WordPress.
Настройки плагина Collapse-O-Matic
В настройках плагина можно установить:
Style — светлый или темный фон, если выбрать «none»- можно установить свой цвет; Tag Attribute — тег для оборачивания открытого текста, по умолчанию — «span»; Trigclass Attribute — возможность установить класс CSS для открытого текста; Targtag — тег для оборачивания контейнера с выпадающим текстом Targclass Attribute — прописать класс для блока выпадающего текста; Collapse/Expand Duration — скорость, с которой появляется выпадающий текст; Animation Effect — анимационный эффект появления скрытого текста; No Title — не показывать ссылку (открытый текст), будет только стрелка Initial Pause — установить паузу перед открытием выпадающего текста в миллисекундах Custom Style — прописать собственные CSS стили Ну и еще пара-тройка опций. В общем настроек не так много, но вполне достаточно, чтобы красиво оформить блок с раскрывающимся текстом. Если необходимо больше возможностей — обратитесь к документации на странице плагина.
Видео по установке и настройке плагина:
Конечно есть множество других плагинов выпадающего текста, плагинов — спойлеров и тому подобное. Можно реализовать данную функцию и без плагина. Но лично мое мнение, что плагин Collapse-O-Matic — самый простой и удобный для этой цели, особенно для начинающих пользователей WordPress.
Читайте материал еще об одном очень полезном плагине Table of Contents Plus для вставки содержания статьи.
Надеюсь, что статья была для Вас полезной. Удачи!
выпадающих списков · Bootstrap
Переключение контекстных наложений для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью прилагаемого плагина JavaScript с раскрывающимся списком Bootstrap. Они переключаются щелчком, а не наведением курсора; это преднамеренное дизайнерское решение.
Раскрывающиеся списки основаны на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте
bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js. Popper.js не используется для позиционирования раскрывающихся списков на панелях навигации, поскольку динамическое позиционирование не требуется.
Если вы создаете наш JavaScript из исходного кода, для этого требуется util.js .
Доступность
Стандарт WAI ARIA определяет фактический виджет role="menu" , но это относится к меню, похожему на приложение, которое запускает действия или функции.
Меню ARIA могут содержать только элементы меню, элементы меню флажков, элементы меню переключателей, группы переключателей и подменю. С другой стороны, раскрывающиеся списки Bootstrap
предназначены для использования в различных ситуациях и структурах разметки. Например, можно создавать раскрывающиеся списки, которые содержат дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни одного из роли и aria- атрибуты, необходимые для настоящих меню
ARIA . Авторы должны будут сами включать эти более конкретные атрибуты.
Тем не менее, Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC .
Примеры
Оберните переключатель раскрывающегося списка (ваша кнопка или ссылка) и раскрывающееся меню в пределах .dropdown или другой элемент, объявляющий
position: relative; . Выпадающие списки могут быть вызваны из или
Самое приятное то, что вы можете сделать это с любым вариантом кнопки:
<дел>
Кнопка разделения
Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками практически с той же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением . dropdown-toggle-split для правильного интервала вокруг выпадающего курсора.
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный отступ по обе стороны от каретки на 25% и удалить
margin-left , добавленный для обычных раскрывающихся списков кнопок. Эти дополнительные изменения сохраняют курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.
<дел>
Размер
Раскрывающиеся списки кнопок работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные раскрывающиеся списки.
По умолчанию выпадающее меню автоматически позиционируется на 100% сверху и слева от родительского элемента. Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.
Внимание! Выпадающие списки позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в панели навигации).
<дел>
Адаптивное выравнивание
Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static" и используйте адаптивные классы вариантов.
Чтобы выровнять право раскрывающееся меню с заданной точкой останова или больше, добавьте . dropdown-menu{-sm|-md|-lg|-xl}-right .
<дел>
Чтобы выровнять по левому краю раскрывающееся меню с заданной точкой останова или выше, добавьте .dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left .
<дел>
Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к раскрывающимся кнопкам на панели навигации, поскольку Popper. js не используется в панели навигации.
Содержание меню
Добавить заголовок для маркировки разделов действий в любом раскрывающемся меню.
Поместите любой текст произвольной формы в раскрывающееся меню с текстом и используйте утилиты интервалов. Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
<дел>
<р>
Некоторый пример текста, который свободно течет в раскрывающемся меню.
<р>
А это больше примерный текст.
Формы
Поместите форму в выпадающее меню или сделайте ее выпадающим меню и используйте утилиты полей или отступов, чтобы дать ей необходимое пустое пространство.
Используйте смещение данных или ссылка на данные , чтобы изменить расположение раскрывающегося списка.
<дел>
<дел>
Использование
С помощью атрибутов данных или JavaScript подключаемый модуль раскрывающегося списка переключает скрытый контент (выпадающие меню), переключая класс . show в элементе родительского списка. Атрибут data-toggle="dropdown" используется для закрытия выпадающих меню на уровне приложения, поэтому рекомендуется всегда использовать его.
На сенсорных устройствах открытие раскрывающегося списка добавляет пустые ( $.noop ) обработчики mouseover к непосредственным дочерним элементам <тело> элемент. Этот, по общему признанию, уродливый хак необходим, чтобы обойти причуду в делегировании событий iOS, которая в противном случае не позволяла бы касанию в любом месте за пределами раскрывающегося списка запускать код, который закрывает раскрывающийся список. После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover удаляются.
Через атрибуты данных
Добавьте data-toggle="dropdown" к ссылке или кнопке для переключения раскрывающегося списка.
<дел>
Через JavaScript
Вызов раскрывающихся списков через JavaScript:
$('.dropdown-toggle').dropdown()
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, например data-offset="" .
Имя
Тип
По умолчанию
Описание
смещение
номер | строка | функция
0
Смещение раскрывающегося списка относительно его цели.
Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с той же структурой. Узел триггерного элемента DOM передается в качестве второго аргумента.
Для получения дополнительной информации см. документацию по смещению Popper.js.
флип
логическое значение
правда
Разрешить раскрывающийся список в случае наложения на элемент ссылки. Для получения дополнительной информации обратитесь к флип-документам Popper.js.
граница
строка | элемент
‘родительский прокрутки’
Граница ограничения переполнения раскрывающегося меню. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылка на HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.
номер по каталогу
строка | элемент
‘переключить’
Справочный элемент выпадающего меню. Принимает значения 'toggle' , 'parent' или ссылку HTMLElement. Для получения дополнительной информации обратитесь к документации ReferenceObject Popper.js.
дисплей
строка
‘динамический’
По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью static .
Обратите внимание, что когда для border задано любое значение, отличное от 'scrollParent' , стиль position: static применяется к контейнеру .dropdown .
Методы
Метод
Описание
$(). выпадающий список («переключить»)
Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
$(). раскрывающийся список («показать»)
Показывает раскрывающееся меню данной панели навигации или навигации с вкладками.
$(). раскрывающийся список («скрыть»)
Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками.
$(). раскрывающийся список («обновление»)
Обновляет положение раскрывающегося списка элемента.
Уничтожает раскрывающийся список элемента.
События
Все события раскрывающегося списка запускаются в родительском элементе .dropdown-menu и имеют свойство relatedTarget , значением которого является переключаемый элемент привязки. hide.bs.dropdown и События hidden.bs.dropdown имеют свойство clickEvent (только если исходным типом события является click ), которое содержит объект события для события щелчка.
Событие
Описание
show. bs.dropdown
: Это событие возникает немедленно при вызове метода экземпляра show.
показан.bs.раскрывающийся список
Это событие запускается, когда раскрывающийся список становится видимым для пользователя (будет ожидать завершения переходов CSS).
скрыть.bs.выпадающий
Это событие запускается сразу после вызова метода скрытия экземпляра.
скрытый.bs.выпадающий
Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
$('#myDropdown').on('show.bs.dropdown', функция () {
// сделай что-нибудь...
})
DropDown — FlutterFlow Docs
Виджет DropDown позволяет пользователю выбирать элементы из списка. Виджет DropDown показывает выбранный в данный момент элемент и открывает список параметров при нажатии на него.
Вы можете использовать виджет «Раскрывающийся список» для реализации одного выбора, например выбора языка, размера рубашки и т. д.
Раскрывающийся список
Добавление раскрывающегося списка в ваш проект
Чтобы добавить виджет раскрывающегося списка в ваш проект:
Просто перетащите виджет раскрывающегося списка с вкладки Элементы формы (на панели виджетов) или добавьте его непосредственно из дерева виджетов.
Виджет DropDown добавляет один параметр с именем Option 1 по умолчанию.
Изменение имени
Чтобы изменить имя параметра:
Выберите Раскрывающийся список в дереве виджетов или в области холста.
b13fb2402ba6ada9905ee0bd55">
Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Define Options .
Найдите свойство Вариант 1 и измените имя на Страна 1 .
Добавление или удаление параметра
Чтобы добавить или удалить параметр из раскрывающегося списка:
Выберите раскрывающийся список в дереве виджетов или в области холста.
Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Define Options .
Нажмите на текст Добавить опцию .
Введите имя в Вариант 2 Отправьте текст , чтобы отобразить имя параметра.
d07">
Чтобы удалить параметр, просто щелкните значок отмены (
), отображаемый в свойстве Имя параметра .
Отображение метки параметра
Выпадающий виджет позволяет отображать метку вместо фактического значения параметра. Добавляя метку параметра, вы можете получить простое/короткое имя или аббревиатуру (которую довольно легко сравнить и обработать в бэкенде) вместо сложного названия (например, Фолклендские острова (the) [Мальвинские острова]).
Например, в раскрывающемся списке «Страна» у вас могут быть разные Option Values для хранения в бэкэнде и Option Labels для отображения в раскрывающемся списке. Так же, как ниже:
Option Values
Option Labels
United States
Falkland Islands (the) [Malvinas]
Чтобы отобразить метку параметра:
Выберите виджет DropDown , перейдите на панель свойств и включите переключатель Добавить метки параметров .
Введите значение в Значения опций определения и Метки опций определения . Щелкните Добавить параметр (под Определить значения параметров ), чтобы добавить дополнительные значения и метки.
Для значений также необходимо установить тип данных . Например, если значения, которые вы собираетесь сохранить, представлены числами вроде 1,2,3, установите для них значение Integer .
Отображение метки параметра
Отображение параметров из данных Firestore
Возможно, вы используете Firstore для хранения данных вашего приложения в модели коллекции документов. Давайте посмотрим, как вы можете отобразить параметры раскрывающегося списка из данных Firestore.
1. Предварительные условия
Прежде чем мы получим данные из Firestore, убедитесь, что вы выполнили все указанные предварительные условия, чтобы иметь некоторые данные в Firestore.
Ознакомьтесь со структурированием базы данных Firebase.
Выполните все шаги в разделе «Настройка Firebase» для вашего проекта.
Создайте коллекцию под названием Todos .
Добавить поле (из списка типов полей), в котором хранятся несколько значений одного и того же типа данных. Например, поле элемента, содержащее имена элементов.
Добавить данные в коллекцию.
Виджет «Раскрывающийся список» показывает параметры только из поля, для которого тип поля установлен на «Список/массив» в Firestore.
Запись/документ в коллекции Todos должна выглядеть следующим образом:
2. Запрос отдельного документа
Запрос отдельного документа на странице помогает получить поле списка/массива, содержащее несколько значений.
Чтобы запросить один документ на странице:
Выберите страницу.
Щелкните вкладку Backend Query (в правой части экрана).
Установите тип запроса на набор запросов .
Прокрутите вниз, чтобы найти Коллекция и измените его на свою коллекцию.
Установите тип запроса на Отдельные документы .
Щелкните + Фильтр , чтобы найти точный документ/запись, которая имеет несколько значений.
Найдите имя поля и щелкните Unset и выберите поле, к которому вы хотите применить фильтр.
Найдите раскрывающееся меню Отношение , щелкните Снимите и выберите отношение из списка.
Найдите свойство Value и установите для него соответствующее значение.
Нажмите Сохранить .
3. Отображение значений в раскрывающемся списке
Чтобы отобразить несколько значений из поля в качестве параметров в раскрывающемся списке:
Выберите раскрывающийся список виджет в дереве виджетов.
Перейдите в редактор свойств и прокрутите вниз до раздела «Определить параметры».
Щелкните набор из переменной справа. (Откроется новая панель)
Найдите раскрывающийся список Источник , нажмите unset и выберите запись [коллекция] (из PageName) .
В разделе Доступные параметры щелкните Unset и выберите поле, содержащее несколько значений.
Щелкните Сохранить .
Вот как это выглядит при запуске вашего приложения:
Изменение свойств
Панель свойств можно использовать для настройки внешнего вида и поведения вашего виджета.
Добавить отступ
Вот инструкции по добавлению отступа.
Регулировка выравнивания
Вот инструкции по регулировке выравнивания.
Изменение выбора по умолчанию
При запуске приложения по умолчанию выбирается первый вариант. Вы можете изменить этот выбор, используя свойство Initial Option.
Чтобы изменить выбор по умолчанию:
Выберите DropDown из дерева виджетов или из области холста.
Перейдите в редактор свойств и прокрутите вниз до свойства Initial Option .
Введите имя параметра в свойстве Initial Option . Например, если ввести значение Страна 3 , будет выбран третий вариант в следующем визуальном элементе.
Изменение стиля текста раскрывающегося списка
Чтобы изменить стиль текста для параметров раскрывающегося списка:
Выберите DropDown в дереве виджетов или в области холста.
Перейдите в Редактор свойств (в правой части экрана) и прокрутите вниз до Стиль текста DropDown раздел.
Найдите раскрывающийся список Theme Text Style . Нажмите «Выпадающий список» и выберите любой шрифт из списка.
Нажмите кнопку под шрифтом Font Family . Выберите шрифт из списка. Если в списке нет нужного вам шрифта, вы можете найти его.
Найдите раскрывающийся список Толщина шрифта и выберите соответствующую толщину.
Чтобы изменить размер, введите значение в поле Размер шрифта свойство.
Теперь найдите свойство Text Color . Щелкните поле рядом с Unset , выберите цвет, а затем щелкните Use Selected Color или щелкните Unset и введите непосредственно шестнадцатеричный код. Вы также можете выбрать цвет, нажав кнопку «Палитра и простой».
Сделайте курсив, установив флажок Курсив .
Изменение размеров раскрывающегося списка
Чтобы изменить высоту и ширину:
Выберите раскрывающийся список из дерева виджетов или из области холста.
Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела DropDown Properties .
Найдите ширину и высоту .
Существует три способа установки размеров:
Для установки точный размер, выберите PX и введите нужные значения.
Чтобы установить размеры как % размера экрана , выберите % и введите желаемое значение.
Чтобы высота или ширина раскрывающегося списка соответствовала высоте или ширине экрана , просто щелкните значок бесконечности (
).
Добавление поля
Добавление поля добавляет пробел между текстом раскрывающегося списка и границей.
Чтобы добавить поле:
Выберите раскрывающийся список в дереве виджетов или в области холста.
Перейдите в Редактор свойств (в правой части экрана) и прокрутите вниз до раздела раскрывающегося списка свойств.
Найдите свойство Margin и измените значения.
Изменение цвета фона раскрывающегося списка
Чтобы изменить цвет фона раскрывающегося списка:
Выберите раскрывающийся список из дерева виджетов или из области холста.
Перейдите в Редактор свойств (в правой части экрана) и прокрутите вниз до раздела DropDown Style .
Найдите свойство Цвет заливки , установите флажок рядом с Белый , выберите цвет и нажмите Использовать выбранный цвет. O r щелкните Белый и введите непосредственно шестнадцатеричный код. Вы также можете выбрать цвет, нажав кнопку «Палитра и простой».
Добавление рамки
Вот пример того, как можно добавить рамку вокруг раскрывающегося списка:
Выберите раскрывающийся список из дерева виджетов или из области холста.
Перейдите в Редактор свойств (в правой части экрана) и прокрутите вниз до раздела DropDown Style .
Вот дальнейшие инструкции по добавлению рамки.
Скрытие подчеркивания
Чтобы скрыть подчеркивание под текстом параметров раскрывающегося списка:
Выберите раскрывающийся список в дереве виджетов или в области холста.
Перейдите в Редактор свойств (в правой части экрана) и прокрутите вниз до раздела DropDown Style .
Отметьте галочкой свойство Hides Underline (нажмите на него).
Изменение значка раскрывающегося списка
Чтобы изменить значок стрелки по умолчанию:
Выберите раскрывающийся список в дереве виджетов или в области холста.
Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Icon .
Нажмите кнопку None , затем найдите и выберите имя значка с arrow_down_drop_circle .
Установите для свойства Размер значка значение 22.
Чтобы изменить цвет, щелкните поле рядом с Снять , выберите цвет и нажмите Использовать выбранный цвет. Или нажмите Unset и введите напрямую шестнадцатеричный код. Вы также можете выбрать цвет, нажав кнопку «Палитра и простой».
Установить цвет динамически
Посмотрите, как установить цвет из переменной в любое цветовое свойство этого виджета.