VLWeb Tree as Accordion

[soa]

Is it possible to style a VLWeb Tree as an accordion? It seems it should be but I'm not sure how to start. Has anyone done this?

[Stewart Marshall]

Hi Jim

By accordion, are you referring to the items in the tree getting bigger/smaller based on a user action?

If so, have look at xDemoWebMoreLess. This shows/hides some labels based on a click and layout content sizing causes the item to resize accrodingly.

Regards

[soa]

I'm looking at something more like a material design expansion panel.

https://material.angular.io/components/ ... n/overview

I guess I could create a reusable part for the panel header and separate rps for each of the children (of which there will be more than one type) then use the tree's methods and events to manage the displaying etcetera.

This is a very common construct on the web (which is why google have a spec for it ) so I was hoping someone had done the work for me!

[Stewart Marshall]

Yep, very common and all subtly different depending on whose library you look at.

As an expanding tree item isn't quite to your taste, how about a this.

This is a tab folder with a ViewStyle of Stacked

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(408) Width(809)

Define_Com Class(#PRIM_TAB) Name(#Tab1) BottomLayoutPriority(4) ComponentVersion(2) DisplayPosition(1) Height(283) Left(125) LeftLayoutPriority(1) Parent(#COM_OWNER) RightLayoutPriority(2) TabPosition(1) Top(54) TopLayoutPriority(3) Width(380) ViewStyle(Stacked)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('Page1') DisplayPosition(1) Height(0) Left(0) Parent(#Tab1) TabPosition(1) TabStop(False) Top(32) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('Page2') DisplayPosition(2) Height(0) Left(0) Parent(#Tab1) TabPosition(2) TabStop(False) Top(64) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('Page3') DisplayPosition(3) Height(0) Left(0) Parent(#Tab1) TabPosition(3) TabStop(False) Top(96) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet4) Caption('Page4') DisplayPosition(4) Height(155) Left(0) Parent(#Tab1) TabPosition(4) TabStop(False) Top(128) Width(380)

End_Com