Demo 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接调用输出函数产生的输出之间 都是竖直排列的，如果想实现更复杂的布局（比如在页面左侧显示一个代码块，在右侧显示一个图像），就需 要借助布局函数。 pywebio.output 模块提供了 3 个布局函数，通过对他们进行组合可以完成各种复杂的布局: • put_row() : 使用行布局输出内容. 内容在水平方向上排列 title (str) –图片描述 • width (str) –图像的宽度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。 • height (str) –图像的高度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式，非必须。如 png plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 Detailed changes by module UI • 添加元素显示动画

2.2 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接调用输出函数产生的输出之间 都是竖直排列的，如果想实现更复杂的布局（比如在页面左侧显示一个代码块，在右侧显示一个图像），就需 要借助布局函数。 pywebio.output 模块提供了 3 个布局函数，通过对他们进行组合可以完成各种复杂的布局: • put_row() : 使用行布局输出内容. 内容在水平方向上排列 title (str) –图片描述 • width (str) –图像的宽度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。 • height (str) –图像的高度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式，非必须。如 png plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 Detailed changes by module UI • 添加元素显示动画

o] 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 Image 实例 title (str) – 图片描述 width (str) – 图像的宽度，可以是CSS像素(数字px)或者 百分比(数字%)。 height (str) – 图像的高度，可以是CSS像素(数字px)或者 百分比(数字%)。可以只指定 width 和 height 中的一个 值，浏览器会根据原始图像进行缩放。 format (str) – 图片格式。如 png , jpeg , gif plotly、pyecharts 等第三方库进行数据可视化 与Web框架整合时支持同时使用基于线程和协程的会话实现 添加 defer_call() 、 hold() 会话控制函数 添加 put_image() 输出图像、 remove(anchor) 移除内容 加入动画提升UI体验 添加测试用例，构建CI工作流 Detailed changes by module UI 添加元素显示动画 页面底部添加footer

Demo 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接调用输出函数产生的输出之间 都是竖直排列的，如果想实现更复杂的布局（比如在页面左侧显示一个代码块，在右侧显示一个图像），就需 要借助布局函数。 pywebio.output 模块提供了 3 个布局函数，通过对他们进行组合可以完成各种复杂的布局: • put_row() : 使用行布局输出内容. 内容在水平方向上排列 title (str) –图片描述 • width (str) –图像的宽度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。 • height (str) –图像的高度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式。如 png , plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 Detailed changes by module UI • 添加元素显示动画

Image 实例 title (str) – 图片描述 width (str) – 图像的宽度，单位是CSS像素(数字px)或者 百分比(数字%)。 height (str) – 图像的高度，单位是CSS像素(数字px)或者 百分比(数字%)。可以只指定 width 和 height 中的一个 值，浏览器会根据原始图像进行缩放。 format (str) – 图片格式。如 png , jpeg , gif plotly、pyecharts 等第三方库进行数据可视化 与Web框架整合时支持同时使用基于线程和协程的会话实现 添加 defer_call() 、 hold() 会话控制函数 添加 put_image() 输出图像、 remove(anchor) 移除内容 加入动画提升UI体验 添加测试用例，构建CI工作流 Detailed changes by module UI 添加元素显示动画 页面底部添加footer

• title (str) –图片描述 • width (str) –图像的宽度，单位是 CSS 像素 (数字 px) 或者百分比 (数字%)。 4.3. pywebio.output —Make output to web browser 35 PyWebIO, 发布 0.3.0 • height (str) –图像的高度，单位是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式。如 png , jpeg , gif 等 • anchor, before, after (str) –与put_text 函数的同名参数含义一致 pywebio.output.put_file(name, content, anchor=None, before=None plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 Detailed changes by module UI • 添加元素显示动画

B D C A 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 Image 实例 title (str) – 图片描述 width (str) – 图像的宽度，可以是CSS像素(数字px)或者 百分比(数字%)。 height (str) – 图像的高度，可以是CSS像素(数字px)或者 百分比(数字%)。可以只指定 width 和 height 中的一个 值，浏览器会根据原始图像进行缩放。 format (str) – 图片格式，非必须。如 png , jpeg plotly、pyecharts 等第三方库进行数据可视化 与Web框架整合时支持同时使用基于线程和协程的会话实现 添加 defer_call() 、 hold() 会话控制函数 添加 put_image() 输出图像、 remove(anchor) 移除内容 加入动画提升UI体验 添加测试用例，构建CI工作流 Detailed changes by module UI 添加元素显示动画 页面底部添加footer

o] 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 Image 实例 title (str) – 图片描述 width (str) – 图像的宽度，可以是CSS像素(数字px)或者 百分比(数字%)。 height (str) – 图像的高度，可以是CSS像素(数字px)或者 百分比(数字%)。可以只指定 width 和 height 中的一个 值，浏览器会根据原始图像进行缩放。 format (str) – 图片格式，非必须。如 png , jpeg plotly、pyecharts 等第三方库进行数据可视化 与Web框架整合时支持同时使用基于线程和协程的会话实现 添加 defer_call() 、 hold() 会话控制函数 添加 put_image() 输出图像、 remove(anchor) 移除内容 加入动画提升UI体验 添加测试用例，构建CI工作流 Detailed changes by module UI 添加元素显示动画 页面底部添加footer

pywebio.output import * 引入。 调用输出函数后，内容会实时输出到浏览器，在应用的生命周期内，可以在任意时刻调用输出函数。 基本输出 PyWebIO 提供了一系列函数来输出文本、表格、图像等格式: # Text Output put_text("Hello world!") # Table Output put_table([ ['Commodity', 'Price'], title (str) –图片描述 • width (str) –图像的宽度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。 • height (str) –图像的高度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式，非必须。如 png plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 Detailed changes by module UI • 添加元素显示动画

pywebio.output import * 引入。 调用输出函数后，内容会实时输出到浏览器，在应用的生命周期内，可以在任意时刻调用输出函数。 基本输出 PyWebIO 提供了一系列函数来输出文本、表格、图像等格式: # Text Output put_text("Hello world!") # Table Output put_table([ ['Commodity', 'Price'], title (str) –图片描述 • width (str) –图像的宽度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。 • height (str) –图像的高度，可以是 CSS 像素 (数字 px) 或者百分比 (数字%)。可以 只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。 • format (str) –图片格式，非必须。如 png plotly、pyecharts 等第三方库进行数据可视化 • 与 Web 框架整合时支持同时使用基于线程和协程的会话实现 • 添加defer_call() 、hold() 会话控制函数 • 添加put_image() 输出图像、remove(anchor) 移除内容 • 加入动画提升 UI 体验 • 添加测试用例，构建 CI 工作流 4.10. Release notes 99 PyWebIO, 发布 1.5.2