Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Tabs

MyCondy

Last edited 15 days ago by MyCondy

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?

1x Group

2x TEXT PCF

2x Button PCF

2x Image

2x HTML TEXT

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?

1x Group

2x Frame

2x Rectangle

2x Vector

2x Text

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>

Import a new SVG file, call it "svg_down_icon" with this XML code:

</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

the designed component according to the instructions from the previous section

Used Prefixes

gr_tabs_group = Group

svg_down_icon, svg_up_icon = Image

lbl_profit_title, lbl_cost_title = Label

html_header_box, html_content_box = HTML TEXT

YAML Output

⁠

⁠

Used Colours

Tab box, Tab Header - #FFFFFF

Profit,Cost Text - #2D3854

Icons - #232323

⁠

← Status Report⁠

⁠

Time Picker →⁠

⁠

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.