[PYTHON] Passen Sie den Stil und das Layout von Widgets mit ipywidgets an

Ich habe versucht, mit Jupyter eine interaktive Benutzeroberfläche zu erstellen, aber die Breite des Schiebereglers war gering und schwierig zu verwenden. Ich wusste nicht, wie ich mehrere Steuerelemente anordnen sollte, also habe ich sie untersucht.

Anpassen des Stils des Widgets

Sie können den Stil mit einer CSS-ähnlichen Beschreibung anpassen

Grundform

Die Breite ist schmal und schwer zu bedienen, daher möchte ich verschiedene Einstellungen vornehmen

from ipywidgets import IntSlider

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

Versuchen Sie, die Breite und Höhe zu ändern

Geben Sie 60% Breite und 100px Höhe an.

from ipywidgets import IntSlider, Layout

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

Versuchen Sie, Border hinzuzufügen

Ich werde auch einen Rand hinzufügen.

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'))

Andere Stilanpassungen

Jedes Widget hat auch seinen eigenen Stil. Beispielsweise kann der Griff des Schiebereglers farbig sein.

from ipywidgets import IntSlider

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

Der Griff ist jetzt hellblau.

Sie können die verfügbaren Stile unten sehen.

year1.style.keys

Sie können verschiedene andere Stile anpassen. In der offiziellen Dokumentation sind die verfügbaren Stile aufgeführt. Layout and Styling of Jupyter widgets — Jupyter Widgets 7.5.1 documentation

Ändern Sie das Layout

Wenn Sie mehrere Widgets haben, können Sie diese auch entsprechend dem Layout anordnen.

Richten Sie sich nebeneinander und im Regal aus

Widgets können in horizontalen Containern (HBox) und vertikalen Containern (VBox) platziert werden.

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])])

In 2x2 anordnen

Sie können Widgets in einem 2x2-Layout anordnen.

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)

Richten Sie sich in der Startaufstellung aus

Sie können Widgets in einem Raster beliebiger Größe n x m platzieren.

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

Andere Layouts

Sie finden es in den folgenden Dokumenten auf der offiziellen Website. Sie können auch ein App-ähnliches App-Layout verwenden. Using Layout Templates — Jupyter Widgets 7.5.1 documentation

Zusammenfassung

Wenn Sie Jupyter verwenden, müssen Sie keine ausgefallene Benutzeroberfläche erstellen, aber ich denke, es wird einfacher zu verwenden sein, wenn Sie die Verwendung der Steuerelemente vereinfachen oder ein wenig besser aussehen. Ich hoffe, es ist hilfreich für diejenigen, die solche Dinge tun wollen.