对齐部件

这里我们展示一些例子，说明了部件的默认样式是如何很好地对齐的。

from ipywidgets import *

1. VBox(HBox)

VBox([HBox([VBox([Dropdown(description='Choice', options=['foo', 'bar']), 
                  ColorPicker(description='Color'), 
                  HBox([Button(), Button()])]), 
            Textarea(value="Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris "
"nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
"reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla "
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa "
"qui officia deserunt mollit anim id est laborum.")]),
      HBox([Text(), Checkbox(description='Check box')]), 
      IntSlider(), 
      Controller()], background_color='#EEE')

2. HBox(VBox)

HBox([VBox([Button(description='Press'), Dropdown(options=['a', 'b']), Button(description='Button')]), 
      VBox([Button(), Checkbox(), IntText()])], background_color='#EEE')

3. VBox(HBox) 宽度滑块，范围滑块和进度条

VBox([HBox([Button(), FloatRangeSlider(), Text(), Button()]), 
      HBox([Button(), FloatText(),
            FloatProgress(value=40), Checkbox(description='Check')]), 
      HBox([ToggleButton(), IntSlider(description='Foobar'),
            Dropdown(options=['foo', 'bar']), Valid()]),
     ])

4. Dropdown resize

dd = Dropdown(description='Foobar', options=['foo', 'bar'])
dd

dd.layout.width = '148px'

cp = ColorPicker(description='foobar')

5. 颜色选择器对齐，简洁版和长版

VBox([HBox([Dropdown(width='148px', options=['foo', 'bar']),
            Button(description='Button')]), cp, HBox([Button(), Button()])])

cp.concise = True

cp.concise = False

cp2 = ColorPicker()

VBox([HBox([Button(), Button()]), cp2])

cp2.concise = True

cp2.concise = False

6. 垂直滑块和进度条的对齐和调整大小

HBox([IntSlider(description='Slider', orientation='vertical', height='200px'),
      FloatProgress(description='Progress', value=50, orientation='vertical', height='200px')])

HBox([IntSlider(description='Slider', orientation='vertical'),
      FloatProgress(description='Progress', value=50, orientation='vertical')])

7. Tabs

t = Tab(children=[FloatText(), IntSlider()], _titles={0: 'Text', 1: 'Slider'})
t

t.selected_index = 1