Раскрывающийся текст при клике: html — Раскрывающиеся блоки с скрытым содержанием

BBSpoiler — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

С помощью данного плагина можно спрятать часть текста вашей записи в красиво оформленный контейнер, раскрывающийся при клике на него. Плагин полезен при создании FAQ страниц, для скрытия объемных картинок и тому подобных вещей.

Плагин создает свою собственную кнопку «Spoiler» в визуальном редакторе, но вы можете вставлять спойлеры напрямую, через вставку тегов. Например:

[spoiler title='Title']Spoiler content[/spoiler]

или

[spoiler title='Title' collapse_link='no']Spoiler content[/spoiler]

Если вам понравился мой плагин, то пожалуйста поставьте ему 5 звезд.

• Кнопка «Spoiler» и диалоговое окно плагина.
• Пример спойлера.
• Пример спойлера с картинками.
• Дочерние спойлеры в родительском спойлере.
• Спойлер в теме bbPress.
• Все цветовые стили.

1. Скопируйте папку плагина bbspoiler в /wp-content/plugins/.
2. Активируйте плагин через меню Плагины.
3. Это все.

Кнопку плагина «Spoiler» вы найдете в визуальном редакторе.

Как правильно вставлять параграфы в тексте спойлера?

Данный код спойлера выведет 3 параграфа текста:

[spoiler title='Title' collapse_link='true']First Paragraph
Second Paragraph
Third Paragraph[/spoiler]

Можно ли использовать вложенные спойлеры?

Да, но не больше 2 уровней. Используйте в названии шорткода
цифру 2, код должен выглядеть так:

[spoiler title='Parent']
[spoiler2 title='Child 1']text[/spoiler2]
[spoiler2 title='Child 2']text[/spoiler2]
[/spoiler]

Плагин поддерживает локализацию?

Да, для перевода используйте translate.wordpress.org.

It was a problematic weak point found in BBSpoiler Plugin to 2. 01 on WordPress (WordPress Plugin). Which affects an unknown function of the Shortcode Handler component. Manipulation of an unknown input leads to a vulnerability class cross site scripting weak point. The weak point is published on 20/04/2023 (not defined). The advisory is available for download at wordfence dot com. This vulnerability is treated as CVE-2023-23873. There are no technical details still an exploit known. There is no known information on measures. The use of an alternative product is useful.

все отлично работает! Проверял на версии 6.2

Этот плагин использую в своем проекте. Для бесплатного плагина функционал очень хороший. Пользуюсь пока только созданием простейших спойлеров одного цвета. Большое спасибо разработчикам! I use this plugin in my project. For a free plugin, the functionality is very good. So far, I use only the creation of the simplest spoilers of the same color. Many thanks to the developers!

Спасибо

Простой легкий плагин без лишних наворотов

«BBSpoiler» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

• Flector

«BBSpoiler» переведён на 8 языков. Благодарим переводчиков за их работу.

Перевести «BBSpoiler» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

2.01

• исправлена ошибка «ReferenceError».
• в этой версии были удалены языковые файлы из дистрибутива плагина (теперь переводы будут автоматически загружаться с сайта translate.wordpress.org)

2.00

• добавлены 10 цветовых стилей.

1.01

• добавлена поддержка bbPress

1.00

• первая версия

Мета

• Версия: 2.01
• Обновление: 9 месяцев назад
• Активных установок: 6 000+
• Версия WordPress: 3.9 или выше
• Совместим вплоть до: 6.1.3
• Языки:

  English (US), German, Italian, Russian, Spanish (Mexico), Spanish (Spain), Spanish (Venezuela), Swedish и Ukrainian.

  Перевести на ваш язык

• Метки:

  Boxboxescollapseexpandhide

• Дополнительно

Оценки

• 5 звёзд 27
• 4 звезды 0
• 3 звезды 0
• 2 звезды 0
• 1 звезда 2

Войдите, чтобы оставить отзыв.

Участники

• Flector

Поддержка

Решено проблем за последние 2 месяца:

0 из 1

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Сворачивание и разворачивание частей документа

Word для Microsoft 365 Word для Интернета Word 2021 Word 2019 Word 2016 Word 2013 Еще…Меньше

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

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

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

