Html раскрывающийся список: Тег | htmlbook.ru

Раскрывающийся список | Dash for Python Documentation

dcc.Dropdown — это компонент для рендеринга расширяемого пользователем раскрывающегося списка.

Примеры

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

Дополнительные примеры минимальных приложений Dash, использующих dcc.Dropdown , перейдите к указателю примеров сообщества.

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

Чтобы создать базовый раскрывающийся список, укажите параметры и значения от до dcc.Dropdown в указанном порядке.

 из тире импортировать тире, dcc, html, ввод, вывод, обратный вызов
приложение = Тире (__имя__)
app.layout = html.Div([
    dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC',),
    html. Div(id='dd-выходной-контейнер')
])
@перезвонить(
    Вывод('дд-выходной-контейнер', 'дети'),
    Ввод («демо-раскрывающийся список», «значение»)
)
определение update_output (значение):
    return f'Вы выбрали {значение}'
если __name__ == '__main__':
    app.run(отладка=Истина)
 

Параметры и значение

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

 dcc.Dropdown(['Нью-Йорк', 'Монреаль', 'Сан-Франциско'], 'Монреаль')
 

 dcc.Dropdown(
   options=['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
   значение = 'Монреаль'
)
 

 dcc.Dropdown(
   варианты=[
       {'метка': 'Нью-Йорк', 'значение': 'Нью-Йорк'},
       {'метка': 'Монреаль', 'значение': 'Монреаль'},
       {'метка': 'Сан-Франциско', 'значение': 'Сан-Франциско'},
   ],
   значение = 'Монреаль'
)
 

 dcc. Dropdown(
   варианты={
        «Нью-Йорк»: «Нью-Йорк»,
        «Монреаль»: «Монреаль»,
        «Сан-Франциско»: «Сан-Франциско»
   },
   значение = 'Монреаль'
)
 

В этих примерах метка параметра (то, что видит пользователь) и значение (то, что передается в обратный вызов) эквивалентны. Часто полезно, чтобы они были отдельными, чтобы вы могли легко изменить метку, не изменяя логику обратного вызова, которая использует значение:

 dcc.Dropdown(
   варианты={
        «Нью-Йорк»: «Нью-Йорк»,
        «МТЛ»: «Монреаль»,
        «SF»: «Сан-Франциско»
   },
   значение = 'MTL'
)
 

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

 dcc.Dropdown(
   варианты=[
       {'ярлык': 'Нью-Йорк', 'значение': 'Нью-Йорк'},
       {'метка': 'Монреаль', 'значение': 'MTL'},
       {'метка': 'Сан-Франциско', 'значение': 'SF'},
   ],
   значение = 'MTL'
)
 

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

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

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

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
    ['Монреаль', 'Сан-Франциско'],
    мульти = Истина
)
 

Disable Search

Для свойства searchable установлено значение True по умолчанию для всех компонентов
dcc.Dropdown . Чтобы предотвратить поиск значения
в раскрывающемся списке, просто установите для свойства доступного для поиска значение False .
Попробуйте выполнить поиск «Нью-Йорк» в раскрывающемся списке ниже и
сравните его с другими раскрывающимися списками на странице, чтобы увидеть разницу.

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
    поиск = Ложь
)
 

Dropdown Clear

Для свойства clearable по умолчанию установлено значение True для всех компонентов
dcc.Dropdown . Чтобы предотвратить очистку выбранного раскрывающегося значения
, просто установите для свойства clearable значение False

 из dash import dcc.
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
    'Монреаль',
    очищаемый = Ложь
)
 

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

Заполнитель 9Свойство 0206 позволяет определить текст
по умолчанию, отображаемый, когда значение не выбрано.

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
    placeholder="Выберите город",
)
 

Отключить раскрывающийся список

Чтобы отключить раскрывающийся список, просто установите disabled на True .

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
    отключен = Истина
)
 

Отключить параметры

Чтобы отключить определенный параметр в раскрывающемся меню
, установите свойство disabled в параметрах.

 из тире импорт DCC
