Hello jc2,B
I think, I will have this approach to do a such UI.
- Use a Grid Widget with 2 Rows. One for buttons and tabs. Another one for panel.
- In Column Properties of the first row, change Flex Direction to Row, Justification to Center and Alignment to Start.
- For each buttons with arrows, use an Toggle Button Widget. Svg images will be enough to hToave a different display when clicking and in a normal state.
- For each tabs, use a Label Widget. Use a custom CSS stylesheet to control font type, background color ...etc..
- Apply another CSS stylesheet to new label tab selected. Apply back default CSS stylesheet to label tab not anymore selected
- Last thing, how to have a content diferent in each tab, in the second Row in the Grid ?
- Use a Panel Widget for each tabs.
- In Javascript, display only the current panel. So, switch off Visible Property for the Panel linked to Label tab not more selected.
- Put that you need in each panel/
- In Toggle Buttons, in EVENTS, in Pressed event, call the Javascript function to do action needed
- In Label Widget, we have also a Click Event. It is possible to have a Javascript function to select another tab when clicking on it.
Is it helping you ?
Best regards,
Samuel
