使用flex-box显示许多ipywidget [英] Displaying many ipywidgets using flex-box

问题描述

我正尝试使用 layout = {'flex-flow':'flex-wrap'} 选项，如文档

I am trying to use the option layout={'flex-flow': 'flex-wrap'} as described in the documentation Flex-Flow-Reference on ipywidgets, but do not get it to work in neither jupterlab nor notebook frontend.

在多复选框示例中，更改第12行无效:

In the multi-checkbox example, changing line 12, does not work:

options_widget = widgets.VBox(options, layout={'flex-flow': 'flex-wrap'})
multi_select = widgets.VBox([search_widget, options_widget])

您是否看到添加 layout = {'flex-flow':'flex-wrap'} 而不是 {'overflow':'scroll'} 的可能性?在指定选项时我缺少什么?

Do you see a possibility adding layout={'flex-flow': 'flex-wrap'} instead of {'overflow': 'scroll'}? What am I missing in specifying the options?

在此先感谢您的提示！

推荐答案

下面是一个示例，我倾向于通过创建 Layout 对象来控制换行.

Here's an example, I tend to control the wrap through creating a Layout object.

import ipywidgets as widgets
descriptions = 'abcdefgh'
search_widget = widgets.Text()
options_dict = {description: widgets.Checkbox(description=description, value=False) for description in descriptions}
options = [options_dict[description] for description in descriptions]
options_widget = widgets.VBox(options, layout=widgets.Layout(flex_flow='row wrap'))
multi_select = widgets.VBox([search_widget, options_widget])

使用 Layout 对象的更多示例可以在文档中找到: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#Examples

More examples using the Layout object can be found in the docs: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#Examples

这篇关于使用flex-box显示许多ipywidget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！