dcc.Dropdown([
        {'метка': 'Нью-Йорк', 'значение': 'Нью-Йорк', 'отключено': Истина},
        {'метка': 'Монреаль', 'значение': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF', 'disabled': True}])
 

Динамические параметры

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

 из тире импортировать Dash, dcc, html, dcc, Input, Output, State, обратный вызов
из dash.exceptions импортировать PreventUpdate
варианты = [
    {"метка": "Нью-Йорк", "значение": "Нью-Йорк"},
    {"метка": "Монреаль", "значение": "MTL"},
    {"label": "Сан-Франциско", "value": "SF"},
]
приложение = Тире (__имя__)
app. layout = html.Div([
    html.Div([
        «Одно динамическое выпадающее меню»,
        dcc.Dropdown(id="my-dynamic-dropdown")
    ]),
    html.Div([
        «Мультидинамический выпадающий список»,
        dcc.Dropdown(id="my-multi-dynamic-dropdown", multi=True),
    ]),
])
@перезвонить(
    Вывод («мой динамический раскрывающийся список», «параметры»),
    Ввод ("мой-динамический-раскрывающийся список", "значение_поиска")
)
def update_options (значение_поиска):
    если не искомое_значение:
        поднять PreventUpdate
    вернуть [o для o в параметрах, если search_value в o["label"]]
@перезвонить(
    Вывод("мой-мульти-динамический-раскрывающийся список", "параметры"),
    Ввод("мой-мультидинамический-раскрывающийся список", "значение_поиска"),
    Состояние("мой-мульти-динамический-раскрывающийся список", "значение")
)
def update_multi_options (значение_поиска, значение):
    если не искомое_значение:
        поднять PreventUpdate
    # Убедитесь, что установленные значения есть в списке опций, иначе они исчезнут
    # из показанного списка выбора, но все еще часть `value`. 
    возвращаться [
        o для o в параметрах, если search_value в o["метка"] или o["значение"] в (значение или [])
    ]
если __name__ == "__main__":
    app.run(отладка=Истина)
 

 из тире импортировать тире, dcc, html, ввод, вывод, обратный вызов
из данных импорта plotly.express
импортировать панд как pd
df = data.medals_long()
приложение = Тире (__имя__)
app.layout = html.Div([
    dcc.Dropdown(df.columns,),
    html.Div (id = 'панды-выход-контейнер-1')
])
@перезвонить(
    Вывод («панды-выход-контейнер-1», «дети»),
    Ввод ('панды-раскрывающийся список-1', 'значение')
)
определение update_output (значение):
    return f'Вы выбрали {значение}'
если __name__ == '__main__':
    app. run(отладка=Истина)
 

 из тире импортировать тире, dcc, html, ввод, вывод, обратный вызов
из данных импорта plotly.express
импортировать панд как pd
df = data.medals_long()
приложение = Тире (__имя__)
app.layout = html.Div([
    dcc.Dropdown(df.nation.unique(),),
    html.Div (id = 'панды-выход-контейнер-2')
])
@перезвонить(
    Вывод («панды-выход-контейнер-2», «дети»),
    Ввод ('панды-раскрывающийся список-2', 'значение')
)
определение update_output (значение):
    return f'Вы выбрали {значение}'
если __name__ == '__main__':
    app.run(отладка=Истина)
 

 из тире импорт dcc, html
dcc.Dropdown(
    [
        {
            "метка": html.Span(
                [
                    html.Img(src="/assets/images/language_icons/python_50px.svg", height=20),
                    html.Span("Python", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "значение": "Питон",
        },
        {
            "метка": html.Span(
                [
                    html.Img(src="/assets/images/language_icons/julia_50px.svg", height=20),
                    html.Span("Юлия", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "значение": "Юлия",
        },
        {
            "метка": html. Span(
                [
                    html.Img(src="/assets/images/language_icons/r-lang_50px.svg", height=20),
                    html.Span("R", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "значение": "Р",
        },
    ],
    значение = "Питон"
)
 

Вы также можете стилизовать метки, используя компонент html.Span для каждой метки, а затем задав стили, используя свойство стиля :

 из dash import dcc, html
dcc.Dropdown(
    [
        {
            "label": html.Span(['Монреаль'], style={'color': 'Gold', 'font-size': 20}),
            "значение": "Монреаль",
        },
        {
            "label": html.Span(['NYC'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "значение": "Нью-Йорк",
        },
        {
            "label": html. Span(['Лондон'], style={'color': 'LightGreen', 'font-size': 20}),
            "значение": "Лондон",
        },
    ], значение='Монреаль'
)
 

Значения пользовательского поиска

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

Значение, предоставленное для поиска , является дополнением к значению опции . Например, вариант 2 отображается, когда пользователь ищет
по запросу «Нью-Йорк» или «Нью-Йорк».

 из тире импортировать dcc, html
dcc.Dropdown(
    [
        {
            "label": html.Span(['Монреаль'], style={'color': 'Gold', 'font-size': 20}),
            "значение": "MTL",
            "поиск": "Монреаль"
        },
        {
            "label": html. Span(['Нью-Йорк'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "значение": "Нью-Йорк",
            "поиск": "Нью-Йорк"
        },
        {
            "label": html.Span(['Лондон'], style={'color': 'LightGreen', 'font-size': 20}),
            "значение": "LON",
            "поиск": "Лондон"
        },
    ], значение = 'Монреаль',
)
 

Высота раскрывающегося списка

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

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Париж', 'Лондон', 'Амстердам', 'Берлин', 'Рим'],
    'Париж', maxHeight=300
)
 

Option Height

Вы можете изменить высоту опций в раскрывающемся списке, установив optionHeight . В этом примере мы установили его на 50px.
Значение по умолчанию — 35 пикселей.

 из тире импорт DCC
dcc.Dropdown(
    ['Нью-Йорк', 'Монреаль', 'Париж', 'Лондон', 'Амстердам', 'Берлин', 'Рим'],
    'Париж', optionHeight=50
)
 

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

Получите доступ к этой документации в своем терминале Python с помощью:
```python

help(dash.dcc.Dropdown)
```

Наша рекомендуемая среда IDE для написания приложений Dash — это Dash Enterprise
Data Science Workspaces,
, которая имеет поддержку ввода для свойств компонентов Dash.
Узнайте, использует ли ваша компания
Dash Enterprise.

параметры ( список диктов ; необязательный):
Массив параметров {метка: [строка|число], значение: [строка|число]},
для каждого может использоваться необязательное отключенное поле вариант.

опции список строк | номера | логические | дикт | список
диктов с ключами:

• отключено ( логическое значение ; необязательный):
Если True, этот параметр отключен и не может быть выбран.

• метка ( список или компонент тире в единственном числе, строка или число ; обязательно):
Метка опции.

• поиск ( string ; необязательный):
Необязательное значение поиска для параметра, используемое, если метка является компонентом
, или укажите значение пользовательского поиска, отличное от метки
. Если нет значения для поиска и метка является компонентом, для поиска будет использоваться значение
.

• title ( string ; необязательно):
HTML-атрибут title для опции. Позволяет отображать информацию
при наведении. Дополнительные сведения об этом атрибуте см. в разделе 9.0148 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.

• значение ( строка | число | логическое значение ; требуется):
Значение параметра. Это значение соответствует элементам
, указанным в свойстве значение .

значение ( строка | число | логическое значение | список строк | числа | логическое значение ; необязательно):
Значение ввода. Если multi имеет значение False (по умолчанию), тогда значение
— это просто строка, соответствующая значениям, указанным в свойстве
options . Если multi имеет значение True, то одновременно может быть выбрано несколько значений
, а значение представляет собой массив элементов со значениями
, соответствующими значениям в options prop.

мульти ( логическое значение ; по умолчанию False ):
Если True, пользователь может выбрать несколько значений.

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

с возможностью поиска ( логическое значение ; по умолчанию True ):
Включить функцию поиска или нет.

search_value ( строка ; необязательно):
Значение, введенное в раскрывающемся списке для поиска.

заполнитель ( строка ; необязательно):
Серый текст по умолчанию, отображаемый, когда не выбран ни один параметр.

отключено ( логическое значение ; по умолчанию False ):
Если True, это раскрывающееся меню отключено, и выбор нельзя изменить.

optionHeight ( номер ; по умолчанию 35 ):
высота каждой опции. Может быть увеличено, если длина этикетки будет равна
вокруг.

maxHeight ( номер ; по умолчанию 200 ):
высота раскрывающегося списка параметров.

стиль ( dict ; необязательный):
Определяет стили CSS, которые переопределяют ранее установленные стили.

className ( строка ; необязательно):
className элемента раскрывающегося списка.

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

loading_state ( dict ; необязательный):
Объект, который содержит объект состояния загрузки, поступающий от dash-renderer.

loading_state - это словарь с ключами:

• имя_компонента ( строка ; необязательно):
Содержит имя загружаемого компонента.

• is_loading ( логическое значение ; необязательно):
Определяет, загружается компонент или нет.

• prop_name ( строка ; необязательно):
Указывает, какое свойство загружается.

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