- ctn_progress: Control: GroupContainer@1.3.0 Variant: AutoLayout Properties: Fill: =RGBA(33, 37, 36, 1) Height: =281 LayoutDirection: =LayoutDirection.Vertical PaddingLeft: =20 PaddingRight: =20 RadiusBottomLeft: =20 RadiusBottomRight: =20 RadiusTopLeft: =20 RadiusTopRight: =20 Width: =568 X: =36 Y: =201 Children: - lb_Title: Control: Label@2.5.1 Properties: AlignInContainer: =AlignInContainer.Stretch Color: =RGBA(255, 255, 255, 1) LayoutMinWidth: =100 PaddingLeft: =20 Text: ="Your Progress" - glr_Progress: Control: Gallery@2.15.0 Variant: Horizontal Properties: FillPortions: =0 Height: =60 Items: =Sequence( 6,1,1) LayoutMinHeight: =50 LayoutMinWidth: =100 TemplatePadding: =0 TemplateSize: =Parent.Width/Self.AllItemsCount-10 Children: - Rectangle: Control: Rectangle@2.3.0 Properties: Fill: '=If( varProgress+1 = ThisItem.Value || varProgress >= ThisItem.Value,RGBA(0, 162, 128, 1),RGBA(42, 46, 45, 1)) ' Height: =2 Visible: =ThisItem.Value<>1 Width: =45 Y: =27 - bd_Number: Control: Badge@0.0.24 Properties: Appearance: ='BadgeCanvas.Appearance'.Outline BasePaletteColor: =RGBA(189, 178, 176, 1) Content: =ThisItem.Value FontColor: '=If( varProgress+1 = ThisItem.Value || varProgress >= ThisItem.Value,RGBA(0, 162, 128, 1),RGBA(42, 46, 45, 1)) ' FontSize: =20 Height: =40 Visible: =varProgress ") Visible: =varProgress>=ThisItem.Value Width: =39 X: =45 Y: =2 - lb_steps: Control: Label@2.5.1 Properties: Align: =Align.Center AlignInContainer: =AlignInContainer.Stretch Color: =RGBA(255, 255, 255, 1) Height: =40 LayoutMinWidth: =100 PaddingLeft: =20 Size: =16 Text: =If(IsBlank(varProgress),0,varProgress) & " of " & glr_Progress.AllItemsCount & " steps completed - Keep going!" - ctn_button: Control: GroupContainer@1.3.0 Variant: AutoLayout Properties: DropShadow: =DropShadow.None LayoutAlignItems: =LayoutAlignItems.Center LayoutDirection: =LayoutDirection.Horizontal LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween LayoutMinHeight: =50 PaddingLeft: =10 PaddingRight: =10 RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Children: - ctn_prev: Control: GroupContainer@1.3.0 Variant: AutoLayout Properties: AlignInContainer: =AlignInContainer.SetByContainer BorderColor: =RGBA(0, 0, 0, 0) BorderThickness: =1 DropShadow: =DropShadow.None FillPortions: =0 Height: =50 LayoutAlignItems: =LayoutAlignItems.Center LayoutDirection: =LayoutDirection.Horizontal LayoutJustifyContent: =LayoutJustifyContent.Center LayoutMinHeight: =40 LayoutMinWidth: =40 PaddingBottom: =10 PaddingLeft: =30 PaddingRight: =20 PaddingTop: =10 RadiusBottomLeft: =100 RadiusBottomRight: =100 RadiusTopLeft: =100 RadiusTopRight: =100 Width: =120 X: =Parent.Width-Self.Width-20 Y: =Parent.Height-Self.Height-60 Children: - imgprev: Control: Image@2.2.3 Properties: Height: =20 Image: = "data:image/svg+xml; utf-8, " & EncodeUrl($"") ImageRotation: =ImageRotation.Rotate180 Width: =20 X: =290 Y: =512 - btnprev: Control: Button@0.0.44 Properties: Align: =Align.Justify Appearance: ='ButtonCanvas.Appearance'.Transparent BorderRadius: =10 FillPortions: =1 Font: =App.Theme.Font FontColor: =RGBA(0, 162, 128, 1) FontSize: =20 FontWeight: =FontWeight.Normal Height: =40 Icon: ="Filter" IconStyle: ='ButtonCanvas.IconStyle'.Outline Layout: ='ButtonCanvas.Layout'.TextOnly LayoutMinWidth: =70 OnSelect: =If(varProgress<= 1,Set(varProgress, Blank()), Set(varProgress,varProgress-1)) PaddingRight: =0 Text: ="Prev" VerticalAlign: =VerticalAlign.Middle Width: =120 - ctn_next: Control: GroupContainer@1.3.0 Variant: AutoLayout Properties: AlignInContainer: =AlignInContainer.SetByContainer BorderColor: =RGBA(0, 0, 0, 0) BorderThickness: =1 DropShadow: =DropShadow.Semilight Fill: =RGBA(0, 162, 128, 1) FillPortions: =0 Height: =50 LayoutAlignItems: =LayoutAlignItems.Center LayoutDirection: =LayoutDirection.Horizontal LayoutJustifyContent: =LayoutJustifyContent.Center LayoutMinHeight: =40 LayoutMinWidth: =40 PaddingBottom: =10 PaddingLeft: =30 PaddingRight: =20 PaddingTop: =10 RadiusBottomLeft: =100 RadiusBottomRight: =100 RadiusTopLeft: =100 RadiusTopRight: =100 Width: =120 X: =Parent.Width-Self.Width-20 Y: =Parent.Height-Self.Height-60 Children: - btnnext: Control: Button@0.0.44 Properties: Align: =Align.Justify Appearance: ='ButtonCanvas.Appearance'.Transparent BorderRadius: =10 FillPortions: =1 Font: =App.Theme.Font FontColor: =RGBA(255, 255, 255, 1) FontSize: =20 FontWeight: =FontWeight.Normal Height: =40 Icon: ="Filter" IconStyle: ='ButtonCanvas.IconStyle'.Outline Layout: ='ButtonCanvas.Layout'.TextOnly LayoutMinWidth: =70 OnSelect: =If(IsBlank(varProgress), Set(varProgress, 1),If(varProgress>= glr_Progress.AllItemsCount,Set(varProgress, Blank()), Set(varProgress,varProgress+1))) PaddingRight: =0 Text: =" Next" VerticalAlign: =VerticalAlign.Middle Width: =120 - imgnext: Control: Image@2.2.3 Properties: Height: =20 Image: = "data:image/svg+xml; utf-8, " & EncodeUrl($"") Width: =20 X: =290 Y: =512

Stepper UI

More Snippets from this Author

Videos from this Author