Skip to content
The component helps you to increase and decrease your value.
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create counter container
Add a new Horizontal Container PCF object, call it "counter" with this "DropShadow" property:
DropShadow.Semibold
Step 2 - add content for the container
Add a new Image object, call it "rem_count" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='20' height='3' viewBox='0 0 20 3' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.718307 1.35205H19.7324' stroke='"&If(count_val = 1,"#DBDBDB","#316BB7")&"' stroke-width='2.53521'/> </svg>")
and "OnSelect" property:
If(count_val = 1,Set(count_val,1), Set(count_val,count_val-1))
And a new Label object, call it "value_count" with Text property:
If(IsBlank(count_val),1, count_val)
Add a new Image object, call it "add_count" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='23' height='21' viewBox='0 0 23 21' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M2.05634 10.352H21.0704M11.5634 0.211182V20.4929' stroke='"&If(count_val = 99,"#DBDBDB","#316BB7")&"' stroke-width='2.53521'/> </svg>")
and "OnSelect" property:
If(count_val < 99,Set(count_val,count_val+1))
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a horizontal frame with auto layout
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_counter" with these properties:
Step 2 - create a content for the parent frame
Import a new SVG file under a "horcont_counter" frame, call it "svg_rem_count" with this XML code:
<svg width="20" height="7" viewBox="0 0 20 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.718323 1.85205H19.7324" stroke="#DBDBDB" stroke-width="2.53521"/>
</svg>
Add a new Text (T command) object under a "horcont_counter" frame, call it "lbl_value_count" with these properties:
Import a new SVG file under a "horcont_counter" frame, call it "svg_add_count" with this XML code:
<svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.05634 10.352H21.0704M11.5634 0.211182V20.4929" stroke="#316BB7" stroke-width="2.53521"/>
</svg>
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.