slider button

potatochips — Thu, 12 Mar 2020 05:49:03 GMT

How to make a slider button that when I click the next arrow it will generate for the next panel.

Re: slider button

sdidier — Thu, 12 Mar 2020 07:39:59 GMT

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