`GuiTabBar()` is very limiting as a lot of its default values and behavior is hard-coded

[sleeptightAnsiC]

The usage of GuiTabBar() is very limited because its implementation makes a lot of assumptions and hard-codes many default values.

Examples:

1. the width of every entry is hard-coded to 160
   

   raygui/src/raygui.h

   Line 1738 in e4a59f0

   #define RAYGUI_TABBAR_ITEM_WIDTH 160

2. each entry can be clicked in order to close TabBar, this also draws additional button in top-right corner of every entry
   

   raygui/src/raygui.h

   Lines 1780 to 1781 in e4a59f0

   	// Close tab with middle mouse button pressed
   	if (CheckCollisionPointRec(GetMousePosition(), tabBounds) && IsMouseButtonPressed(MOUSE_MIDDLE_BUTTON)) result = i;

3. each entry appears with hard-coded icon at the beginning
   

   raygui/src/raygui.h

   Line 1795 in e4a59f0

   if (GuiButton(RAYGUI_CLITERAL(Rectangle){ tabBounds.x + tabBounds.width - 14 - 5, tabBounds.y + 5, 14, 14 }, GuiIconText(ICON_CROSS_SMALL, NULL))) result = i;

@raysan5 Would it be fine, if I create a PR with more flexible version of this function (e.g. GuiTabBarEx ) ?

The usage of GuiTabBar() is very limited because its implementation makes a lot of assumptions and hard-codes many default values.

Examples:

1. the width of every entry is hard-coded to 160
   

   raygui/src/raygui.h

   Line 1738 in e4a59f0

   #define RAYGUI_TABBAR_ITEM_WIDTH 160

2. each entry can be clicked in order to close TabBar, this also draws additional button in top-right corner of every entry
   

   raygui/src/raygui.h

   Lines 1780 to 1781 in e4a59f0

   	// Close tab with middle mouse button pressed
   	if (CheckCollisionPointRec(GetMousePosition(), tabBounds) && IsMouseButtonPressed(MOUSE_MIDDLE_BUTTON)) result = i;

3. each entry appears with hard-coded icon at the beginning
   

   raygui/src/raygui.h

   Line 1795 in e4a59f0

   if (GuiButton(RAYGUI_CLITERAL(Rectangle){ tabBounds.x + tabBounds.width - 14 - 5, tabBounds.y + 5, 14, 14 }, GuiIconText(ICON_CROSS_SMALL, NULL))) result = i;

@raysan5 Would it be fine, if I create a PR with more flexible version of this function (e.g. GuiTabBarEx ) ?

Hi

[sleeptightAnsiC]

Hi

@mk99987 ?

Do u know how to increase the text font size in the input field using the GuiTextBox? Please help me.
Is the font size fixed in the input field?

[raysan5]

@sleeptightAnsiC GuiTabBar() was quickly added for convenience for one of my tools and I'm aware it's not much flexible at the moment.

1.the width of every entry is hard-coded to 160

It can be added a check to allow being redefined by user, like so other advance-controls do.

2. each entry can be clicked in order to close TabBar, this also draws additional button in top-right corner of every entry
3. each entry appears with hard-coded icon at the beginning

Yes, added for convenience, maybe some define can be added to avoid that close button if not required, I got inspiration from Notepad++ tabs system.

@raysan5 Would it be fine, if I create a PR with more flexible version of this function (e.g. GuiTabBarEx ) ?

I prefer to minimize/avoid Gui*Ex() versions, if it can be addressed with some config-defines on GuiTabBar() directly, I prefer that approach. Afaik, most tools won't need multiple separate versions of GuiTabBar().

[sleeptightAnsiC]

I prefer to minimize/avoid Gui*Ex() versions, if it can be addressed with some config-defines on GuiTabBar() directly

Makes sense.

I'm not very comfortable with global styles yet, but GuiTabBar seems to be hijacking properties from TOGGLE and BUTTON controls. I don't really see anything that could be reused for those cases I mentioned at the moment.

Note: the best "documentation" on styling is probably...

...here

raygui/src/raygui.h