Совет: Если вы работаете на сенсорном устройстве, коснитесь его, чтобы разместить курсор в заголовке, чтобы увидеть треугольник.

Щелкните треугольник еще раз, чтобы развернуть эту часть документа.

Чтобы свернуть или развернуть все заголовки в документе, щелкните заголовок правой кнопкой мыши и выберите развернуть или свернуть > Развернуть все заголовки или Свернуть все заголовки.

Когда вы закрываете и повторно открываете документ, заголовки будут по умолчанию расширены. Если вы хотите, чтобы документ открывался со свернутными заголовками, выполните указанные здесь действия.

1. org/ListItem»>

   Поместите курсор в заголовок.

2. На вкладке Главная щелкните стрелку в группе Абзац.

3. В диалоговом окне Абзац по умолчанию щелкните поле Свернуто.

4. Нажмите кнопку ОК.

Работая над длинным, сложным документом в классическом приложении Word, можно свернуть все части, кроме той, на которой вы хотите сосредоточиться.

Если у вас есть классическое приложение Word, вы можете открыть документ в нем, нажав кнопку Открыть в Word. Так вы сможете сворачивать и разворачивать разделы. Однако при просмотре документа в Word в Интернете свернутые разделы будут разворачиваться.

Открыв документ в Word, сверните или разверните его части. Затем нажмите CTRL+S, чтобы сохранить документ в исходном расположении.

Jetpack Compose: DropDown Menu

Введение

Мобильные приложения имеют ограниченное пространство для отображения контента на экране. Компонент, который помогает нам сэкономить место и показать список опций для выбора, — это выпадающее меню. Библиотека «Материал 3» содержит несколько реализаций выпадающего меню. Кроме того, каскадная библиотека упрощает создание вложенных всплывающих меню в Jetpack Compose.

В этой статье мы рассмотрим:

• Разница между DropdownMenu и ExposedDropdownMenuBox
• Возможности «каскадной» библиотеки
• Как настроить компоненты выпадающего меню
• Как взаимодействовать с DropdownMenu , ExposedDropdownMenu Box и CascadeDropdownMenu в тестах пользовательского интерфейса.

Содержание этой статьи основано на зависимостях следующих версий:

• androidx.compose.material3:material3:1.0.1 (спецификация: 2023.01.00)
• me.saket.cascade:cascade-compose: 2.0.0-rc01

💡

Существует несколько реализаций выпадающего меню в Jetpack Compose, и все они являются частью пакета «androidx.compose.material3»:

• DropdownMenu представляет собой всплывающее окно с несколькими вариантами выбора и будет использовать позицию родителя для отображения на экране.
• ExposedDropdownMenuBox отображает выбранный элемент и расширяемый список параметров.

Если мы хотим создать вложенное выпадающее меню, мы можем использовать библиотеку «каскад», которая позволяет нам создать CascadeDropdownMenu . В качестве альтернативы, пользовательская вложенная реализация «DropdownMenu» может быть выполнена на основе Компонент DropdownMenu .

Давайте создадим составную функцию с меню «Дополнительно». DropDownMenu появится, когда мы нажмем значок меню «Дополнительно». Каждый компонент DropdownMenu может иметь несколько параметров DropdownMenuItem .

Давайте реализуем DropDownMenu с опциями «Загрузить» и «Сохранить».

 @Составной
весело Demo_DropDownMenu() {
    val контекст = LocalContext.current
    var расширен запоминанием { mutableStateOf(false) }
    Коробка(
        модификатор = Модификатор.fillMaxWidth()
            .wrapContentSize(Выравнивание.Верхний конец)
    ) {
        IconButton(onClick = {расширенный = !расширенный}) {
            Икона(
                вектор изображения = Icons.Default.MoreVert,
                contentDescription = "Еще"
            )
        }
        Выпадающее меню(
            расширенный = расширенный,
            onDismissRequest = {расширенный = ложь}
        ) {
            Элемент выпадающего меню (
                текст = {Текст("Загрузить")},
                onClick = { Toast. makeText(контекст, "Загрузить", Toast.LENGTH_SHORT).show() }
            )
            Элемент выпадающего меню (
                текст = {Текст("Сохранить")},
                onClick = { Toast.makeText(контекст, "Сохранить", Toast.LENGTH_SHORT).show() }
            )
        }
    }
}
 

