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

3 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.

Hi,
I tried viewPath but it don’t want to take it. Is that the bug you are talking about?

image

It gives me a dropdown with views in my project, can I really use it?

Is it possible to add a change style too? To have individual parameter of style for each tab.

hi
@cmallonee i want to add the tab container as a dynamic, for that i have added the viewpath as an object but the view is not coming.


you can only use either viewpath or text, and they are only for the title of the tab.

if you want to show the pipeline overview inside the tab "segment"
than you need to drag an embedded view component inside there while you have the correct tab selected.
in the embeded view you can do the viewpath

@victordcq is correct. If you supply text it will be used, whether you've supplied a viewPath property or not. Right-click the text property, select the option to remove it, and you should then see your View in use.

Unless you're trying to render a View in the body of the Tab Container, and then you need to supply an Embedded View where you see "Drag a component into the container", before you can then set the viewPath of the Embedded View.

Just to clarify, the viewPath prop within the props.tabs arrays are for changing the tab buttons themselves to use a View i.e. So you can create your own tab buttons. The tabs' contents themselves that are shown when a tab is selected however, is as Victor and Cody mention

Hi @cmallonee

i have a question. i want show the icon only to the tab which my mouse hover.

how do i get the my mouse hovering over a particular tab?

one more thing i want to achieve is when i click the tab i want to open popup

can you please guide me

What icon?

You can't force a mouse to move in any way to any position.

I don't understand why you'd represent a tab with the intention of opening a Popup; the View which would be represented within the Tab body should fulfill whatever the Popup would do.

When i hover over a tab i am planning to show setting icon.

Once user click it a popup will open

So in that popup i can do the tab configuration

Example renaming the tab, add additional tab like that

To achieve this, you

  1. MUST render the Tab as a View.
  2. The View being rendered should have a Named Style attached to the root node of the View.
  3. This Named Style should use the hover Element State setting which sets the cursor setting to whatever cursor you'd like. I don't see any cursor which conveys "click me to edit configurations".
  4. The root node of the View should also have an onClick Event which opens your Popup.
1 Like

Ok thanks i will try it out