Perspective Tab Container

I’m working with the tab container in popup screens. We have a specified tab configuration that includes using Icons on the tabs to represent functionality. I’d like to also include text on each tab for clarity. I am not finding a way to have both an Icon and text on the tabs. Is this possible with the Tab Container component in Perspective?

Thanks.

Since Tabs can render as either text or Views, you just need to supply a View which has both an Icon and a Label present. (Update: documentation)

Screen Shot 2020-06-08 at 9.50.25 AM

Here’s how I did this:

  1. Right-click props.tabs[1], and select “Change To” and select “Object”.
  2. Expand props.tabs[1] and select “Add Object Member”, then supply a key of “viewPath”.
  3. Supply a valid viewPath.

Screen Shot 2020-06-08 at 9.50.14 AM
In my project, there exists a View (“Experimentation/Repl”) which contains an Icon and a Label. If your View requires parameters, you can also supply a viewParams object alongside viewpath.

Screen Shot 2020-06-08 at 9.54.25 AM

NOTE: In 8.0.13 there might be a bug which prevents tabs which use Views from rendering their borders as expected. We’re looking into whether or not this is expected. In the example I provided, I also cheated and supplied borders of my own to simulate the borders as they SHOULD appear.

Screen Shot 2020-06-08 at 9.56.41 AM

2 Likes

Thanks for the walkthrough. I have the border issue as well, but the temporary fix of yours works for now :slight_smile:

1 Like

This still appears to be an issue in 8.1.5. @cmallonee is there an updated status of what the expected behavior should be?

The ticket has not been touched (aside from prioritization) since it was opened, but after looking at again, I suspect the ticket should probably be closed and this behavior should probably be considered to be “expected”. That’s because while we don’t display the borders if a View is used for the tab a user could always supply their own borders. If we DID supply borders, then users would probably be unable to supply their own. It’s probably better to err on the side of giving users that flexibility instead of forcing potentially undesirable borders.