Is there a Tab Bar component?

Anvil Q&A
1

I’m looking to see if anybody has created a custom Tab Bar component?

Here’s kind of what I’m thinking…

one selected
^ One tab is selected, with it’s own content showing in the main area.

twoselected
^ Two tab is selected, with it’s own content showing in the main area.

1 Like
2

linked topic where @robert used tabs as you describe: Machine Learning Competition App

2 Likes
3

Here’s a simple proof of concept, though better ones may exist :

https://anvil.works/build#clone:AQI6KX3TQHSRRYO6=QQHOWSI6JDEGCKDHPQQGZP7G

edit @stucork beat me to it :slight_smile: though my example is pure Python with no CSS.

3 Likes
4

ah yes - I don’t think @robert did end up using css in the end - I changed the link to his post which has the image of his tab structure…

He essentially did 2 card components - 1 above (for the tabs) and 1 below for the content. He changed the background colours of each tab on click (I think he used a button for tabs). And changed the space above and below each card to None

1 Like
5

@stucork is correct. I did it without CSS. It would definitely look better if you took the time to set up a custom role for the buttons and then tweaked the CSS. But it works and looks decent.

The only real trick is to hide and show the cards (or whatever really) based on the click events of the tab buttons. For one of my tabs I have it reload on every click to update it’s content (which is based on data from a data table).

If you have a LOT of content you may think about dynamically removing and adding the tab content so it doesn’t take too long to load the initial page.

5 Likes
6

Good ideas. Here’s my first attempt at using Cards and Buttons…

The only thing I can’t figure out is how to get all the buttons to be contiguous, with no space between them:

tabbar
tabbar1580×183 3.31 KB

https://anvil.works/build#clone:HVR7F6B74YT2YOSG=2NMRGV6LSOIR5GGWFAXKQ34K

7

Make sure they are in a flow panel, and set the flow panel spacing accordingly.

2 Likes
8

That did it. Thanks!

9

If you click anywhere on the form, the selected button will lose the highlight.
The following code allows to keep it highlighted even after it loses the focus. For the flow_panel_tabs_show to work you need to add it to the flow panel’s events, or you could just assign the role from the IDE.

  def button_1_click(self, **event_args):
    self.highlight_tab_button(event_args['sender'])
    self.label_1.text = "Hello from Tab 1"

  def button_2_click(self, **event_args):
    self.highlight_tab_button(event_args['sender'])
    self.label_1.text = "Hello from Tab 2"

  def button_3_click(self, **event_args):
    self.highlight_tab_button(event_args['sender'])
    self.label_1.text = "Hello from Tab 3"
    
  def highlight_tab_button(self, button):
    for b in button.parent.get_components():
      b.role = ''
    button.role = 'raised'

  def flow_panel_tabs_show(self, **event_args):
    self.button_1.role = 'raised'
3 Likes