Using tabs with colors underlines all tab sections

[nip1904]

Introduction

When I use the tab component and add colors to the tab. All tabs are underlined and so setting active/inactive is not possible.

To Reproduce

List of steps to reproduce the behavior. Include the sql file you are using and the eventual relevant parts of your database schema

select
   'tab'             as component;
select 
   'calendar-week'   as icon,
   '2023'            as title;
select   
   'calendar-week'   as icon,
   '2024'            as title,
   TRUE              as active;
select 
   'calendar-week'   as icon,
   '2025'            as title;
--
select
   'tab'             as component;
select 
   'calendar-week'   as icon,
   'red'             as color,
   '2023'            as title;
select   
   'calendar-week'   as icon,
   '2024'            as title,
   'green'           as color,
   TRUE              as active;
select 
   'calendar-week'   as icon,
   'yellow'          as color,
   '2025'            as title;

Actual behavior

After following these steps, what happened ? If you saw an error on the command line or inside your page, then paste it here

your error message here

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Version information

• OS:
• Database [e.g. SQLite, Postgres]
• SQLPage Version [found when hovering the default footer of pages]:

Additional context

Add any other context about the problem here.

[lovasoa]

Hi !

Indeed, the curent documentation is misleading. But what you are trying to do is possible with

select
   'tab'             as component;
select 
   'calendar-week' as icon,
   '2023' as title,
   case $tab when '2023' then 'red' end as color;
select   
   'calendar-week'   as icon,
   '2024' as title,
   case $tab when '2024' then 'green' end as color;
select 
   'calendar-week'   as icon,
   '2025' as title,
   case $tab when '2025' then 'yellow' end as color;

https://github.com/user-attachments/assets/4f7f240e-4203-4fde-b672-557b8b3658e8

Setting a color with the color property unconditionally applies the color. But if you need a condition, you can express it in sql.

[nip1904]

Hi, yes I did this workaround already. I did not know if it is a bug or works a designed.