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:
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
the designed component according to the instructions from the previous section Used Prefixes
horcont_counter = Horizontal Container svg_rem_count, svg_add_count = Image YAML Output
Used Colours
Frame Background - #FFFFFF Remove Counter Colour - #DBDBDB Add Counter Colour - #316BB7