[PYTHON] Ajustez le style et la disposition des widgets avec ipywidgets

J'ai essayé de créer une interface graphique interactive avec Jupyter, mais la largeur du curseur était petite et il était difficile à utiliser, et je ne savais pas comment organiser plusieurs contrôles, alors je l'ai étudié.

Ajuster le style du widget

Vous pouvez ajuster le style avec une description de type CSS

Forme basique

La largeur est étroite et difficile à utiliser, je souhaite donc effectuer divers réglages

from ipywidgets import IntSlider

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")

Essayez de changer la largeur et la hauteur

Spécifiez une largeur de 60% et une hauteur de 100 pixels.

from ipywidgets import IntSlider, Layout

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
                         orientation='horizontal',
                         layout=Layout(width='60%', height='100px'))

Essayez d'ajouter une bordure

J'ajouterai également une bordure.

from ipywidgets import IntSlider, Layout

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
                         orientation='horizontal',
                         layout=Layout(width='60%', height='100px', border='solid'))

Autres ajustements de style

Chaque widget a également son propre style. Par exemple, la poignée du curseur peut être colorée.

from ipywidgets import IntSlider

year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year1.style.handle_color = 'lightblue'
year1

La poignée est maintenant bleu clair.

Vous pouvez voir les styles disponibles ci-dessous.

year1.style.keys

Vous pouvez ajuster divers autres styles. La documentation officielle répertorie les styles disponibles. Layout and Styling of Jupyter widgets — Jupyter Widgets 7.5.1 documentation

Changer la mise en page

Si vous disposez de plusieurs widgets, vous pouvez également les organiser en fonction de la disposition.

Alignez côte à côte et sur l'étagère

Les widgets peuvent être placés dans des conteneurs horizontaux (HBox) et verticaux (VBox).

from ipywidgets import IntSlider, Layout, HBox, VBox

year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")
year5 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year5: ")
year6 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year6: ")

VBox([HBox([year1,year2,year3]),HBox([year4,year5,year6])])

Disposer en 2x2

Vous pouvez organiser les widgets dans une disposition 2x2.

from ipywidgets import IntSlider, TwoByTwoLayout
year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")

TwoByTwoLayout(top_left=year1,
               top_right=year2,
               bottom_right=year3,
               bottom_left=year4)

Alignez-vous sur la grille

Vous pouvez placer des widgets sur une grille de n'importe quelle taille n x m.

from ipywidgets import IntSlider, GridspecLayout

grid = GridspecLayout(2, 3)

grid[0,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-1: ")
grid[0,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-2: ")
grid[0,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-3 ")
grid[1,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-1: ")
grid[1,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-2: ")
grid[1,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-3: ")

grid

Autres mises en page

Vous pouvez le trouver dans les documents suivants sur le site officiel. Vous pouvez également utiliser la mise en page d'application de type application. Using Layout Templates — Jupyter Widgets 7.5.1 documentation

Résumé

Si vous utilisez Jupyter, vous n'avez pas besoin de créer une interface utilisateur sophistiquée, mais si vous rendez les contrôles plus faciles à utiliser ou si vous paraissez un peu mieux, ce sera plus facile à utiliser. J'espère que cela sera utile pour ceux qui veulent faire de telles choses.