Skip to content
The component helps you to switch your content between tabs with icons
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create boolean variable on Screen
When you create a new screen(or use already created) you should create a variable on "OnVisible" property:
Set(selTab,"P")
Step2- create HTML tab boxes
Add a new HTML TEXT object, call it "tab_box" with this "HTML text" property:
"<div style='margin:0px;width:"&Self.Width-5&"px;height:"&Self.Height-5&"px;background-color:#fff; border-radius:15px;'></div>"
Add a new HTML TEXT object, call it "tab_header" with this "HTML text" property:
"<div style='margin:0px;width:"&Self.Width-5&"px;height:"&Self.Height-5&"px;background-color:#fff; border-radius:30px 30px 10px 10px;'></div>"
and "X" property:
If(selTab = "P" || IsBlank(selTab),48,220)
Step 2 - add titles for tabs
Add a new TEXT PCF object, call it "profit_text" with this "text" property:
"Profit"
and "X" property:
If(selTab = "C",100, 119)
Add a new TEXT PCF object, call it "cost_text" with this "text" property:
"Cost"
and "X" property:
If(selTab = "P" || IsBlank(selTab),277,300)
Step 3 - add transparent buttons
Add a new Button PCF object, call it "profitbutton" with this "Appearance" property:
'ButtonCanvas.Appearance'.Transparent
and "X" property:
If(selTab = "C",95, 108)
Add a new Button PCF object, call it "costbutton" with this "Appearance" property:
'ButtonCanvas.Appearance'.Transparent
Step 4 - add icons for tabs
Add a new Image object, call it "profit_icon" with this "Image" property:
"data:image/svg+xml;utf8, "&EncodeUrl("<svg fill='#232323' width='800px' height='800px' viewBox='0 0 24 24' id='up-trend' data-name='Flat Line' xmlns='http://www.w3.org/2000/svg' class='icon flat-line'><polyline id='primary' points='21 6 14 13 11 10 3 18' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline><polyline id='primary-2' data-name='primary' points='21 10 21 6 17 6' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline></svg>")
Add a new Image object, call it "cost_icon" with this "Image" property:
"data:image/svg+xml;utf8, "&EncodeUrl("<svg fill='#232323' width='800px' height='800px' viewBox='0 0 24 24' id='down-trend-round' data-name='Flat Line' xmlns='http://www.w3.org/2000/svg' class='icon flat-line'><path id='primary' d='M3,7l5.79,5.79a1,1,0,0,0,1.42,0l2.58-2.58a1,1,0,0,1,1.42,0L21,17' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></path><polyline id='primary-2' data-name='primary' points='17 17 21 17 21 13' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline></svg>")
Step 5 - group all objects
Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a tab header with content box
Add a new Rectangle (R command) object, call it "html_content_box" with these properties:
Add a new Rectangle (R command) object, call it "html_header_box" with these properties:
Step 2 - create icons with texts
Import a new SVG file, call it "svg_up_icon" with this XML code:
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.53592 25.7036L13.6078 16.6318L19.6557 22.6797L31.7515 10.5839" stroke="#292929" stroke-width="3.77994" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.7036 10.5839H31.7515V16.6318" stroke="#292929" stroke-width="3.77994" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Import a new SVG file, call it "svg_down_icon" with this XML code:
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.53593 10.5839L13.6078 19.6557L19.6557 13.6078L31.7515 25.7036" stroke="#292929" stroke-width="3.77994" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.7036 25.7036H31.7515V19.6557" stroke="#292929" stroke-width="3.77994" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Add a new Text (T command), call it "lbl_profit_title" with these properties:
Add a new Text (T command), call it "lbl_cost_title" with these properties:
Step 3 - group all objects
Select all objects and press COMMAND + G (MAC) or CTRL + G (WIN) and call the group "gr_tabs_group".
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.