I'm looking for other creative ways to build a toggle to hide or show a sub feature or function on an app screen without using the default provided toggle control within Power Apps. I'm looking for approaches that elevate the UI experience of the app.
I found the below and want to see I can find more approaches to compare.
- conToggle:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(202, 202, 202, 1)
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 0.8)
Height: =32
RadiusBottomLeft: =16
RadiusBottomRight: =16
RadiusTopLeft: =16
RadiusTopRight: =16
Width: =32
X: =Parent.Width - Self.Width - 2
Y: =(64 - Self.Height)/2
Children:
- Image3_14:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =20
Image: |-
="data:image/svg+xml," & If(
varToggle = true,
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0,0,256,256'>
<g fill='#005273' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'><g transform='scale(3.55556,3.55556)'><path d='M46.023,59.542c-1.008,0 -2.016,-0.378 -2.794,-1.137l-20.046,-19.561c-0.771,-0.752 -1.206,-1.785 -1.206,-2.863c0,-1.078 0.435,-2.11 1.206,-2.863l20.007,-19.522c1.582,-1.542 4.113,-1.512 5.657,0.069c1.542,1.581 1.512,4.114 -0.069,5.656l-17.074,16.66l17.113,16.698c1.581,1.542 1.611,4.075 0.069,5.656c-0.783,0.803 -1.823,1.207 -2.863,1.207z'></path></g></g>
</svg>"
),
EncodeUrl(
"
<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0,0,256,256'>
<g fill='#005273' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'><g transform='scale(3.55556,3.55556)'><path d='M25.977,59.542c-1.04,0 -2.079,-0.403 -2.863,-1.207c-1.542,-1.581 -1.512,-4.114 0.069,-5.656l17.113,-16.698l-17.074,-16.66c-1.581,-1.542 -1.611,-4.075 -0.069,-5.656c1.544,-1.582 4.076,-1.612 5.657,-0.069l20.008,19.522c0.771,0.752 1.206,1.785 1.206,2.863c0,1.078 -0.435,2.11 -1.206,2.863l-20.047,19.56c-0.779,0.76 -1.787,1.138 -2.794,1.138z'></path></g></g>
</svg>"
)
)
Width: =20
X: =(Parent.Width - Self.Width) / 2 - 1
Y: =(Parent.Height - Self.Height)/2
- Button1_1:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =ColorFade(Self.Fill, -15%)
Color: =RGBA(0, 0, 0, 0)
DisabledBorderColor: =RGBA(166, 166, 166, 1)
Fill: =RGBA(0, 0, 0, 0)
Font: =Font.'Open Sans'
Height: =32
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =
OnSelect: |-
=If(
varSideNavWidth = 278,
Set(varSideNavWidth, 96),
Set(varSideNavWidth, 278 )
)
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Text: =
Width: =32
42
Share
Report
All responses (
Answers (
