- conAccBorders: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: BorderColor: =RGBA(226, 232, 240, 1) BorderThickness: =1 DropShadow: =DropShadow.Light Fill: =RGBA(255, 255, 255, 1) Height: =btnAccBItem1.Height + btnAccBItem2.Height + btnAccBItem3.Height RadiusBottomLeft: =8 RadiusBottomRight: =8 RadiusTopLeft: =8 RadiusTopRight: =8 Width: =502 Children: - lblAccBTitle1: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =37 PaddingLeft: =16 Size: =11 Text: ={{vartitle1}} Width: =Parent.Width - 52 X: =0 Y: =0 - lblAccBBody1: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =100 PaddingBottom: =16 PaddingLeft: =16 PaddingRight: =50 Size: =10 Text: ={{varbody1}} Visible: =varOpenAccordionItemId = 1 Width: =Parent.Width X: =0 Y: =37 - icoAccBArrow1: Control: Image@2.2.3 Properties: Height: =20 Image: | ="data:image/svg+xml," & EncodeUrl( "" ) Width: =20 X: =Parent.Width - Self.Width - 16 Y: =8.5 - btnAccBItem1: Control: Classic/Button@2.2.0 Properties: Align: =Align.Left BorderColor: =RGBA(0, 0, 0, 0) BorderStyle: =BorderStyle.None Color: =RGBA(15, 23, 42, 1) DisabledBorderColor: =RGBA(166, 166, 166, 1) DisabledColor: =RGBA(15, 23, 42, 1) Fill: =RGBA(0, 0, 0, 0) Font: =Font.'Open Sans' Height: =If(varOpenAccordionItemId = 1, 137, 37) HoverColor: =RGBA(15, 23, 42, 1) HoverFill: =RGBA(0, 0, 0, 0) OnSelect: | =UpdateContext({ varOpenAccordionItemId: If(varOpenAccordionItemId = 1, Blank(), 1) }); RemoveIf(varColAnimationTriggers, itemID = 1); Collect(varColAnimationTriggers, { itemID: 1, timestamp: Text(Now(), "yyyymmddhhmmss") }); PaddingLeft: =0 PaddingRight: =0 PressedBorderColor: =RGBA(0, 0, 0, 0) PressedColor: =RGBA(15, 23, 42, 1) PressedFill: =RGBA(0, 0, 0, 0) RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Size: =11 Text: ="" Width: =Parent.Width X: =0 Y: =0 - rectAccBDivider1: Control: Rectangle@2.3.0 Properties: Fill: =RGBA(226, 232, 240, 1) Height: =1 Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height - 1 - lblAccBTitle2: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =37 PaddingLeft: =16 Size: =11 Text: ={{vartitle2}} Width: =Parent.Width - 52 X: =0 Y: =btnAccBItem1.Height - lblAccBBody2: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =100 PaddingBottom: =16 PaddingLeft: =16 PaddingRight: =50 Size: =10 Text: ={{varbody2}} Visible: =varOpenAccordionItemId = 2 Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height + 37 - icoAccBArrow2: Control: Image@2.2.3 Properties: Height: =20 Image: | ="data:image/svg+xml," & EncodeUrl( "" ) Width: =20 X: =Parent.Width - Self.Width - 16 Y: =btnAccBItem1.Height + 8.5 - btnAccBItem2: Control: Classic/Button@2.2.0 Properties: Align: =Align.Left BorderColor: =RGBA(0, 0, 0, 0) BorderStyle: =BorderStyle.None Color: =RGBA(15, 23, 42, 1) DisabledBorderColor: =RGBA(166, 166, 166, 1) DisabledColor: =RGBA(15, 23, 42, 1) Fill: =RGBA(0, 0, 0, 0) Font: =Font.'Open Sans' Height: =If(varOpenAccordionItemId = 2, 137, 37) HoverColor: =RGBA(15, 23, 42, 1) HoverFill: =RGBA(0, 0, 0, 0) OnSelect: | =UpdateContext({ varOpenAccordionItemId: If(varOpenAccordionItemId = 2, Blank(), 2) }); RemoveIf(varColAnimationTriggers, itemID = 2); Collect(varColAnimationTriggers, { itemID: 2, timestamp: Text(Now(), "yyyymmddhhmmss") }); PaddingLeft: =0 PaddingRight: =0 PressedBorderColor: =RGBA(0, 0, 0, 0) PressedColor: =RGBA(15, 23, 42, 1) PressedFill: =RGBA(0, 0, 0, 0) RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Size: =11 Text: ="" Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height - rectAccBDivider2: Control: Rectangle@2.3.0 Properties: Fill: =RGBA(226, 232, 240, 1) Height: =1 Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height + btnAccBItem2.Height - 1 - lblAccBTitle3: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =37 PaddingLeft: =16 Size: =11 Text: ={{vartitle3}} Width: =Parent.Width - 52 X: =0 Y: =btnAccBItem1.Height + btnAccBItem2.Height - lblAccBBody3: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =100 PaddingBottom: =16 PaddingLeft: =16 PaddingRight: =50 Size: =10 Text: ={{varbody3}} Visible: =varOpenAccordionItemId = 3 Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height + btnAccBItem2.Height + 37 - icoAccBArrow3: Control: Image@2.2.3 Properties: Height: =20 Image: | ="data:image/svg+xml," & EncodeUrl( "" ) Width: =20 X: =Parent.Width - Self.Width - 16 Y: =btnAccBItem1.Height + btnAccBItem2.Height + 8.5 - btnAccBItem3: Control: Classic/Button@2.2.0 Properties: Align: =Align.Left BorderColor: =RGBA(0, 0, 0, 0) BorderStyle: =BorderStyle.None Color: =RGBA(15, 23, 42, 1) DisabledBorderColor: =RGBA(166, 166, 166, 1) DisabledColor: =RGBA(15, 23, 42, 1) Fill: =RGBA(0, 0, 0, 0) Font: =Font.'Open Sans' Height: =If(varOpenAccordionItemId = 3, 137, 37) HoverColor: =RGBA(15, 23, 42, 1) HoverFill: =RGBA(0, 0, 0, 0) OnSelect: | =UpdateContext({ varOpenAccordionItemId: If(varOpenAccordionItemId = 3, Blank(), 3) }); RemoveIf(varColAnimationTriggers, itemID = 3); Collect(varColAnimationTriggers, { itemID: 3, timestamp: Text(Now(), "yyyymmddhhmmss") }); PaddingLeft: =0 PaddingRight: =0 PressedBorderColor: =RGBA(0, 0, 0, 0) PressedColor: =RGBA(15, 23, 42, 1) PressedFill: =RGBA(0, 0, 0, 0) RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Size: =11 Text: ="" Width: =Parent.Width X: =0 Y: =btnAccBItem1.Height + btnAccBItem2.Height

Accordion - Borders

Implementation