Page 1 of 1
VLWeb Tree as Accordion
Posted: Wed Dec 06, 2017 2:49 pm
by 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?
Re: VLWeb Tree as Accordion
Posted: Wed Dec 06, 2017 9:46 pm
by 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
Re: VLWeb Tree as Accordion
Posted: Thu Dec 07, 2017 10:16 am
by 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!
Re: VLWeb Tree as Accordion
Posted: Thu Dec 07, 2017 9:36 pm
by 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