Составляемая функция DropdownMenu содержит содержимое : параметр @Composable ColumnScope.() -> Unit , который позволяет нам добавлять любой составной код во всплывающее окно. Это означает, что мы можем добавить не только DropdownMenuItem , но и легко добавить разделители между элементами.

 Выпадающее меню(...) {
    Элемент выпадающего меню (...)
    Делитель()
    Элемент выпадающего меню (...)
}
 

В дополнение к этому, составная функция DropdownMenuItem имеет включено: Boolean = true , и это позволяет нам отключать любые элементы.

💡

Давайте посмотрим на положение DropDownMenu , когда родительский макет использует различные параметры выравнивания .

Дополнительную информацию о настройке DropDownMenuItem можно найти в следующей главе.

⚠️

 @Составной
весело Demo_ExposedDropdownMenuBox() {
    val контекст = LocalContext.current
    val coffeeDrinks = arrayOf("Американо", "Капучино", "Эспрессо", "Латте", "Мокко")
    var расширен запоминанием { mutableStateOf(false) }
    var selectedText по помните { mutableStateOf (coffeeDrinks [0]) }
    Коробка(
        модификатор = модификатор
            . fillMaxWidth ()
            .padding(32.dp)
    ) {
        ExposedDropdownMenuBox(
            расширенный = расширенный,
            onExpandedChange = {
                расширенный = !расширенный
            }
        ) {
            Текстовое поле(
                значение = выбранный текст,
                onValueChange = {},
                Только для чтения = Истина,
                trailingIcon = {ExposedDropdownMenuDefaults.TrailingIcon(расширенный = расширенный)},
                модификатор = Модификатор.menuAnchor()
            )
            Открытое выпадающее меню (
                расширенный = расширенный,
                onDismissRequest = {расширенный = ложь}
            ) {
                coffeeDrinks.forEach { пункт ->
                    Элемент выпадающего меню (
                        текст = {Текст (текст = элемент)},
                        по клику = {
                            выбранный текст = элемент
                            расширенный = ложный
                            Toast. makeText(контекст, элемент, Toast.LENGTH_SHORT).show()
                        }
                    )
                }
            }
        }
    }
}
 

 зависимости {
    ...
    // Вид
    реализация "me.saket.cascade:cascade:2.0.0-rc01"
    // Составление реактивного ранца
    реализация "me.saket.cascade:cascade-compose:2.0.0-rc01"
}
 

 @Составной
весело Demo_CascadeDropdownMenu() {
    val контекст = LocalContext.current
    var расширен запоминанием { mutableStateOf(false) }
    Строительные леса(
        верхняя панель = {
            TopAppBar(
                название = {},
                действия = {
                    IconButton(onClick = {расширенный = !расширенный}) {
                        Икона(
                            вектор изображения = Icons. Default.MoreVert,
                            contentDescription = "Дополнительное меню"
                        )
                    }
                }
            )
        }
    ) { значения заполнения ->
        Коробка(
            модификатор = модификатор
                .fillMaxWidth ()
                .padding(paddingValues)
                .wrapContentSize(Выравнивание.Верхний конец)
        ) {
            Каскадное выпадающее меню (
                расширенный = расширенный,
                onDismissRequest = {расширенный = ложь}
            ) {
                Элемент выпадающего меню (
                    текст = { Текст (текст = "1. Элемент") },
                    дети = {
                        Элемент выпадающего меню (
                            text = { Text(text = "1.1. Подэлемент") },
                            по клику = {
                                расширенный = ложный
                                Toast.makeText(context, "1.1. Подпункт", Toast.LENGTH_SHORT). show()
                            }
                        )
                    }
                )
                Элемент выпадающего меню (
                    текст = { Текст (текст = "2. Элемент") },
                    дети = {
                        Элемент выпадающего меню (
                            text = { Text(text = "2.1. Подэлемент") },
                            по клику = {
                                расширенный = ложный
                                Toast.makeText(context, "2.1. Подэлемент", Toast.LENGTH_SHORT).show()
                            }
                        )
                        Элемент выпадающего меню (
                            text = { Text(text = "2.2. Подэлемент") },
                            дети = {
                                Элемент выпадающего меню (
                                    text = { Text(text = "2.2.1. Подпункт") },
                                    по клику = {
                                        расширенный = ложный
                                        Toast. makeText(context, "2.2.1. Под-подэлемент", Toast.LENGTH_SHORT).show()
                                    }
                                )
                            }
                        )
                    }
                )
            }
        }
    }
}
 

 Элемент раскрывающегося меню(
    ...
    ведущий значок = {
        Икона(
            вектор изображения = Иконки.По умолчанию.Изображение,
            содержание Описание = ...
        )
    },
    трейлингИкон = {
        Икона(
            вектор изображения = Icons.Default.MoreVert,
            содержание Описание = ...
        )
    }
)
 

 @Неизменяемый
