pywebio.output — 输出模块

本模块提供了一系列函数来输出不同形式的内容到用户浏览器，并支持灵活的输出控制。

函数清单

下表为PyWebIO提供的输出相关的函数。

其中标记有 * 的函数表示其支持接收 put_xxx 调用作为参数。

标记有 † 的函数表示其支持作为上下文管理器使用。

	函数	简介
输出域Scope	set_scope	创建一个新的scope.
	get_scope	获取当前运行时scope栈中的scope名
	clear	清空scope内容
	remove	移除Scope
	scroll_to	将页面滚动到 scope Scope处
	use_scope†	开启/进入输出域
内容输出	put_text	输出文本
	put_markdown	输出Markdown
	put_info*† put_success*† put_warning*† put_error*†	输出通知消息
	put_html	输出Html
	put_link	输出链接
	put_processbar	输出进度条
	set_processbar	设置进度条进度
	put_loading†	输出加载提示
	put_code	输出代码块
	put_table*	输出表格
	put_buttons	输出一组按钮，并绑定点击事件
	put_image	输出图片
	put_file	显示一个文件下载链接
	put_tabs*	输出横向标签栏Tabs
	put_collapse*†	输出可折叠的内容
	put_scrollable*†	固定高度内容输出区域 内容超出则显示滚动条 .
	put_widget*	输出自定义的控件
其他交互	toast	显示一条通知消息
	popup*†	显示弹窗
	close_popup	关闭正在显示的弹窗
布局与样式	put_row*†	使用行布局输出内容
	put_column*†	使用列布局输出内容
	put_grid*	使用网格布局输出内容
	span	在 put_table() 和 put_grid() 中设置内容跨单元格
	style*	自定义输出内容的css样式
其他	output*	内容占位符

输出域Scope

pywebio.output.set_scope(name, container_scope=- 1, position=- 1, if_exist=None)

创建一个新的scope

参数

• name (str) – scope名

• container_scope (int/str) – 指定此scope的父scope. 可以直接指定父scope名或使用int索引运行时scope栈(参见 输出函数的scope相关参数). scope不存在时，不进行任何操作.

• position (int) – 在父scope中创建此scope的位置. 可选值: OutputPosition.TOP : 在父scope的顶部创建, OutputPosition.BOTTOM: 在父scope的底部创建。 也可以直接使用int来索引位置(参见 输出函数的scope相关参数)

• if_exist (str) –

  已经存在 name scope 时如何操作:

  • None 表示不进行任何操作

  • 'remove' 表示先移除旧scope再创建新scope

  • 'clear' 表示将旧scope的内容清除，不创建新scope

  默认为 None

pywebio.output.get_scope(stack_idx=- 1)

获取当前运行时scope栈中的scope名

参数

stack_idx (int) –

需要获取的scope在scope栈中的索引值。默认返回当前scope名

-1表示当前scope，-2表示进入当前scope前的scope，依次类推；0表示 ROOT scope

返回

返回Scope栈中对应索引的scope名，索引错误时返回None

pywebio.output.clear(scope=- 1)

清空scope内容

参数

scope (int/str) – 可以直接指定scope名或使用int索引运行时scope栈(参见 输出函数的scope相关参数)

pywebio.output.remove(scope=- 1)

移除Scope

参数

scope (int/str) – 可以直接指定scope名或使用int索引运行时scope栈(参见 输出函数的scope相关参数)

pywebio.output.scroll_to(scope=- 1, position='top')

将页面滚动到 scope Scope处

参数

• scope (str/int) – 目标scope。可以直接指定scope名或使用int索引运行时scope栈(参见 输出函数的scope相关参数)

• position (str) –

  将Scope置于屏幕可视区域的位置。可用值：

  • 'top' : 滚动页面，让Scope位于屏幕可视区域顶部

  • 'middle' : 滚动页面，让Scope位于屏幕可视区域中间

  • 'bottom' : 滚动页面，让Scope位于屏幕可视区域底部

pywebio.output.use_scope(name=None, clear=False, create_scope=True, **scope_params)

scope的上下文管理器和装饰器。用于创建一个新的输出域并进入，或进入一个已经存在的输出域。

