diff --git a/src/widgets/tabs.zig b/src/widgets/tabs.zig index 95db0fc..6966772 100644 --- a/src/widgets/tabs.zig +++ b/src/widgets/tabs.zig @@ -99,6 +99,10 @@ pub const TabsConfig = struct { show_close: bool = false, /// Close button size close_size: u32 = 14, + /// Minimal style (no backgrounds, only text + underline indicator) + minimal: bool = false, + /// Underline indicator height (for minimal mode) + indicator_height: u32 = 2, }; /// Tabs colors @@ -257,28 +261,31 @@ pub fn tabsRect( state.hovered = @intCast(i); } - // Determine tab background - const tab_bg = if (tab.disabled) - colors.tab_bg.darken(10) - else if (is_selected) - colors.tab_active_bg - else if (is_hovered) - colors.tab_hover_bg - else - colors.tab_bg; + // Minimal mode: no backgrounds, just text + underline + if (!config.minimal) { + // Determine tab background + const tab_bg = if (tab.disabled) + colors.tab_bg.darken(10) + else if (is_selected) + colors.tab_active_bg + else if (is_hovered) + colors.tab_hover_bg + else + colors.tab_bg; - // Draw tab background (rounded corners for selected tab in fancy mode) - const tab_radius: u8 = if (is_selected) 4 else 0; - if (Style.isFancy() and tab_radius > 0) { - // Only round top corners for top position, bottom for bottom - ctx.pushCommand(Command.roundedRect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg, tab_radius)); - } else { - ctx.pushCommand(Command.rect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg)); + // Draw tab background (rounded corners for selected tab in fancy mode) + const tab_radius: u8 = if (is_selected) 4 else 0; + if (Style.isFancy() and tab_radius > 0) { + // Only round top corners for top position, bottom for bottom + ctx.pushCommand(Command.roundedRect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg, tab_radius)); + } else { + ctx.pushCommand(Command.rect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg)); + } } - // Draw active indicator + // Draw active indicator (underline) if (is_selected) { - const indicator_h: u32 = 2; + const indicator_h = config.indicator_height; const indicator_y = if (config.position == .top) bar_rect.y + @as(i32, @intCast(config.tab_height - indicator_h)) else @@ -286,13 +293,16 @@ pub fn tabsRect( ctx.pushCommand(Command.rect(tab_rect.x, indicator_y, tab_rect.w, indicator_h, colors.indicator)); } - // Draw tab text + // Draw tab text (minimal mode: primary for active, text_secondary for inactive) + const theme = Style.currentTheme().*; const text_color = if (tab.disabled) colors.tab_disabled_text else if (is_selected) - colors.tab_active_text + if (config.minimal) theme.primary else colors.tab_active_text + else if (is_hovered and config.minimal) + colors.tab_active_text // Brighten on hover in minimal mode else - colors.tab_text; + if (config.minimal) theme.text_secondary else colors.tab_text; const text_y = bar_rect.y + @as(i32, @intCast((config.tab_height - 8) / 2)); ctx.pushCommand(Command.text(tab_x + @as(i32, @intCast(config.padding_h)), text_y, tab.label, text_color));