Textual is a Python package for creating beautiful terminal-based graphical interfaces.
Textual widgets support docking. When you dock a widget, the widget is removed from the layout and fixed in a static location. You can dock a widget to the following four positions:
top
right
bottom
left
A docked widget will not scroll out of view like widgets that are inside of a layout. You can use a docked widget for a header, footer, or sidebar.
You need to use a CSS property to dock a widget: dock: <EDGE>. The <EDGE> variable needs to be one of the values from the list above.
Open up your text editor to create a file called dock.tcss. Then enter the following code:
Here you are creating a selector for a widget with the id of “sidebar”. You dock this widget to the left-hand side of the screen. You set the foreground color to white and the background to red.
Open up your Python editor and create a dock.py file with this code inside it:
Here, you create a Static widget with some text inside, which will be your sidebar. Then, you create four buttons, which will appear to the right of the sidebar.
When you run this code, you will see something like this:
The buttons are set to be abnormally large so that a scrollbar appears. Notice that as you scroll through the buttons, the sidebar stays on the side and doesn’t scroll out of view.
You can dock multiple widgets to the same edge of the screen or to different edges if you want to. Be careful when you do, as the first widget yielded will appear below any widgets yielded after it. You can cause sidebars to overlap on accident, so practice this skill. Only create a few sidebars or you won’t have enough space for your regular widgets!
Want to Learn More Textual?
This tutorial is based on a chapter from my latest book, Creating TUI Applications with Textual and Python.
