How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create cover container
Add a new Horizontal Container PCF object, call it "searchbox" with this "DropShadow" property:
Step 2 - create content
Add a new Text Input object, call it "input_search" with this "HintText" property:
Add a new Image object, call it "search_icon" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M31.1533 31.1371L43.75 43.75M35.4167 20.8333C35.4167 28.8875 28.8875 35.4167 20.8333 35.4167C12.7792 35.4167 6.25 28.8875 6.25 20.8333C6.25 12.7792 12.7792 6.25 20.8333 6.25C28.8875 6.25 35.4167 12.7792 35.4167 20.8333Z' stroke='#53596C' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> </svg>")
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create horizontal frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_searchbox" with these properties:
Step 2 - create content for the parent frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "horcont_searchbox" frame, call it "txt_input_search" with these properties:
Import a new SVG file under a "horcont_searchbox" frame, call it "svg_search_icon" with this XML code:
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.1533 31.1371L43.75 43.75M35.4167 20.8333C35.4167 28.8875 28.8875 35.4167 20.8333 35.4167C12.7792 35.4167 6.25 28.8875 6.25 20.8333C6.25 12.7792 12.7792 6.25 20.8333 6.25C28.8875 6.25 35.4167 12.7792 35.4167 20.8333Z" stroke="#53596C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</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_searchbox = Horizontal Container txt_input_search = Text Input YAML Output
Used Colours
Container Background - #FFFFFF