внутренний конструктор класса MenuItemColors(
    частный val textColor: Цвет,
    частный вал ведущийIconColor: Цвет,
    частный val trailingIconColor: цвет,
    частный val disabledTextColor: цвет,
    private val disabledLeadingIconColor: Color,
    private val disabledTrailingIconColor: Color,
) {. ..}
 

 @Составной
весело Demo_ExposedDropdownMenuBox_SelectionStyling() {
    val контекст = LocalContext.current
    val coffeeDrinks = arrayOf("Американо", "Капучино", "Эспрессо", "Латте", "Мокко")
    var расширен запоминанием { mutableStateOf(false) }
    var selectedItemIndex, помните { mutableStateOf (0) }
    ExposedDropdownMenuBox(
        расширенный = расширенный,
        onExpandedChange = {расширенный = !расширенный},
        модификатор = Modifier.padding(16.dp),
    ) {
        Текстовое поле(
            значение = coffeeDrinks[selectedItemIndex],
            onValueChange = {},
            Только для чтения = Истина,
            trailingIcon = {ExposedDropdownMenuDefaults.TrailingIcon(расширенный = расширенный)},
            модификатор = Модификатор. menuAnchor()
        )
        Открытое выпадающее меню (
            расширенный = расширенный,
            onDismissRequest = {расширенный = ложь}
        ) {
            coffeeDrinks.forEachIndexed { индекс, элемент ->
                Элемент выпадающего меню (
                    текст = {
                        Текст(
                            текст = элемент,
                            fontWeight = if (index == selectedItemIndex) FontWeight.Bold иначе null
                        )
                    },
                    по клику = {
                        выбранныйItemIndex = индекс
                        расширенный = ложный
                        Toast.makeText(контекст, элемент, Toast.LENGTH_SHORT).show()
                    }
                )
            }
        }
    }
}
 

 Выпадающее меню(
    расширенный = расширенный,
    onDismissRequest = {расширенный = ложь},
    смещение = DpOffset (x = 20.dp, y = 40.dp)
) {
    ...
}
 

 @Неизменный
конструктор класса PopupProperties @ExperimentalComposeUiApi(
    val фокусируемое: Boolean = false,
    val увольнениеOnBackPress: Boolean = истина,
    val отклонитьOnClickOutside: Boolean = true,
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    val excludeFromSystemGesture: Boolean = true,
    val clippingEnabled: Boolean = true,
    val usePlatformDefaultWidth: Boolean = false
)
 

 @Неизменный
внутренний конструктор класса MenuItemColors(
    частный val textColor: Цвет,
    частный вал ведущийIconColor: Цвет,
    частный val trailingIconColor: цвет,
    частный val disabledTextColor: цвет,
    private val disabledLeadingIconColor: Color,
    private val disabledTrailingIconColor: Color,
) {...}
 

 @Составной
