Usage of drop-down menu select under PyWebIO input

1. Usage scenarios

Drop-down menu options, single or multiple selection

2. Multiple parameters

The default is single selection, when multiple is True, multiple selections are supported

3. options parameter

options parameter details:

  • label: the name of the option as the user sees it
  • value: the value actually represented by the option
  • selected: bool type (default false), when it is a single selection, there can only be one true. If there are multiple trues, the last selected option that is true will take effect. If all are false, the first option is selected by default.
  • disabled: bool type (default false), declares whether this option can be optional. When it is True, the option is grayed out and cannot be selected; when it is False, the option is optional.
官方解释:
"label":(str) option label,
"value":(object) option value,
"selected":(bool, optional) whether the option is initially selected,
"disabled":(bool, optional) whether the option is initially disabled

3.1 label and value usage

3.1.1 label and value are the same value

options=["A", "B"]
When each element in options is a value, it means that the label and value are the same value, and the default selected and disabled are both false.

import pywebio
from pywebio.input import select
from pywebio.output import put_text

def select1():
    sel = select("选择选项:", options=["A", "B"])
    put_text(f"你选择的是{sel}")
    
if __name__ == '__main__':
    pywebio.start_server(select1, port=19000, debug=True, cdn=False, auto_open_webbrowser=False)
   

Effect:

insert image description here

3.1.2 label and value are different

Usage scenario: It can be understood that label is the renaming of value, which is easier to understand for users alone. For example, the values ​​used in the parameters in the code are English or numbers, but if displayed to the user, it is more friendly to display it in Chinese.

options=[[“A”, 0, False, True], [“B”, 1, True, False], [“C”, 2, False, False]]

def select2():
    # options是列表
    # mutiple是false,所以即使有多个选项selected是true,也只有一个会被默认选中(会取最后一个selected是true的选项)
    sel = select("选择选项:", options=[["A", 0, False, True], ["B", 1, True, False], ["C", 2, False, False]])
    put_text(f"你选择的是{sel}")

Effect:

  • A corresponding value is 0
  • B corresponds to a value of 1
  • The corresponding value of C is 2
  • B is selected by default
  • Option A is grayed out and cannot be selected

insert image description here
options can also be a tuple, the effect is the same as above

def select3():
    # options是元组
    # mutiple是false,所以即使有多个选项selected是true,也只有一个会被默认选中(会取最后一个selected是true的选项)
    sel = select("选择选项:", options=[("A", 0, False, True), ("B", 1, True, False), ("C", 2, False, False)])
    put_text(f"你选择的是{
      
      sel}")

options can also be a dictionary, the effect is the same as above

def select4():
    # options是字典
    # mutiple是false,所以即使有多个选项selected是true,也只有一个会被默认选中(会取最后一个selected是true的选项)
    sel = select("选择选项:", options=[{
    
    "label": "A", "value": 0, "selected": False, "disabled": True},
                                       {
    
    "label": "B", "value": 1, "selected": True, "disabled": False},
                                       {
    
    "label": "C", "value": 2, "selected": False, "disabled": False}])
    put_text(f"你选择的是{
      
      sel}")

4. Multi-choice multiple=true

4.1 Example 1

options is single value, label and value are the same value.
In the select method, the parameter value=[“A”, “C”], A and C are selected by default

def multiple_select():
    sel = select("支持多选:", ["A", "B", "C"], multiple=True, value=["A", "C"])
    put_text(f"你选择的是{
      
      sel}")

Effect:

  • A and C are selected by default
  • The result is a list
    insert image description here

4.2 Example 2

options is not a single value, and the label and value values ​​are different.

def multiple_select():
    sel = select("选择选项:", options=[("A", 0), ("B", 1), ("C", 2)], multiple=True)
    put_text(f"你选择的是{
      
      sel}")

Effect:

  • Initially no options will be selected
  • The selected result is a list with the value corresponding to each selected option
    insert image description here

Guess you like

Origin blog.csdn.net/weixin_44691253/article/details/130855944