Lines 466 to 675 in b19a016

	// Style property
	// NOTE: Used when exporting style as code for convenience
	typedef struct GuiStyleProp {
	unsigned short controlId; // Control identifier
	unsigned short propertyId; // Property identifier
	int propertyValue; // Property value
	} GuiStyleProp;
	/*
	// Controls text style -NOT USED-
	// NOTE: Text style is defined by control
	typedef struct GuiTextStyle {
	unsigned int size;
	int charSpacing;
	int lineSpacing;
	int alignmentH;
	int alignmentV;
	int padding;
	} GuiTextStyle;
	*/
	// Gui control state
	typedef enum {
	STATE_NORMAL = 0,
	STATE_FOCUSED,
	STATE_PRESSED,
	STATE_DISABLED
	} GuiState;
	// Gui control text alignment
	typedef enum {
	TEXT_ALIGN_LEFT = 0,
	TEXT_ALIGN_CENTER,
	TEXT_ALIGN_RIGHT
	} GuiTextAlignment;
	// Gui control text alignment vertical
	// NOTE: Text vertical position inside the text bounds
	typedef enum {
	TEXT_ALIGN_TOP = 0,
	TEXT_ALIGN_MIDDLE,
	TEXT_ALIGN_BOTTOM
	} GuiTextAlignmentVertical;
	// Gui control text wrap mode
	// NOTE: Useful for multiline text
	typedef enum {
	TEXT_WRAP_NONE = 0,
	TEXT_WRAP_CHAR,
	TEXT_WRAP_WORD
	} GuiTextWrapMode;
	// Gui controls
	typedef enum {
	// Default -> populates to all controls when set
	DEFAULT = 0,
	// Basic controls
	LABEL, // Used also for: LABELBUTTON
	BUTTON,
	TOGGLE, // Used also for: TOGGLEGROUP
	SLIDER, // Used also for: SLIDERBAR, TOGGLESLIDER
	PROGRESSBAR,
	CHECKBOX,
	COMBOBOX,
	DROPDOWNBOX,
	TEXTBOX, // Used also for: TEXTBOXMULTI
	VALUEBOX,
	CONTROL11,
	LISTVIEW,
	COLORPICKER,
	SCROLLBAR,
	STATUSBAR
	} GuiControl;
	// Gui base properties for every control
	// NOTE: RAYGUI_MAX_PROPS_BASE properties (by default 16 properties)
	typedef enum {
	BORDER_COLOR_NORMAL = 0, // Control border color in STATE_NORMAL
	BASE_COLOR_NORMAL, // Control base color in STATE_NORMAL
	TEXT_COLOR_NORMAL, // Control text color in STATE_NORMAL
	BORDER_COLOR_FOCUSED, // Control border color in STATE_FOCUSED
	BASE_COLOR_FOCUSED, // Control base color in STATE_FOCUSED
	TEXT_COLOR_FOCUSED, // Control text color in STATE_FOCUSED
	BORDER_COLOR_PRESSED, // Control border color in STATE_PRESSED
	BASE_COLOR_PRESSED, // Control base color in STATE_PRESSED
	TEXT_COLOR_PRESSED, // Control text color in STATE_PRESSED
	BORDER_COLOR_DISABLED, // Control border color in STATE_DISABLED
	BASE_COLOR_DISABLED, // Control base color in STATE_DISABLED
	TEXT_COLOR_DISABLED, // Control text color in STATE_DISABLED
	BORDER_WIDTH = 12, // Control border size, 0 for no border
	//TEXT_SIZE, // Control text size (glyphs max height) -> GLOBAL for all controls
	//TEXT_SPACING, // Control text spacing between glyphs -> GLOBAL for all controls
	//TEXT_LINE_SPACING, // Control text spacing between lines -> GLOBAL for all controls
	TEXT_PADDING = 13, // Control text padding, not considering border
	TEXT_ALIGNMENT = 14, // Control text horizontal alignment inside control text bound (after border and padding)
	//TEXT_WRAP_MODE // Control text wrap-mode inside text bounds -> GLOBAL for all controls
	} GuiControlProperty;
	// TODO: Which text styling properties should be global or per-control?
	// At this moment TEXT_PADDING and TEXT_ALIGNMENT is configured and saved per control while
	// TEXT_SIZE, TEXT_SPACING, TEXT_LINE_SPACING, TEXT_ALIGNMENT_VERTICAL, TEXT_WRAP_MODE are global and
	// should be configured by user as needed while defining the UI layout
	// Gui extended properties depend on control
	// NOTE: RAYGUI_MAX_PROPS_EXTENDED properties (by default, max 8 properties)
	//----------------------------------------------------------------------------------
	// DEFAULT extended properties
	// NOTE: Those properties are common to all controls or global
	// WARNING: We only have 8 slots for those properties by default!!! -> New global control: TEXT?
	typedef enum {
	TEXT_SIZE = 16, // Text size (glyphs max height)
	TEXT_SPACING, // Text spacing between glyphs
	LINE_COLOR, // Line control color
	BACKGROUND_COLOR, // Background color
	TEXT_LINE_SPACING, // Text spacing between lines
	TEXT_ALIGNMENT_VERTICAL, // Text vertical alignment inside text bounds (after border and padding)
	TEXT_WRAP_MODE // Text wrap-mode inside text bounds
	//TEXT_DECORATION // Text decoration: 0-None, 1-Underline, 2-Line-through, 3-Overline
	//TEXT_DECORATION_THICK // Text decoration line thickness
	} GuiDefaultProperty;
	// Other possible text properties:
	// TEXT_WEIGHT // Normal, Italic, Bold -> Requires specific font change
	// TEXT_INDENT // Text indentation -> Now using TEXT_PADDING...
	// Label
	//typedef enum { } GuiLabelProperty;
	// Button/Spinner
	//typedef enum { } GuiButtonProperty;
	// Toggle/ToggleGroup
	typedef enum {
	GROUP_PADDING = 16, // ToggleGroup separation between toggles
	} GuiToggleProperty;
	// Slider/SliderBar
	typedef enum {
	SLIDER_WIDTH = 16, // Slider size of internal bar
	SLIDER_PADDING // Slider/SliderBar internal bar padding
	} GuiSliderProperty;
	// ProgressBar
	typedef enum {
	PROGRESS_PADDING = 16, // ProgressBar internal padding
	} GuiProgressBarProperty;
	// ScrollBar
	typedef enum {
	ARROWS_SIZE = 16, // ScrollBar arrows size
	ARROWS_VISIBLE, // ScrollBar arrows visible
	SCROLL_SLIDER_PADDING, // ScrollBar slider internal padding
	SCROLL_SLIDER_SIZE, // ScrollBar slider size
	SCROLL_PADDING, // ScrollBar scroll padding from arrows
	SCROLL_SPEED, // ScrollBar scrolling speed
	} GuiScrollBarProperty;
	// CheckBox
	typedef enum {
	CHECK_PADDING = 16 // CheckBox internal check padding
	} GuiCheckBoxProperty;
	// ComboBox
	typedef enum {
	COMBO_BUTTON_WIDTH = 16, // ComboBox right button width
	COMBO_BUTTON_SPACING // ComboBox button separation
	} GuiComboBoxProperty;
	// DropdownBox
	typedef enum {
	ARROW_PADDING = 16, // DropdownBox arrow separation from border and items
	DROPDOWN_ITEMS_SPACING, // DropdownBox items separation
	DROPDOWN_ARROW_HIDDEN, // DropdownBox arrow hidden
	DROPDOWN_ROLL_UP // DropdownBox roll up flag (default rolls down)
	} GuiDropdownBoxProperty;
	// TextBox/TextBoxMulti/ValueBox/Spinner
	typedef enum {
	TEXT_READONLY = 16, // TextBox in read-only mode: 0-text editable, 1-text no-editable
	} GuiTextBoxProperty;
	// ValueBox/Spinner
	typedef enum {
	SPINNER_BUTTON_WIDTH = 16, // Spinner left/right buttons width
	SPINNER_BUTTON_SPACING, // Spinner buttons separation
	} GuiValueBoxProperty;
	// Control11
	//typedef enum { } GuiControl11Property;
	// ListView
	typedef enum {
	LIST_ITEMS_HEIGHT = 16, // ListView items height
	LIST_ITEMS_SPACING, // ListView items separation
	SCROLLBAR_WIDTH, // ListView scrollbar size (usually width)
	SCROLLBAR_SIDE, // ListView scrollbar side (0-SCROLLBAR_LEFT_SIDE, 1-SCROLLBAR_RIGHT_SIDE)
	LIST_ITEMS_BORDER_NORMAL, // ListView items border enabled in normal state
	LIST_ITEMS_BORDER_WIDTH // ListView items border width
	} GuiListViewProperty;
	// ColorPicker
	typedef enum {
	COLOR_SELECTOR_SIZE = 16,
	HUEBAR_WIDTH, // ColorPicker right hue bar width
	HUEBAR_PADDING, // ColorPicker right hue bar separation from panel
	HUEBAR_SELECTOR_HEIGHT, // ColorPicker right hue bar selector height
	HUEBAR_SELECTOR_OVERFLOW // ColorPicker right hue bar selector overflow
	} GuiColorPickerProperty;