参见 用户手册-use_scope()

参数

• name (str) – scope名. 若为None则生成一个全局唯一的scope名.（以上下文管理器形式的调用时，上下文管理器会返回scope名）

• clear (bool) – 在进入scope前是否要清除scope里的内容

• create_scope (bool) – scope不存在时是否创建scope

• scope_params – 创建scope时传入 set_scope() 的额外的参数. 仅在 create_scope=True 时有效.

Usage

with use_scope(...) as scope_name:
    put_xxx()

@use_scope(...)
def app():
    put_xxx()

内容输出

pywebio.output.put_text(*texts, sep=' ', inline=False, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出文本

参数

• texts – 要输出的内容。类型可以为任意对象，对非字符串对象会应用 str() 函数作为输出值。

• sep (str) – 输出分隔符

• inline (bool) – 将文本作为行内元素(连续输出的文本显示在相同的段落中)。默认每次输出的文本都作为一个独立的段落

• scope (int/str) –

  内容输出的目标scope，若scope不存在，则不进行任何输出操作。

  可以直接指定目标Scope名，或者使用int通过索引Scope栈来确定Scope

• position (int) – 在scope中输出的位置。

参数 scope 和 position 的更多使用说明参见 用户手册

pywebio.output.put_markdown(mdcontent, strip_indent=0, lstrip=False, options=None, sanitize=True, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出Markdown

参数

• mdcontent (str) – Markdown文本

• strip_indent (int) – 对于每一行，若前 strip_indent 个字符都为空格，则将其去除

• lstrip (bool) – 是否去除每一行开始的空白符

• options (dict) – 解析Markdown时的配置参数。 PyWebIO使用 marked 解析Markdown, 可配置项参见: https://marked.js.org/using_advanced#options (仅支持配置string和boolean类型的项)

• sanitize (bool) – 是否使用 DOMPurify 对内容进行过滤来防止XSS攻击。

• scope, position (int) – 与 put_text 函数的同名参数含义一致

当在函数中使用Python的三引号语法输出多行内容时，为了排版美观可能会对Markdown文本进行缩进， 这时候，可以设置 strip_indent 或 lstrip 来防止Markdown错误解析(但不要同时使用 strip_indent 和 lstrip ):

# It is ugly without strip_indent or lstrip
def hello():
    put_markdown(r""" # H1
This is content.
""")

# Using lstrip to get beautiful indent
def hello():
    put_markdown(r""" # H1
    This is content.
    """, lstrip=True)

# Using strip_indent to get beautiful indent
def hello():
    put_markdown(r""" # H1
    This is content.
    """, strip_indent=4)

pywebio.output.put_info(*contents, closable=False, scope=- 1, position=- 1) → Output:

pywebio.output.put_success(*contents, closable=False, scope=- 1, position=- 1) → Output:

pywebio.output.put_warning(*contents, closable=False, scope=- 1, position=- 1) → Output:

pywebio.output.put_error(*contents, closable=False, scope=- 1, position=- 1) → Output:

输出通知消息

参数

• contents – 消息内容. 元素为 put_xxx() 调用，其他类型会被转换成 put_text(content)

• closable (bool) – Whether to show a dismiss button on the right of the message.

• scope, position (int) – 与 put_text 函数的同名参数含义一致

1.2 新版功能.

pywebio.output.put_html(html, sanitize=False, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出Html内容

参数

• html – html字符串

• sanitize (bool) – 是否使用 DOMPurify 对内容进行过滤来防止XSS攻击。

• scope, position (int) – 与 put_text 函数的同名参数含义一致

pywebio.output.put_link(name, url=None, app=None, new_window=False, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出链接到其他网页或PyWebIO App的超链接

参数

• name (str) – 链接名称

• url (str) – 链接到的页面地址

• app (str) – 链接到的PyWebIO应用名。参见 Server模式

• new_window (bool) – 是否在新窗口打开链接

• scope, position (int) – 与 put_text 函数的同名参数含义一致

url 和 app 参数必须指定一个但不可以同时指定

pywebio.output.put_processbar(name, init=0, label=None, auto_close=False, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出进度条

参数

• name (str) – 进度条名称，为进度条的唯一标识

• init (float) – 进度条初始值. 进度条的值在 0 ~ 1 之间

• label (str) – 进度条显示的标签. 默认为当前进度的百分比

• auto_close (bool) – 是否在进度完成后关闭进度条

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example:

import time

put_processbar('bar');
for i in range(1, 11):
    set_processbar('bar', i / 10)
    time.sleep(0.1)

pywebio.output.set_processbar(name, value, label=None)

设置进度条进度

参数

• name (str) – 设置进度条进度

• value (float) – 进度条的值. 范围在 0 ~ 1 之间

• label (str) – 进度条显示的标签. 默认为当前进度的百分比

参见 put_processbar()

pywebio.output.put_loading(shape='border', color='dark', scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出加载提示

参数

• shape (str) – 加载提示的形状, 可选值: 'border' (默认，旋转的圆环)、 'grow' (大小渐变的圆点)

• color (str) – 加载提示的颜色, 可选值: 'primary' 、 'secondary' 、 'success' 、 'danger' 、 'warning' 、'info' 、'light' 、 'dark' (默认)

• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_loading() 支持直接调用和上下文管理器：

for shape in ('border', 'grow'):
    for color in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'):
        put_text(shape, color)
        put_loading(shape=shape, color=color)

# Use as context manager, the loading prompt will disappear automatically when the context block exits.
with put_loading():
    time.sleep(3)  # Some time-consuming operations
    put_text("The answer of the universe is 42")

# using style() to set the size of the loading prompt
style(put_loading(), 'width:4rem; height:4rem')

pywebio.output.put_code(content, language='', rows=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出代码块

参数

• content (str) – 代码内容

• language (str) – 代码语言

• rows (int) – 代码块最多可显示的文本行数，默认不限制。内容超出时会使用滚动条。

• scope, position (int) – 与 put_text 函数的同名参数含义一致

pywebio.output.put_table(tdata, header=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出表格

参数

• tdata (list) – 表格数据。列表项可以为 list 或者 dict , 单元格的内容可以为字符串或 put_xxx 类型的输出函数。 数组项可以使用 span() 函数来设定单元格跨度。

• header (list) –

  表头。当 tdata 的列表项为 list 类型时，若省略 header 参数，则使用 tdata 的第一项作为表头。表头项可以使用 span() 函数来设定单元格跨度。

  当 tdata 为字典列表时，使用 header 指定表头顺序，不可省略。此时， header 格式可以为 <字典键>列表 或者 (<显示文本>, <字典键>) 列表。

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example:

# 'Name' cell across 2 rows, 'Address' cell across 2 columns
put_table([
    [span('Name',row=2), span('Address', col=2)],
    ['City', 'Country'],
    ['Wang', 'Beijing', 'China'],
    ['Liu', 'New York', 'America'],
])

# Use `put_xxx()` in `put_table()`
put_table([
    ['Type', 'Content'],
    ['html', put_html('X<sup>2</sup>')],
    ['text', '<hr/>'],
    ['buttons', put_buttons(['A', 'B'], onclick=...)],  
    ['markdown', put_markdown('`Awesome PyWebIO!`')],
    ['file', put_file('hello.text', b'hello world')],
    ['table', put_table([['A', 'B'], ['C', 'D']])]
])

# Set table header
put_table([
    ['Wang', 'M', 'China'],
    ['Liu', 'W', 'America'],
], header=['Name', 'Gender', 'Address'])

# When ``tdata`` is list of dict
put_table([
    {"Course":"OS", "Score": "80"},
    {"Course":"DB", "Score": "93"},
], header=["Course", "Score"])  # or header=[(put_markdown("*Course*"), "Course"), (put_markdown("*Score*") ,"Score")]

0.3 新版功能: 单元格的内容支持 put_xxx 类型的输出函数

pywebio.output.span(content, row=1, col=1)

用于在 put_table() 和 put_grid() 中设置内容跨单元格

参数

• content – 单元格内容。可以为字符串或 put_xxx() 调用。

• row (int) – 竖直方向跨度, 即：跨行的数目

• col (int) – 水平方向跨度, 即：跨列的数目

Example

put_table([
    ['C'],
    [span('E', col=2)],  # 'E' across 2 columns
], header=[span('A', row=2), 'B'])  # 'A' across 2 rows

put_grid([
    [put_text('A'), put_text('B')],
    [span(put_text('A'), col=2)],  # 'A' across 2 columns
])

pywebio.output.put_buttons(buttons, onclick, small=None, link_style=False, outline=False, group=False, scope=- 1, position=- 1, **callback_options) → pywebio.io_ctrl.Output

输出一组按钮，并绑定点击事件

参数

• buttons (list) –

  按钮列表。列表项的可用形式有：

  • dict: {label:(str)按钮标签, value:(str)按钮值, color:(str, optional)按钮颜色}

  • tuple or list: (label, value)

  • 单值: 此时label和value使用相同的值

  其中， value 可以为任意可json序列化的对象。使用dict类型的列表项时，支持使用 color key设置按钮颜色，可选值为 primary 、secondary 、 success 、 danger 、 warning 、 info 、 light 、 dark .

  Example:

  put_buttons([dict(label='success', value='s', color='success')], onclick=...)  
  

• onclick (callable / list) –

  按钮点击回调函数. onclick 可以是函数或者函数组成的列表.

  onclick 为函数时， 签名为 onclick(btn_value). btn_value 为被点击的按钮的 value 值

  onclick 为列表时，列表内函数的签名为 func(). 此时，回调函数与 buttons 一一对应

  Tip: 可以使用 functools.partial 来在 onclick 中保存更多上下文信息.

  Note: 当使用 基于协程的会话实现 时，回调函数可以为协程函数.

• small (bool) – 是否使用小号按钮，默认为False

• link_style (bool) – 是否将按钮显示为链接样式，默认为False

• outline (bool) – 是否将按钮显示为镂空样式，默认为False

• group (bool) – 是否将按钮合并在一起，默认为False

• scope, position (int) – 与 put_text 函数的同名参数含义一致

• callback_options –

  回调函数的其他参数。根据选用的 session 实现有不同参数

  CoroutineBasedSession 实现

  • mutex_mode: 互斥模式。默认为 False 。若为 True ，则在运行回调函数过程中，无法响应当前按钮组的新点击事件，仅当 onclick 为协程函数时有效

  ThreadBasedSession 实现

  • serial_mode: 串行模式模式。默认为 False ，此时每次触发回调，回调函数会在新线程中立即执行。

  开启serial_mode后，该按钮的回调会在会话内的一个固定线程内串行执行，且其他所有新的点击事件的回调(包括 serial_mode=False 的回调)都将排队等待当前点击事件运行完成。如果回调函数运行时间很短，可以开启 serial_mode 来提高性能。

Example:

from functools import partial

def row_action(choice, id):
    put_text("You click %s button with id: %s" % (choice, id))

put_buttons(['edit', 'delete'], onclick=partial(row_action, id=1))

def edit():
    put_text("You click edit button")
def delete():
    put_text("You click delete button")

put_buttons(['edit', 'delete'], onclick=[edit, delete])

注意

在PyWebIO会话(关于会话的概念见 Server与script模式 )结束后，事件回调也将不起作用， 可以在任务函数末尾处使用 pywebio.session.hold() 函数来将会话保持，这样在用户关闭浏览器页面前，事件回调将一直可用。

pywebio.output.put_image(src, format=None, title='', width=None, height=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出图片

参数

• src – 图片内容. 可以为: 字符串类型的URL, bytes-like object 表示的图片二进制内容, PIL.Image.Image 实例

• title (str) – 图片描述

• width (str) – 图像的宽度，可以是CSS像素(数字px)或者百分比(数字%)。

• height (str) – 图像的高度，可以是CSS像素(数字px)或者百分比(数字%)。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

• format (str) – 图片格式，非必须。如 png , jpeg , gif 等, 仅在 src 为非URL时有效

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example:

img = open('/path/to/some/image.png', 'rb').read()  
put_image(img, width='50px')

put_image('https://www.python.org/static/img/python-logo.png')

pywebio.output.put_file(name, content, label=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

显示一个文件下载链接

在浏览器上的显示为一个以文件名为名的链接，点击链接后浏览器自动下载文件。

参数

• name (str) – 下载保存为的文件名

• content – 文件内容. 类型为 bytes-like object

• label (str) – 下载链接的显示文本，默认和文件名相同

• scope, position (int) – 与 put_text 函数的同名参数含义一致

注意

在PyWebIO会话(关于会话的概念见 Server与script模式 )结束后，使用 put_file() 输出的文件也将无法下载，可以在任务函数末尾处使用 pywebio.session.hold() 函数来将会话保持，这样在用户关闭浏览器页面前， 文件下载将一直可用。

Example:

put_file('hello-world.txt', b'hello world!', 'download me')

pywebio.output.put_tabs(tabs, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出横向标签栏Tabs

参数

• tabs (list) – 标签列表，列表项为一个 dict: {"title": "Title", "content": ...} ，其中 content 表示标签内容，可以为字符串、 put_xxx() 调用或由它们组成的列表。

• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_tabs([
    {'title': 'Text', 'content': 'Hello world'},
    {'title': 'Markdown', 'content': put_markdown('~~Strikethrough~~')},
    {'title': 'More content', 'content': [
        put_table([
            ['Commodity', 'Price'],
            ['Apple', '5.5'],
            ['Banana', '7'],
        ]),
        put_link('pywebio', 'https://github.com/wang0618/PyWebIO')
    ]},
])

1.3 新版功能.

pywebio.output.put_collapse(title, content=[], open=False, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出可折叠的内容

参数

• title (str) – 内容标题

• content (list/str/put_xxx()) – 内容可以为字符串或 put_xxx 类输出函数的返回值，或者由它们组成的列表。

• open (bool) – 是否默认展开折叠内容。默认不展开内容

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example:

put_collapse('Collapse title', [
    'text',
    put_markdown('~~Strikethrough~~'),
    put_table([
        ['Commodity', 'Price'],
        ['Apple', '5.5'],
    ])
], open=True)

put_collapse('Large text', 'Awesome PyWebIO! '*30)

pywebio.output.put_scrollable(content=[], height=400, keep_bottom=False, horizon_scroll=False, border=True, scope=- 1, position=- 1, **kwargs) → pywebio.io_ctrl.Output

固定高度内容输出区域，内容超出则显示滚动条

参数

• content (list/str/put_xxx()) – 内容可以为字符串或 put_xxx 类输出函数的返回值，或者由它们组成的列表。

• height (int/tuple) – 区域的高度（像素），内容超出此高度则使用滚动条。可以传入 (min_height, max_height) 来表示高度的范围，比如 (100, 200) 表示区域高度最小100像素、最高200像素。

• horizon_scroll (bool) – 是否显示水平滚动条

• border (bool) – 是否显示边框

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example:

import time

o = output("You can click the area to prevent auto scroll.")
put_scrollable(o, height=200, keep_bottom=True)

while 1:
    o.append(time.time())
    time.sleep(0.5)

在 1.1 版更改: 添加 height 参数，移除 max_height 参数；添加 keep_bottom 参数

pywebio.output.put_widget(template, data, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

输出自定义的控件

参数

• template – html模版，使用 mustache.js 语法

• data (dict) –

  渲染模版使用的数据.

  数据可以包含输出函数( put_xxx() )的返回值, 可以使用 pywebio_output_parse 函数来解析 put_xxx() 内容；对于字符串输入， pywebio_output_parse 会将解析成文本.

  ⚠️：使用 pywebio_output_parse 函数时，需要关闭mustache的html转义: {{& pywebio_output_parse}} , 参见下文示例. :param int scope, position: 与 put_text 函数的同名参数含义一致

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example

tpl = '''
<details {{#open}}open{{/open}}>
    <summary>{{title}}</summary>
    {{#contents}}
        {{& pywebio_output_parse}}
    {{/contents}}
</details>
'''

put_widget(tpl, {
    "open": True,
    "title": 'More content',
    "contents": [
        'text',
        put_markdown('~~Strikethrough~~'),
        put_table([
            ['Commodity', 'Price'],
            ['Apple', '5.5'],
            ['Banana', '7'],
        ])
    ]
})

其他交互

pywebio.output.toast(content, duration=2, position='center', color='info', onclick=None)

显示一条通知消息

参数

• content (str) – 通知内容

• duration (float) – 通知显示持续的时间，单位为秒。 0 表示不自动关闭(此时消息旁会显示一个关闭图标，用户可以手动关闭消息)

• position (str) – 通知消息显示的位置，可以为 'left' / 'center' / 'right'

• color (str) – 通知消息的背景颜色，可以为 'info' / 'error' / 'warn' / 'success' 或以 '#' 开始的十六进制颜色值

• onclick (callable) –

  点击通知消息时的回调函数，回调函数不接受任何参数。

  Note: 当使用 基于协程的会话实现 时，回调函数可以为协程函数.

Example:

def show_msg():
    put_text("You clicked the notification.")

toast('New messages', position='right', color='#2188ff', duration=0, onclick=show_msg)

pywebio.output.popup(title, content=None, size='normal', implicit_close=True, closable=True)

显示弹窗

⚠️: PyWebIO不允许同时显示多个弹窗，在显示新弹窗前，会自动关闭页面上存在的弹窗。可以使用 close_popup() 主动关闭弹窗

参数

• title (str) – 弹窗标题

• content (list/str/put_xxx()) – 弹窗内容. 可以为字符串或 put_xxx 类输出函数的返回值，或者为它们组成的列表。

• size (str) – 弹窗窗口大小，可选值: 'large', 'normal' and 'small'.

• implicit_close (bool) – 是否可以通过点击弹窗外的内容或按下 Esc 键来关闭弹窗，默认为 False

• closable (bool) – 是否可由用户关闭弹窗. 默认情况下，用户可以通过点击弹窗右上角的关闭按钮来关闭弹窗。 设置为 False 时弹窗仅能通过 popup_close() 关闭，此时 implicit_close 参数将被忽略.

popup() 支持直接传入内容、上下文管理器、装饰器三种形式的调用

• 直接传入内容:

popup('popup title', 'popup text content', size=PopupSize.SMALL)

popup('Popup title', [
    put_html('<h3>Popup Content</h3>'),
    'html: <br/>',
    put_table([['A', 'B'], ['C', 'D']]),
    put_buttons(['close_popup()'], onclick=lambda _: close_popup())
])

• 作为上下文管理器使用:

with popup('Popup title') as s:
    put_html('<h3>Popup Content</h3>')
    put_text('html: <br/>')
    put_buttons([('clear()', s)], onclick=clear)

put_text('Also work!', scope=s)

The context manager will open a new output scope and return the scope name. The output in the context manager will be displayed on the popup window by default. After the context manager exits, the popup window will not be closed. You can still use the scope parameter of the output function to output to the popup.

• 作为装饰器使用:

@popup('Popup title')
def show_popup():
    put_html('<h3>Popup Content</h3>')
    put_text("I'm in a popup!")
    ...

show_popup()

pywebio.output.close_popup()

关闭正在显示的弹窗

See also: popup()

布局与样式

pywebio.output.put_row(content=[], size=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

使用行布局输出内容. 内容在水平方向从左往右排列成一行

参数

• content (list) – 子元素列表, 列表项为 put_xxx() 调用或者 None , None 表示空白行间距

• size (str) –

  用于指示子元素的宽度, 为空格分割的宽度值列表.

  宽度值需要和 content 中子元素一一对应( None 子元素也要对应宽度值).

  size 默认给 None 元素分配10像素宽度，并为剩余元素平均分配宽度.

  宽度值可用格式:

  • 像素值: 例如: 100px

  • 百分比: 表示占可用宽度的百分比. 例如: 33.33%

  • fr 关键字: 表示比例关系, 2fr 表示的宽度为 1fr 的两倍

  • auto 关键字: 表示由浏览器自己决定长度

  • minmax(min, max) : 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 例如: minmax(100px, 1fr) 表示长度不小于100px，不大于1fr

• scope, position (int) – 与 put_text 函数的同名参数含义一致

Example

# Two code blocks of equal width, separated by 10 pixels
put_row([put_code('A'), None, put_code('B')])

# The width ratio of the left and right code blocks is 2:3, which is equivalent to size='2fr 10px 3fr'
put_row([put_code('A'), None, put_code('B')], size='40% 10px 60%')

pywebio.output.put_column(content=[], size=None, scope=- 1, position=- 1) → pywebio.io_ctrl.Output

使用列布局输出内容. 内容在竖直方向从上往下排列成一列

参数

• content (list) – 子元素列表, 列表项为 put_xxx() 调用或者 None , None 表示空白行间距

• size (str) – 用于指示子元素的高度, 为空格分割的高度值列表. 可用格式参考 put_row() 函数的 size 参数注释.

• scope, position (int) – 与 put_text 函数的同名参数含义一致

pywebio.output.put_grid(content, cell_width='auto', cell_height='auto', cell_widths=None, cell_heights=None, direction='row', scope=- 1, position=- 1) → pywebio.io_ctrl.Output

使用网格布局输出内容

参数

• content – 输出内容. put_xxx() / None 组成的二维数组, None 表示空白. 数组项可以使用 span() 函数设置元素在网格的跨度.

• cell_width (str) – 网格元素的宽度.

• cell_height (str) – 网格元素的高度.

• cell_widths (str) – 网格每一列的宽度. 宽度值用空格分隔. 不可以和 cell_width 参数同时使用.

• cell_heights (str) – 网格每一行的高度. 高度值用空格分隔. 不可以和 cell_height 参数同时使用.

• direction (str) –

  排列方向. 为 'row' 或 'column' .

  'row' 时表示，content中的每一个子数组代表网格的一行;

  'column' 时表示，content中的每一个子数组代表网格的一列.

• scope, position (int) – 与 put_text 函数的同名参数含义一致

cell_width,``cell_height``,``cell_widths``,``cell_heights`` 参数中的宽度/高度值格式参考 put_row() 函数的 size 参数注释.

Example

put_grid([
    [put_text('A'), put_text('B'), put_text('C')],
    [None, span(put_text('D'), col=2, row=1)],
    [put_text('E'), put_text('F'), put_text('G')],
], cell_width='100px', cell_height='100px')

pywebio.output.style(outputs, css_style) → Union[pywebio.io_ctrl.Output, pywebio.io_ctrl.OutputList]

自定义输出内容的css样式

1.3 版后已移除: 为输出设置样式的新方式参见 User Guide.

参数

• outputs (list/put_xxx()) – 输出内容，可以为 put_xxx() 调用或其列表。outputs为列表时将为每个列表项都添加自定义的css样式。

• css_style (str) – css样式字符串

返回

添加了css样式的输出内容

Note: 若 outputs 为list，则 outputs 中每一项都会被添加css样式, 其返回值可用于任何接受 put_xxx() 列表的地方。

Example

style(put_text('Red'), 'color:red')

style([
    put_text('Red'),
    put_markdown('~~del~~')
], 'color:red')

put_table([
    ['A', 'B'],
    ['C', style(put_text('Red'), 'color:red')],
])

put_collapse('title', style([
    put_text('text'),
    put_markdown('~~del~~'),
], 'margin-left:20px'))

其他

pywebio.output.output(*contents)

内容占位符

output() 可以传入任何接收 put_xxx() 调用的地方，output() 返回一个handler，通过该handler可对自身内容进行修改（见下方示例）

参数

contents – 要输出的初始内容. 元素为 put_xxx() 调用，其他类型会被转换成 put_text(content)

返回

OutputHandler 实例, 实例支持的方法如下:

• reset(*contents) : 重置内容为 contents

• append(*contents) : 在末尾追加内容

• insert(idx, *contents) : 插入内容. idx 表示内容插入位置:

  idx>=0 时表示输出内容到原内容的idx索引的元素的前面；

  idx<0 时表示输出内容到到原内容的idx索引元素之后.

其中，参数 contents 同 output() 。

Example

hobby = output(put_text('Coding'))  # equal to output('Coding')
put_table([
   ['Name', 'Hobbies'],
   ['Wang', hobby]      # hobby is initialized to Coding
])

hobby.reset('Movie')  # hobby is reset to Movie
hobby.append('Music', put_text('Drama'))  # append Music, Drama to hobby
hobby.insert(0, put_markdown('**Coding**'))  # insert the Coding into the top of the hobby