весело Demo_SearchableExposedDropdownMenuBox() {
    val контекст = LocalContext.current
    val coffeeDrinks = arrayOf("Американо", "Капучино", "Эспрессо", "Латте", "Мокко")
    var расширен запоминанием { mutableStateOf(false) }
    var selectedText по помните { mutableStateOf ("") }
    Коробка(
        модификатор = модификатор
            .fillMaxWidth ()
            .padding(32.dp)
    ) {
        ExposedDropdownMenuBox(
            расширенный = расширенный,
            onExpandedChange = {
                расширенный = !расширенный
            }
        ) {
            Текстовое поле(
                значение = выбранный текст,
                onValueChange = { selectedText = оно },
                label = { Text(text = "Начните вводить название кофе") },
                trailingIcon = {ExposedDropdownMenuDefaults. TrailingIcon(расширенный = расширенный)},
                модификатор = Модификатор.menuAnchor()
            )
            val filteredOptions =
                coffeeDrinks.filter { it.contains (selectedText, ignoreCase = true)}
            если (filteredOptions.isNotEmpty()) {
                Открытое выпадающее меню (
                    расширенный = расширенный,
                    onDismissRequest = {
                        // Мы не должны скрывать меню, когда пользователь вводит/удаляет любой символ
                    }
                ) {
                    filteredOptions.forEach {элемент ->
                        Элемент выпадающего меню (
                            текст = {Текст (текст = элемент)},
                            по клику = {
                                выбранный текст = элемент
                                расширенный = ложный
                                Toast.makeText(контекст, элемент, Toast.LENGTH_SHORT).show()
                            }
                        )
                    }
                }
            }
        }
    }
}
 

 // Печать объединенного дерева узлов со всеми узлами
// Используйте параметр для печати объединенного или неслитного дерева
onRoot (useUnmergedTree = false)
    .printToLog("ОБЪЕДИНЕНО")
// Печать узла для определенного узла
на узле (keyIsDefined (SemanticsProperties.IsPopup))
    .printToLog ("Всплывающее окно")
 

 onNodeWithContentDescription («Дополнительное меню»)
        .performClick()
 

 onNode(hasText("Сохранить"))
    . assertIsDisplayed()
 

 onNode(hasText("Сохранить").and(hasAnyAncestor(keyIsDefined(SemanticsProperties.IsPopup))))
    .assertIsDisplayed()
 

 onNode(hasText("Load").and(hasAnyAncestor(keyIsDefined(SemanticsProperties.IsPopup))))
    .assertIsNotEnabled()
 

 onNodeWithContentDescription("Dropdown menu")
    .performClick()
 

 onAllNodes(hasContentDescription("Выпадающее меню"))[0]
    .performClick()
 

 onNode(hasText("Цельсий (°C)"))
    . performClick()
 

Если у вас есть компонент ExposedDropdownMenuBox с возможностью поиска, мы можем ввести определенный текст в TextField :

 onNode(hasText("Speed"))
    .performTextInput("Километр")
 

Следующим шагом является проверка наличия у компонента определенной опции:

 onNode(hasText("Километр/час").and(hasAnyAncestor(keyIsDefined(SemanticsProperties.IsPopup))))
    .assertIsDisplayed()
 

Чтобы закрыть всплывающее окно, мы можем эмулировать нажатие кнопки «назад». Если вы используете фреймворк Espresso, мы можем использовать Espresso.back() .

Когда мы хотим открыть компоненты CascadeDropdownMenu , нам обычно нужно щелкнуть значок.

Рассмотрим следующие случаи:

1. Щелкните значок «Вложенное меню».
2. Проверить доступные параметры.
3. Взаимодействие с опциями.

Чтобы щелкнуть значок с описанием содержимого «Вложенное меню», мы можем использовать следующий код:

 onNodeWithContentDescription("Вложенное меню")
        . performClick()
 

Следующим шагом является проверка того, что компонент отображается во всплывающем окне:

 onNode(hasText("1. Item").and(hasAnyAncestor(keyIsDefined(SemanticsProperties.IsPopup))))
    .assertIsDisplayed()
 

Для навигации по вложенному меню мы нажмем на узел с определенным текстом.

 onNode(hasText("1. Item").and(hasAnyAncestor(keyIsDefined(SemanticsProperties.IsPopup))))
    .performClick()
 

Чтобы закрыть всплывающее окно, мы можем эмулировать нажатие кнопки «назад». Если вы используете фреймворк Espresso, мы можем использовать Espresso.back() .

Заключение

В библиотеке «Материал 3» доступно несколько реализаций выпадающих меню:

• DropdownMenu представляет собой всплывающее окно с пунктами меню.
• ExposedDropdownMenuBox представляет расширяемый список параметров.

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

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

Раскрывающийся список — Система углеродного дизайна

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

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

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

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

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

 
 
 
 
 <Раскрывающийся список 
 
 ariaLabel="Dropdown" 
 
 id="carbon-dropdown-example" 
 
 items={items} 
 
 label="Параметры выпадающего меню" 
 
 titleText="Dropdown title" 
 
 /> 
 9000 4  
 

Раскрывающийся список

sm

md

lg

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

1. Ярлыки: Текст, информирующий пользователя о том, чего ожидать в раскрывающемся списке параметры.
2. Вспомогательный текст: Вспомогательный текст, помогающий пользователю сделать правильный выбор.
3. Поле: Сохраняется при открытии или закрытии раскрывающегося списка.
4. Опция: Выбор для пользователя, показанный с другими вариантами в меню.
5. Меню: Список опций на выбор, отображаемый в открытом состоянии. от.

Существует два стиля выпадающего ввода: по умолчанию и гибкий. Они разделяют одно и то же функциональность, но выглядят визуально по-разному, влияя на то, где их использовать.

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

Введенный стиль по умолчанию отображается слева, а плавный стиль — справа.

Высота ввода по умолчанию

Существует три размера высоты раскрывающегося списка по умолчанию: маленький, средний и большой. Поддержка трех разных размеров раскрывающегося списка дает вам больше гибкости при структурирование макетов. Однако используйте одинаковый размер для всех компонентов формы на та же страница. Например, если вы используете раскрывающийся список среднего размера, также используйте ввод текста одинакового размера, кнопки и т. д. Если вы сомневаетесь, используйте среду по умолчанию размер высота.

Размер по умолчанию	Высота (пкс/бэр)	Вариант использования
Маленький (см)	Используйте при ограниченном пространстве или при размещении раскрывающегося списка в форме. это долго и сложно.
Средний (md)	40 / 2,5	Это размер по умолчанию и наиболее часто используемый размер. Если вы сомневаетесь, используйте средний размер.
Большой (lg)	48 / 3	Выбирайте этот размер, когда есть много места для работы. Этот размер обычно используется в простых формах или когда раскрывающийся список размещается на странице сам по себе, например, в качестве фильтра.

Когда меню открыто, каждая опция в меню должна иметь ту же высоту, что и поле.

Высоты ввода жидкости

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

Размер жидкости	Высота (пкс/бэр)	Вариант использования
По умолчанию	64 / 4	Использовать при наличии меньше вариантов меню в выразительные моменты.
Сжатый	40 / 2,5	Используйте, когда имеется много пунктов меню, чтобы можно было просмотреть больше сразу без прокрутки.

Ширина

Для раскрывающегося списка нет минимальной или максимальной ширины. Ширина может быть настроена соответственно своему контексту.

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

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

Не вешайте раскрывающиеся списки стиля по умолчанию в желоба сетки.

Устанавливайте компоненты жидкости заподлицо друг с другом без промежутков между ними.

Не используйте компоненты жидкости с вертикальным или горизонтальным расстоянием между ними.

Основные элементы

Ярлыки

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

Вспомогательный текст

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

Текст заполнителя поля

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

Опции в меню

• Кратко опишите раскрывающийся список в одной строке текста.
• Никогда не используйте декоративные изображения или значки в раскрывающемся списке.
• Рекомендуем расположить опции в алфавитном порядке.

Все поля в форме считаются обязательными, а необязательные поля отмечены тегами. Для дополнительную информацию см. использование компонента формы руководство.

Содержимое переполнения

Избегайте многострочного текста в раскрывающемся списке. Если текст слишком длинный для одну строку, добавьте многоточие (…) для переполнения содержимого и сопроводите всплывающая подсказка в браузере для отображения полной строки текста.

Для получения дополнительной информации см. рекомендации по содержанию.

Поведения, перечисленные в этом разделе, являются универсальными для всех вариантов. Чтобы узнать о поведении, уникальном для каждого варианта, см. разделы ниже.

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

