slider button

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