Tabbed interface is a very useful element in GUI programming to organize your input elements and reduce the size of interface. If you have groups of related data to be entered by the user, then use tab and tab group to create a clean and an intuitive interface. In this tutorial you will learn how to create a tabbed interface using pySimpleGUI package in Python. So let’s begin.
Tabbed Interface- Tabs and Tab Group
If you have ever used those options in an application where you need to input data for multiple aspects of it, then you surely have used a tabbed interface. It displays a container area and button like options at the top. On selecting one of the options from this group, you are presented with the entry elements available for that option. The whole set of such tabs is called a Tab Group to group related sections in one GUI interface rather than making different data entry forms and invoking them individually.
If you want to create such tabbed interface in your Python Application you can use the Tab and TabGroup elements of pySimpleGUI package.
Tab
Tab Element is a container element which uses a string as its tab title and a layout to fill with the input elements like Text, Input, Check Boxes, Radio Buttons and so on. It does not have individual existence in a Python GUI interface. It can only be added in a TabGroup to make more than one Tab interfaces for different sub-tasks of a bigger tasks. The syntax of creating a tab is
Tab( tab-title, tab-layout, [other optional parameters])
The following are the other important attributes to be passed as arguments to define a tab
Title– String, is the text of the tab that you wish to assign, reflecting the purpose of the elements of the container tab
Layout-List of elements, is the list of elements defined to create the interface required to get the input from user
background_color– String, set a color name from the allowed Python colors to paint the color to the title of the Tab
Font– String, set the font family for the text on a specific tab
Disabled-Boolean, set the value to enable or disable the tab so that you can allow the user to interact or not in the specific tab
Key/K –String, is the key by which a specific tab will be identified in the code, like it can be used to disable or enable it
Tooltip-String, is the text you wish the user to read in form of a tooltip appearing with a resting mouse arrow
Visible– Boolean, to make a tab visible or invisible for the user
Element_justification– String, set to “left”,”right” or “center” to justify the elements in the tab
TabGroup
A tabgroup is a group of tabs collected as a single unit with a single task to be done in multiple tasks. A tab contains only tabs and tabs contain the elements. Syntax for creating a TabGroup is as following-
TabGroup(layout,[other parameters])
The following are the other important attributes to be passed as arguments to define a TabGroup
Layout-List of tabs, is the list of tabs already created to define the interface for the user
tab_location– String, To define where the tabs must be defined. The options are left, right, top, bottom, lefttop, leftbottom, righttop, rightbottom, bottomleft, bottomright, topleft, topright
title_color– String, set a color name from the allowed Python colors to paint the color to the title text of the TabGroup
tab_background_color– String, choose a name from the allowed Python colors that paints the color to the background of the Tabs in TabGroup
selected_title_color– String, set a color name from the allowed Python colors to give color to the title text of the selected tab in a TabGroup
selected_background_color– String, name from the allowed Python colors that paints the color of the background of the title text of selected tab in a TabGroup
background_color– String, a name from the allowed Python colors that paints the color of the background of a TabGroup
Font– String, set the font family name for the text on a specific TabGroup
border_width– Integer, define the border of the TabGroup
Key/K –String, is the key by which as specific tabgroup will be identified in the code. Using the key you can control appearance or visibility of the TabGroup
Tooltip-String, is the text you wish the user to read in form of a tooltip
Visible– Boolean, to make a tab visible or invisible for the user
Example of Tabbed Interface using Tab and TabGroup
import PySimpleGUI as sg #define layout layout1 = [[sg.Text('Name', size=(10,1)),sg.Input('',key='eName')], [sg.Text('Date of Birth', size=(10,1)),sg.Input('',key='eDob')], [sg.Text('Phone No', size=(10,1)),sg.Input('',key='ePhone')], [sg.Text('Email ID', size=(10,1)),sg.Input('',key='eEmail')], [sg.Button('Save Personal Details')]] layout2=[[sg.Text('Highest Qualfication', size=(15,1)),sg.Input('',key='eQual')], [sg.Text('Year of Qualifying', size=(15,1)),sg.Input('',key='eYoq')], [sg.Text('Grade', size=(15,1)),sg.Input('',key='eGrade')], [sg.Text('University/College', size=(15,1)),sg.Input('',key='eQUniv')], [sg.Button('Save Education Details')]] layout3= [[sg.Text('Last Job', size=(10,1)),sg.Input('',key='eLastJ')], [sg.Text('From Date', size=(10,1)),sg.Input('',key='eJFdt')], [sg.Text('To Date', size=(10,1)),sg.Input('',key='eJTdt')], [sg.Text('Company Name', size=(10,1)),sg.Input('',key='eLJcmpy')], [sg.Button('Save Experience Details')]] #Define Layout with Tabs tabgrp = [[sg.TabGroup([[sg.Tab('Personal Details', layout1, title_color='Red',border_width =10, background_color='Green', tooltip='Personal details', element_justification= 'center'), sg.Tab('Education', layout2,title_color='Blue',background_color='Yellow'), sg.Tab('Experience', layout3,title_color='Black',background_color='Pink', tooltip='Enter your Lsst job experience')]], tab_location='centertop', title_color='Red', tab_background_color='Purple',selected_title_color='Green', selected_background_color='Gray', border_width=5), sg.Button('Close')]] #Define Window window =sg.Window("Tabs",tabgrp) #Read values entered by user event,values=window.read() #access all the values and if selected add them to a string window.close()
Output



Hi there
A few, maybe helpful, comments
First, thank you for using the coding guidelines published by the PySimpleGUI project. It’s really appreciated as it propagates consistency across the entire internet. The result is that anyone can pick up someone else’s PySimpleGUI program and very quickly understand it.
These 2 suggestions are not critically important.
1. The Input element’s default value doesn’t need to be set. The Demo Programs don’t set it anywhere that I know of. Removing the ‘;’ means less code, less to understand, and simpler.
2. Sizes for Text Elements and Input elements can be a single int. If you’ve got a Text Element that normally has size=(15,1), you can use size=15 now. Or, to make it even shorter, s=15. Same with the input elements.
3. The new Push element removes the need to put any sizes in some situations. Here is how I changed your first row:
sg.Text(‘Name’), sg.Push(background_color=’green’), sg.Input(key=’eName’)
I had to hardcode the background color because the tab’s background color is hard coded. Makes me wonder if I should consider some kind of background color inheritance for container elements.
Changing your layout 1 to this:
“`python
layout1 = [[sg.Text(‘Name’), sg.Push(background_color=’green’), sg.Input(key=’eName’)],
[sg.Text(‘Date of Birth’), sg.Push(background_color=’green’), sg.Input(key=’eDob’)],
[sg.Text(‘Phone No’), sg.Push(background_color=’green’), sg.Input(key=’ePhone’)],
[sg.Text(‘Email ID’), sg.Push(background_color=’green’), sg.Input(key=’eEmail’)],
[sg.Button(‘Save Personal Details’)]]
“`
Produced similar / the same results as the hard coded sizes. Experiment with it and see what you think. Push is really great for centering things. You put a push on each side of the thin(s) you want to center.