raygui/src/raygui.h

Lines 4292 to 4393 in b19a016

	// Load style default over global style
	void GuiLoadStyleDefault(void)
	{
	// We set this variable first to avoid cyclic function calls
	// when calling GuiSetStyle() and GuiGetStyle()
	guiStyleLoaded = true;
	// Initialize default LIGHT style property values
	// WARNING: Default value are applied to all controls on set but
	// they can be overwritten later on for every custom control
	GuiSetStyle(DEFAULT, BORDER_COLOR_NORMAL, 0x838383ff);
	GuiSetStyle(DEFAULT, BASE_COLOR_NORMAL, 0xc9c9c9ff);
	GuiSetStyle(DEFAULT, TEXT_COLOR_NORMAL, 0x686868ff);
	GuiSetStyle(DEFAULT, BORDER_COLOR_FOCUSED, 0x5bb2d9ff);
	GuiSetStyle(DEFAULT, BASE_COLOR_FOCUSED, 0xc9effeff);
	GuiSetStyle(DEFAULT, TEXT_COLOR_FOCUSED, 0x6c9bbcff);
	GuiSetStyle(DEFAULT, BORDER_COLOR_PRESSED, 0x0492c7ff);
	GuiSetStyle(DEFAULT, BASE_COLOR_PRESSED, 0x97e8ffff);
	GuiSetStyle(DEFAULT, TEXT_COLOR_PRESSED, 0x368bafff);
	GuiSetStyle(DEFAULT, BORDER_COLOR_DISABLED, 0xb5c1c2ff);
	GuiSetStyle(DEFAULT, BASE_COLOR_DISABLED, 0xe6e9e9ff);
	GuiSetStyle(DEFAULT, TEXT_COLOR_DISABLED, 0xaeb7b8ff);
	GuiSetStyle(DEFAULT, BORDER_WIDTH, 1);
	GuiSetStyle(DEFAULT, TEXT_PADDING, 0);
	GuiSetStyle(DEFAULT, TEXT_ALIGNMENT, TEXT_ALIGN_CENTER);
	// Initialize default extended property values
	// NOTE: By default, extended property values are initialized to 0
	GuiSetStyle(DEFAULT, TEXT_SIZE, 10); // DEFAULT, shared by all controls
	GuiSetStyle(DEFAULT, TEXT_SPACING, 1); // DEFAULT, shared by all controls
	GuiSetStyle(DEFAULT, LINE_COLOR, 0x90abb5ff); // DEFAULT specific property
	GuiSetStyle(DEFAULT, BACKGROUND_COLOR, 0xf5f5f5ff); // DEFAULT specific property
	GuiSetStyle(DEFAULT, TEXT_LINE_SPACING, 15); // DEFAULT, 15 pixels between lines
	GuiSetStyle(DEFAULT, TEXT_ALIGNMENT_VERTICAL, TEXT_ALIGN_MIDDLE); // DEFAULT, text aligned vertically to middle of text-bounds
	// Initialize control-specific property values
	// NOTE: Those properties are in default list but require specific values by control type
	GuiSetStyle(LABEL, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT);
	GuiSetStyle(BUTTON, BORDER_WIDTH, 2);
	GuiSetStyle(SLIDER, TEXT_PADDING, 4);
	GuiSetStyle(PROGRESSBAR, TEXT_PADDING, 4);
	GuiSetStyle(CHECKBOX, TEXT_PADDING, 4);
	GuiSetStyle(CHECKBOX, TEXT_ALIGNMENT, TEXT_ALIGN_RIGHT);
	GuiSetStyle(DROPDOWNBOX, TEXT_PADDING, 0);
	GuiSetStyle(DROPDOWNBOX, TEXT_ALIGNMENT, TEXT_ALIGN_CENTER);
	GuiSetStyle(TEXTBOX, TEXT_PADDING, 4);
	GuiSetStyle(TEXTBOX, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT);
	GuiSetStyle(VALUEBOX, TEXT_PADDING, 0);
	GuiSetStyle(VALUEBOX, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT);
	GuiSetStyle(STATUSBAR, TEXT_PADDING, 8);
	GuiSetStyle(STATUSBAR, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT);
	// Initialize extended property values
	// NOTE: By default, extended property values are initialized to 0
	GuiSetStyle(TOGGLE, GROUP_PADDING, 2);
	GuiSetStyle(SLIDER, SLIDER_WIDTH, 16);
	GuiSetStyle(SLIDER, SLIDER_PADDING, 1);
	GuiSetStyle(PROGRESSBAR, PROGRESS_PADDING, 1);
	GuiSetStyle(CHECKBOX, CHECK_PADDING, 1);
	GuiSetStyle(COMBOBOX, COMBO_BUTTON_WIDTH, 32);
	GuiSetStyle(COMBOBOX, COMBO_BUTTON_SPACING, 2);
	GuiSetStyle(DROPDOWNBOX, ARROW_PADDING, 16);
	GuiSetStyle(DROPDOWNBOX, DROPDOWN_ITEMS_SPACING, 2);
	GuiSetStyle(VALUEBOX, SPINNER_BUTTON_WIDTH, 24);
	GuiSetStyle(VALUEBOX, SPINNER_BUTTON_SPACING, 2);
	GuiSetStyle(SCROLLBAR, BORDER_WIDTH, 0);
	GuiSetStyle(SCROLLBAR, ARROWS_VISIBLE, 0);
	GuiSetStyle(SCROLLBAR, ARROWS_SIZE, 6);
	GuiSetStyle(SCROLLBAR, SCROLL_SLIDER_PADDING, 0);
	GuiSetStyle(SCROLLBAR, SCROLL_SLIDER_SIZE, 16);
	GuiSetStyle(SCROLLBAR, SCROLL_PADDING, 0);
	GuiSetStyle(SCROLLBAR, SCROLL_SPEED, 12);
	GuiSetStyle(LISTVIEW, LIST_ITEMS_HEIGHT, 28);
	GuiSetStyle(LISTVIEW, LIST_ITEMS_SPACING, 2);
	GuiSetStyle(LISTVIEW, LIST_ITEMS_BORDER_WIDTH, 1);
	GuiSetStyle(LISTVIEW, SCROLLBAR_WIDTH, 12);
	GuiSetStyle(LISTVIEW, SCROLLBAR_SIDE, SCROLLBAR_RIGHT_SIDE);
	GuiSetStyle(COLORPICKER, COLOR_SELECTOR_SIZE, 8);
	GuiSetStyle(COLORPICKER, HUEBAR_WIDTH, 16);
	GuiSetStyle(COLORPICKER, HUEBAR_PADDING, 8);
	GuiSetStyle(COLORPICKER, HUEBAR_SELECTOR_HEIGHT, 8);
	GuiSetStyle(COLORPICKER, HUEBAR_SELECTOR_OVERFLOW, 2);
	if (guiFont.texture.id != GetFontDefault().texture.id)
	{
	// Unload previous font texture
	UnloadTexture(guiFont.texture);
	RL_FREE(guiFont.recs);
	RL_FREE(guiFont.glyphs);
	guiFont.recs = NULL;
	guiFont.glyphs = NULL;
	// Setup default raylib font
	guiFont = GetFontDefault();
	// NOTE: Default raylib font character 95 is a white square
	Rectangle whiteChar = guiFont.recs[95];
	// NOTE: We set up a 1px padding on char rectangle to avoid pixel bleeding on MSAA filtering
	SetShapesTexture(guiFont.texture, RAYGUI_CLITERAL(Rectangle){ whiteChar.x + 1, whiteChar.y + 1, whiteChar.width - 2, whiteChar.height - 2 });
	}
	}

[sleeptightAnsiC]

@mk99987 I'll answer your question since I'm already reading this, but I will ignore any other comments not related to TabBar issue. This is not a support forum and your question is not related to this issue. Ask on Raylib's discord/reddit for general help. Please, after reading this, hide your comments as "Off-Topic" just like I did (by clicking ... next to the comment).

Do u know how to increase the text font size in the input field using the GuiTextBox? Please help me.
Is the font size fixed in the input field?

I believe, this is affected by global styling values: DEFAULT TEXT_SIZE. Try using GuiSetStyle(DEFAULT, TEXT_SIZE, 100) right before you call GuiTextBox(). Maybe there is another property I could not find.