Explore

Font Slider

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Container

2x Image

1x Modern Slider

Procedure

Step 1 - create main container

Add a new Horizontal Container PCF, call it "font_slider" with this "DropShadow" property:

DropShadow.Semilight

Step 2 - create content

Add a new Image object, call it "paragraph_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_8555_9)'> <path fill-rule='evenodd' clip-rule='evenodd' d='M18 3C18.5523 3 19 3.44772 19 4C19 4.51283 18.614 4.93551 18.1166 4.99327L18 5H17V19H18C18.5523 19 19 19.4477 19 20C19 20.5128 18.614 20.9355 18.1166 20.9933L18 21H10C9.44772 21 9 20.5523 9 20C9 19.4872 9.38604 19.0645 9.88338 19.0067L10 19H11V14H9.5C6.46243 14 4 11.5376 4 8.5C4 5.53652 6.34378 3.12046 9.27879 3.00437L9.5 3H18ZM15 5H13V19H15V5ZM11 5H9.5C7.567 5 6 6.567 6 8.5C6 10.3686 7.46427 11.8951 9.30796 11.9948L9.5 12H11V5Z' fill='#540AFF'/> </g> <defs> <clipPath id='clip0_8555_9'> <rect width='24' height='24' fill='white'/> </clipPath> </defs> </svg>")

Add a new Text Slider PCF, call it "slider" with this "BasePaletteColor" property:

RGBA(78, 69, 221, 1)

Add a new Image object, call it "heading_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_8555_15)'> <path d='M13 3C13.5128 3 13.9355 3.38604 13.9933 3.88338L14 4V20C14 20.5523 13.5523 21 13 21C12.4872 21 12.0645 20.614 12.0067 20.1166L12 20V13H5V20C5 20.5523 4.55228 21 4 21C3.48717 21 3.06449 20.614 3.00673 20.1166L3 20V4C3 3.44772 3.44772 3 4 3C4.51283 3 4.93551 3.38604 4.99327 3.88338L5 4V11H12V4C12 3.44772 12.4477 3 13 3ZM19.0001 13.5188V20.0001C19.0001 20.5524 18.5524 21.0001 18.0001 21.0001C17.4478 21.0001 17.0001 20.5524 17.0001 20.0001V15.3662C16.5471 15.6283 15.9624 15.4963 15.6681 15.0548C15.3617 14.5953 15.4859 13.9744 15.9454 13.668L17.4299 12.6784C18.101 12.2309 19.0001 12.7121 19.0001 13.5188Z' fill='#540AFF'/> </g> <defs> <clipPath id='clip0_8555_15'> <rect width='24' height='24' fill='white'/> </clipPath> </defs> </svg>")

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_font_slider = Horizontal Container

svg_paragraph_icon, svg_heading_icon = Image

slpcf_slider = Modern Slider

YAML Output

⁠

Used Colours

Container Colour - #FFFFFF

Slider Colour - #4E45DD

Slider Background Colour - #CDCDC9

⁠

← Multiple-step Tooltip⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.