博主原文链接：https://www.yourmetaverse.cn/nlp/252/
定制你的Blocks UI布局：Gradio的Block Layouts模块介绍
Gradio是一个功能强大的Python库，用于构建交互式的Web应用和演示。它提供了多种布局选项，使用户能够自定义Blocks UI的布局。在本文中，我们将介绍Gradio的Block Layouts模块，探讨如何使用其中的布局类来定制你的Blocks UI。无论你是想水平排列组件、垂直排列组件、创建选项卡布局还是实现其他自定义布局，Block Layouts模块都能满足你的需求。
1. Row
Row是Blocks模块中的一个布局元素，它将所有子组件水平排列。
参数：
variant：行类型，可选值为’default’（无背景），‘panel’（灰色背景和圆角）或’compact’（圆角且无内部间隔）。visible：是否显示行，默认为True。elem_id：可选的HTML DOM的ID，可用于定位CSS样式。equal_height：是否使每个子元素具有相等的高度，默认为True。
2. Column
Column是Blocks模块中的一个布局元素，它将所有子组件垂直排列。可以通过scale和min_width参数设置列的宽度。
参数：
scale：相对于相邻列的宽度比例，默认为1。例如，如果列A的scale为2，列B的scale为1，则A的宽度是B的两倍。min_width：列的最小像素宽度，默认为320。如果某个scale值导致列宽度小于min_width，则将尊重min_width参数。variant：列类型，可选值为’default’（无背景），‘panel’（灰色背景和圆角）或’compact’（圆角且无内部间隔）。visible：是否显示列，默认为True。elem_id：可选的HTML DOM的ID，可用于定位CSS样式。
3. Tab
Tab（或其别名TabItem）是Blocks模块中的一个布局元素，组件定义在选中的标签页中可见。
参数：
label：选项卡的可视标签，必填项。id：选项卡的标识符，如果希望从预测函数控制选定的选项卡，则必填。elem_id：可选的HTML DOM的ID，可用于定位CSS样式。
4. Group
Group是Blocks模块中的一个布局元素，用于将子组件组合在一起，没有间距。
参数：
visible：是否显示组，默认为True。elem_id：可选的HTML DOM的ID
，可用于定位CSS样式。
5. Box
Box是Blocks模块中的一个布局元素，将子组件放在一个带有圆角和一些填充的框中。
参数：
visible：是否显示框，默认为True。elem_id：可选的HTML DOM的ID，可用于定位CSS样式。
6. Accordion
Accordion是Blocks模块中的一个布局元素，可以切换显示/隐藏所包含的内容。
参数：
label：手风琴部分的名称，必填项。open：如果为True，则手风琴默认展开。visible：是否显示手风琴，默认为True。elem_id：可选的HTML DOM的ID，可用于定位CSS样式。
通过使用这些布局类，你可以根据需要创建出令人惊叹的用户界面，自定义布局，使你的Blocks UI与众不同。
7. 参数介绍
下面是关于Row、Column、Tab、Group、Box和Accordion方法以及Tab的select方法的参数的表格：
| 方法 | 参数 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Row | variant | str | “default” | 行类型，可选值为’default’、‘panel’或’compact’。 |
| visible | bool | True | 是否显示行。 | |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| equal_height | bool | True | 是否使每个子元素具有相等的高度。 | |
| Column | scale | int | 1 | 相对于相邻列的宽度比例。 |
| min_width | int | 320 | 列的最小像素宽度，如果列宽度小于该值，将进行换行。 | |
| variant | str | “default” | 列类型，可选值为’default’、‘panel’或’compact’。 | |
| visible | bool | True | 是否显示列。 | |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| Tab | label | str | 必填 | 选项卡的可视标签。 |
| id | int|str|None | None | 选项卡的标识符，用于控制选定的选项卡。 | |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| Group | visible | bool | True | 是否显示组。 |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| Box | visible | bool | True | 是否显示框。 |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| Accordion | label | 必填 | None | 手风琴部分的名称。 |
| open | bool | True | 手风琴是否默认展开。 | |
| visible | bool | True | 是否显示手风琴。 | |
| elem_id | str|None | None | HTML DOM的ID，可用于定位CSS样式。 | |
| Tab.select | fn | Callable|None | 必填 | 在选项卡中选择时触发的函数。 |
| inputs | Component|list[Component]|set[Component]|None | None | 作为输入使用的组件列表。如果函数不需要输入，应为一个空列表。 | |
| outputs | Component|list[Component]|None | None | 作为输出使用的组件列表。如果函数没有输出，应为一个空列表。 | |
| api_name | str|None | None | 定义此参数将在API文档中公开该端点。 | |
| status_tracker | None | None | ||
| scroll_to_output | bool | False | 如果为True，将在完成后滚动到输出组件。 | |
| show_progress | “full”|“minimal”|“hidden” | “full” | 如果为True，在等待期间显示进度动画。 | |
| queue | bool|None | None | 如果为True，将请求放入队列中（如果队列已启用）。如果为False，即使启用了队列，也不会将此事件放入队列中。 | |
| batch | bool | False | 如果为True，则函数应处理一批输入，即应为每个参数接受一个输入值列表。 | |
| max_batch_size | int | 4 | 如果从队列中调用此方法，则将批处理在一起的最大输入数（仅在batch=True时有效）。 | |
| preprocess | bool | True | 如果为False，则在运行’fn’之前不会运行组件数据的预处理。 | |
| postprocess | bool | True | 如果为False，则在将’fn’的输出返回给浏览器之前不会运行组件数据的后处理。 | |
| cancels | dict[str, Any]|list[dict[str, Any]]|None | None | 触发此监听器时要取消的其他事件的列表。 | |
| every | float|None | None | 在客户端连接打开时每隔多少秒运行此事件。 |
8. 总结
无论你是想创建一个简单的表单、一个复杂的仪表盘还是一个具有吸引力的交互式演示，Gradio的Block Layouts模块提供了丰富的选项，以满足你的布局需求。开始使用Gradio的Block Layouts模块，定制你的Blocks UI吧！
本文链接：https://my.lmcjl.com/post/1233.html
4 评论