Ready
Popular
Canvas Component
v1.0.0
HTML
CSS
React
3 tabs
Custom colors
Dynamic items
Responsive
Segmented Tabs
Material Design segmented control with dynamic tabs
A professional segmented tabs component for Power Apps. Features dynamic tab items with smooth sliding animation, active state highlighting, and fully customizable colors. Perfect for navigation, filtering, and content switching.
Dynamic tabs
Smooth animation
Custom colors
Active state
Dark theme
Event handling
Key Properties
Items[Table]
SelectedID1
ActiveColor#6366F1
ActiveTextColor#FFFFFF
InactiveTextColor#94A3B8
BackgroundColor#1B2739
BorderColor#3D4C61
OnTabSelectEvent
Requires Modern controls enabled. Go to Settings → Updates → Preview → Modern controls and themes.
Component YAML
Copy-paste readyComponentDefinitions:
cmpSegmentedTabs:
DefinitionType: CanvasComponent
AccessAppScope: true
CustomProperties:
ActiveColor:
PropertyKind: Input
DisplayName: Active Color
Description: Background color of the active tab
DataType: Color
Default: =RGBA(99, 102, 241, 1)
ActiveTextColor:
PropertyKind: Input
DisplayName: Active Text Color
Description: Text color of the selected tab
DataType: Color
Default: =RGBA(255, 255, 255, 1)
BackgroundColor:
PropertyKind: Input
DisplayName: Background Color
Description: Main tabs container background color
DataType: Color
Default: =RGBA(27, 39, 57, 1)
BorderColor:
PropertyKind: Input
DisplayName: Border Color
Description: Outer border color
DataType: Color
Default: =RGBA(61, 76, 97, 1)
InactiveTextColor:
PropertyKind: Input
DisplayName: Inactive Text Color
Description: Text color of inactive tabs
DataType: Color
Default: =RGBA(148, 163, 184, 1)
Items:
PropertyKind: Input
DisplayName: Items
Description: Dynamic table containing tab items
DataType: Table
Default: |-
=Table(
{
ID: 1,
Title: "HTML"
},
{
ID: 2,
Title: "CSS"
},
{
ID: 3,
Title: "React"
}
)
OnTabSelect:
PropertyKind: Event
DisplayName: On Tab Select
Description: Runs when a tab is selected
ReturnType: None
Default: =false
SelectedID:
PropertyKind: Input
DisplayName: Selected ID
Description: ID of the currently active tab
DataType: Number
Default: =1
Properties:
Fill: =Color.Transparent
Height: =48
Width: =336
Children:
- cntTabsBackground:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =cmpSegmentedTabs.BorderColor
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =cmpSegmentedTabs.BackgroundColor
Height: =Parent.Height
RadiusBottomLeft: =Parent.Height / 2
RadiusBottomRight: =Parent.Height / 2
RadiusTopLeft: =Parent.Height / 2
RadiusTopRight: =Parent.Height / 2
Width: =Parent.Width
Children:
- galTabs:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
Fill: =Color.Transparent
Height: =Parent.Height
Items: =cmpSegmentedTabs.Items
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =Parent.Width / Max(1, CountRows(cmpSegmentedTabs.Items))
Width: =Parent.Width
Children:
- cntTab:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =Color.Transparent
DropShadow: =DropShadow.None
Fill: |-
=If(
ThisItem.ID = cmpSegmentedTabs.SelectedID,
cmpSegmentedTabs.ActiveColor,
Color.Transparent
)
Height: =Parent.TemplateHeight - 8
RadiusBottomLeft: =Self.Height / 2
RadiusBottomRight: =Self.Height / 2
RadiusTopLeft: =Self.Height / 2
RadiusTopRight: =Self.Height / 2
Width: =Parent.TemplateWidth - 8
X: =4
Y: =4
Children:
- txtTabTitle:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.Center
Font: =Font.'Segoe UI'
FontColor: |-
=If(
ThisItem.ID = cmpSegmentedTabs.SelectedID,
cmpSegmentedTabs.ActiveTextColor,
cmpSegmentedTabs.InactiveTextColor
)
Height: =Parent.Height
Size: =10
Text: =ThisItem.Title
VerticalAlign: =VerticalAlign.Middle
Weight: |-
=If(
ThisItem.ID = cmpSegmentedTabs.SelectedID,
'TextCanvas.Weight'.Semibold,
'TextCanvas.Weight'.Regular
)
Width: =Parent.Width
- btnTabClick:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.Transparent
BorderStyle: =BorderStyle.None
BorderThickness: =0
Color: =Color.Transparent
Fill: =Color.Transparent
FocusedBorderColor: =Color.Transparent
Height: =Parent.Height
HoverBorderColor: =Color.Transparent
HoverColor: =Color.Transparent
HoverFill: |-
=If(
ThisItem.ID = cmpSegmentedTabs.SelectedID,
Color.Transparent,
RGBA(255, 255, 255, 0.04)
)
OnSelect: =cmpSegmentedTabs.OnTabSelect()
PressedBorderColor: =Color.Transparent
PressedColor: =Color.Transparent
PressedFill: =RGBA(255, 255, 255, 0.06)
RadiusBottomLeft: =Parent.Height / 2
RadiusBottomRight: =Parent.Height / 2
RadiusTopLeft: =Parent.Height / 2
RadiusTopRight: =Parent.Height / 2
Text: =""
Width: =Parent.Width