Выпадающее меню имеет стиль box-shadow , который расположен за меню когда открыто, чтобы придать меню более высокий уровень, чем содержание, которое может отстать от него. Box-shadow также используется в других компонентах, которые имеют наложенные меню, такие как дополнительное меню и календарь выбора даты. СКСС для box-shadow 0 2px 6px 0 rgba(0,0,0,.2) .

Полосы прокрутки не всегда могут быть включены, поэтому мы рекомендуем отображать 50% последних высота контейнера опции, чтобы указать, что в меню есть что посмотреть. Мы рекомендуем начать прокрутку с шестой опции в списке меню, но это может варьироваться в зависимости от вашего конкретного варианта использования.

Раскрывающиеся списки, поля со списком и мультиселекторы имеют ряд состояний как для их поля и меню: включено , наведение , фокус , ошибка , предупреждение , отключено , скелет и только для чтения . Для получения дополнительной информации о штатах, посетить интерактивные состояния руководство на вкладке стилей.

Мышь

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

• Чтобы выбрать параметр, пользователь может щелкнуть в любом месте контейнера параметров.

• Чтобы удалить все выбранные параметры из списка в раскрывающемся списке с множественным выбором , нажмите значок «х» рядом со значением внутри тега.

• Чтобы очистить выбранное значение в поле со списком или раскрывающемся списке с возможностью фильтрации, нажмите кнопку Значок «х» справа от поля ввода текста.

Клавиатура

Раскрывающийся список:

• Поле раскрывающегося списка — это элемент, который получает фокус. Вся клавиатура взаимодействия происходят из этого элемента.
• Пользователи могут переместить выделенную опцию на следующую опцию, нажав кнопку Стрелка вниз .
• Пользователи могут переместить выделенную опцию на предыдущую, нажав кнопку Стрелка вверх .
• Пользователи могут открыть раскрывающееся меню, нажав Пробел , Ввод , Стрелка вниз или Стрелка вверх .
• Пользователи могут закрыть раскрывающееся меню, нажав Escape , Пробел или Enter .

Поле со списком:

• При вводе символа фокус остается на поле, а параметр в меню выделено то, что лучше всего соответствует введенному символу.
• При быстром вводе нескольких символов фокус остается на поле в то время как опция в меню выделена, которая лучше всего соответствует строке набраны символы.

Множественный выбор:

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

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

• По умолчанию раскрывающийся список отображает замещающий текст в поле, когда он закрыт.
• При нажатии на закрытое поле открывается меню параметров.

• Выбор параметра в меню закрывает его и текст выбранного параметра заменяет текст-заполнитель в поле, а также остается в качестве опции в место, если меню открыто.

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

Выполнение выбора

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

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

Очистить все

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

Фильтрация

Используйте фильтрацию, чтобы сузить длинный список параметров и найти нужный вариант. выбирать.

• По умолчанию в раскрывающемся списке с множественным выбором с возможностью фильтрации отображается текст-заполнитель в поле при закрытии.
• При наведении на поле появляется текстовый курсор.

• Меню открывается, если щелкнуть в любом месте поля, и вы можете начать печатать отфильтровать список вариантов. Варианты, которые начинают соответствовать вашей записи, остаются в списке, а другие существующие параметры временно удалены.
• После ввода текста в поле справа от поля появляется значок закрытия (x). текст в поле. Это очистит любой текст, который был введен в поле.

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

Позволяет пользователю сделать выбор из предопределенного списка опций. Обычно используется при наличии большого количества вариантов на выбор.

• По умолчанию поле со списком отображает замещающий текст в поле, когда оно закрыто.
• При наведении на поле появляется текстовый курсор.

• Меню открывается, если щелкнуть в любом месте поля, и вы можете начать вводить отсортировать список вариантов. Вариант, который лучше всего соответствует введенному символы выделены.
• После ввода текста в поле справа от поля появляется значок закрытия (x). текст в поле. Это очистит любой текст, который был введен в поле.

• Выбор параметра закрывает меню, а выбранный параметр заменяет текст-заполнитель.

Встроенный

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

Раскрывающийся список и выбор

Компоненты раскрывающегося списка и выбора имеют различия в функциональности и стиле.

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

Раскрывающийся список и поле со списком

Хотя раскрывающийся список и поле со списком выглядят одинаково, у них разные функции.