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?
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)
Here’s how I did this:
Right-click props.tabs[1], and select “Change To” and select “Object”.
Expand props.tabs[1] and select “Add Object Member”, then supply a key of “viewPath”.
Supply a valid viewPath.
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.
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.
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.
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
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.
The View being rendered should have a Named Style attached to the root node of the View.
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".
The root node of the View should also have an onClick Event which opens your Popup.