如何在 Jupyter 中設定每個下拉選單部件的對齊方式？

---

我們將使用 HTML 和 CSS 來調整 Jupyter 中下拉選單部件的對齊方式。我們可以透過向下拉選單部件新增某些 CSS 類來修改其對齊方式。這使我們能夠將下拉選單並排或上下放置在 Jupyter 筆記本中，使其看起來更美觀。這是一個簡單的幫助我們調整 Jupyter 中下拉選單部件對齊方式並改善使用者體驗的方法。

示例中使用了以下語法：

Dropdown()

Dropdown() 是一個內建函式，它遵循名為 ipywidgets 的模組，並逐個構建多個專案的列表。

Layout()

Layout() 函式是 ipywidgets 模組的一個類，允許使用者自定義部件的佈局。

Select(multiple=True/False, items=[list_names], label='Select Letter',style_='width:300px')

Select() 方法連線到下拉選單部件，並有一些引數，例如：

• multiple - 將值設定為 True 表示允許選擇多個選項，而 false 表示只允許選擇單個選項。

• items - 為下拉選單部件設定列表名稱。

• label - 此引數是一個字串，用於指定下拉選單的標籤。標籤顯示在下拉選單上方，有助於識別其用途。

• style - 此引數指定下拉選單部件的寬度。

Btn()

Btn() 方法用於建立下拉選單部件的按鈕，並接受一些引數來設定按鈕樣式。

安裝要求：

pip install ipywidgets

ipywidgets 模組包含 Jupyter 筆記本的互動式部件。可以使用 pip install 命令安裝。

示例 1

在以下示例中，我們將使用 ipywidgets 包建立兩個下拉選單。第一個下拉選單標有“品牌”，其專案選擇為“Apple”、“小米”和“Redmi”。第二個下拉選單標有“金融科技”，包括“Phone Pay”、“Bharat Pay”和“G-Pay”選項。IPython.display 模組中的 show 函式用於顯示兩個下拉選單。layout 引數和 widgets 用於指定每個下拉選單的佈局。layout 類。第一個下拉選單居中，第二個下拉選單位於右側。

import ipywidgets as widgets
from IPython.display import display
dropdown1 = widgets.Dropdown(
   options=['Apple', 'Xiomi', 'Redmi'],
   description='BRAND:',
   layout=widgets.Layout(width='70%', align_self='center')
)
dropdown2 = widgets.Dropdown(
   options=['Phone Pay', 'Bharat Pay', 'G-Pay'],
   description='FIN-TECH:',
   layout=widgets.Layout(width='70%', align_self='flex-end')
)
display(dropdown1, dropdown2)

輸出

示例 2

在以下示例中，我們將顯示下拉選單部件中的多個字母。它首先提到名為 ipyvuetify 的包。然後，它使用內建方法 Btn 建立按鈕，該方法接受一些引數，例如 color（設定按鈕顏色）、children（設定提交選項）和 style_（設定按鈕寬度），並將它們儲存在變數 button 中。然後，下拉選單提供多個選項，包括字母“A”、“B”、“M”、“T”、“H”和“K”。下拉選單標有“選擇字母”，寬度為 300 畫素，並存儲在變數 dropdown 中。下拉選單和提交按鈕都使用帶有 div 標籤和 d-flex flex-row 類的 v.Html 元素呈現。最終結果是，提交按鈕顯示為綠色，文字為“提交”，寬度為 300 畫素。

# Select multiple letters from the dropdown widget
import ipyvuetify as v
button = v.Btn(color='green',children=['Submit'],style_= 'width:300px')
dropdown = v.Select(multiple=True, items=['A','B','M','T','H','K'], label='Select Letter',style_='width:300px')
v.Html(tag='div',class_='d-flex flex-row',children=[
   v.Html(tag='div',class_='d-flex flex-row',children=[dropdown, button]) 
])

輸出

示例 3

在以下示例中，我們將展示如何從下拉選單中選擇單個列表。它首先匯入名為 ipyvuetify 的模組並將其物件引用為 v。然後初始化按鈕變數，該變數透過建立按鈕來儲存，該按鈕接受一些引數：color、children 和 style_。接下來，它將使用內建方法 select，該方法接受一些引數，例如 multiple（設定為 false 表示它只允許從下拉列表中選擇一項）、items（設定州名稱列表）和 label（用作佔位符）。

# Select a single list from dropdown
import ipyvuetify as v
button = v.Btn(color='blue',children=['Submit'],style_= 'width:100px')
button
dropdown = v.Select(multiple=False, items=['Maharastra', 'Telengana', 'Uttar Pradesh', 'Himachal Pradesh', 'Assam'], label='State Name')
dropdown

輸出

結論

我們討論了在 Jupyter 中設定每個下拉選單部件對齊方式的三種不同方法。以上所有程式都使用 ipyvuetify 模組生成帶有下拉選單和提交按鈕的使用者介面。這種型別的介面代表了使用者的新互動體驗，允許他們根據自己的選擇從列表中選擇多個專案。