# How to create a tab with slate widgets ?

**URL:** <https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692>\
**Category:** UI\
**Tags:** unreal-engine, slate, CPP, question\
**Created:** [March 19, 2015, 12:26pm UTC](https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692 "2015-03-19T12:26:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Syntopia](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Syntopia](https://forums.unrealengine.com/u/Syntopia)\
**Post date:** [March 19, 2015, 12:26pm UTC](https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692/1 "2015-03-19T12:26:32Z")

</div>

There are some examples of how to do it?  
Probably can be styled button and use Widget Switcher…there are some examples ?  
and I found SDockTab and SDockableTab, what is it? how it use ?

![34886-скриншот+2015-03-19+14.20.13.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/6/3/363400f9eb78c19235deceb37a844ce0ea937cf4.png)

UPD:  
My buggy solution here:

> **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)**
>
> After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — ue4community.wiki! You will be able to find content from the official...

 ![36010-minitabs.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/9/4/2949d3dafd4332e736ee8ae3cdabf6bf1de2d728.png)

---

<div class="post-metadata">

**Author:** ![Fiskislod](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Fiskislod](https://forums.unrealengine.com/u/Fiskislod)\
**Post date:** [March 20, 2015, 10:58am UTC](https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692/2 "2015-03-20T10:58:29Z")

</div>

Styled button (or better yet, `SCheckBox`) and `SWidgetSwitcher` is how I would do it.

The screenshot you have above shows the system we call the `TabManager`. It is responsible for:

1. Letting you re-order tabs
2. Re-arranging layout dynamically by pulling tabs out of the tab well and dropping them onto various targets
3. Saving and restoring editor layouts
4. Logical ownership of small (square) tabs by big (rounded) tabs

The feature matrix causes the system to get quite complicated. It is also designed with a very specific use-case in mind. I would avoid using it unless it is a near-perfect fit for your purposes. You can experience most of the features by customizing your editor layout and decide if you want to dig into all that code.

However, if simple tabs is what you are looking for, I suggest approach that you proposed:

1. Check out the `CreateRadioButton` example in `WidgetGallery.cpp`
2. Hook up some radio buttons to an `enum` or an `int` that signifies the current tab; let’s call it `tabIndex`.
3. Hook up an `SWidgetSwitcher` to the current `tabIndex` via an attribute.

The nice thing about this approach is that you have complete freedom to move radio buttons around. You can create a special tab that’s bigger than others and has a different image to represent it.

Let me know how it goes and if you have further questions.

---

<div class="post-metadata">

**Author:** ![Syntopia](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Syntopia](https://forums.unrealengine.com/u/Syntopia)\
**Post date:** [March 21, 2015, 9:00am UTC](https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692/3 "2015-03-21T09:00:59Z")

</div>

Where I can find a WidgetGallery ? it is not in the source code

---

<div class="post-metadata">

**Author:** ![Fiskislod](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Fiskislod](https://forums.unrealengine.com/u/Fiskislod)\
**Post date:** [March 23, 2015, 2:07pm UTC](https://forums.unrealengine.com/t/how-to-create-a-tab-with-slate-widgets/311692/4 "2015-03-23T14:07:05Z")

</div>

You should be able to find it under:

`...\UE4\Engine\Source\Runtime\AppFramework\Private\Framework\Testing\SWidgetGallery.cpp`