Fix handling of style property in Tabs component

chartlets.js/CHANGES.md

@@ -1,5 +1,8 @@
 ## Version 0.1.8 (in development)
 
+* Fixed handling of `style` prop in `Tabs` component and added prop 
+  `iconPosition`. (#135)
+
 ## Version 0.1.7 (from 2025/12/03)
 
 * Updated dependencies

chartlets.js/packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets-demo",
-  "version": "0.1.8.dev0",
+  "version": "0.1.8-dev.0",
   "description": "Demonstrator for the Chartlets framework.",
   "type": "module",
   "files": [

chartlets.js/packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.1.8.dev0",
+  "version": "0.1.8-dev.0",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

chartlets.js/packages/lib/src/plugins/mui/Tabs.tsx

@@ -9,10 +9,11 @@ import { Box } from "@/plugins/mui/Box";
 import { isString } from "@/utils/isString";
 import { isComponentState } from "@/types/state/component";
 
-interface TabState {
+interface TabState extends ComponentState {
   type: "Tab";
   label?: string;
   icon?: string;
+  iconPosition?: "bottom" | "end" | "start" | "top" | undefined;
   disabled?: boolean;
   children?: ComponentProps[];
 }
@@ -44,21 +45,23 @@ export function Tabs({
     }
   };
   return (
-    <MuiBox sx={{ width: "100%" }}>
+    <MuiBox sx={{ width: "100%" }} style={style}>
       <MuiBox sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <MuiTabs id={id} style={style} value={value} onChange={handleChange}>
+        <MuiTabs id={id} value={value} onChange={handleChange}>
           {tabItems?.map((tab, index) => {
             const tabState = isComponentState(tab)
               ? (tab as TabState)
               : undefined;
             return (
               <MuiTab
                 key={index}
+                style={tabState?.style}
                 label={tabState ? tabState.label : isString(tab) ? tab : ""}
                 icon={
                   tabState &&
                   tabState.icon && <MuiIcon>{tabState.icon}</MuiIcon>
                 }
+                iconPosition={tabState?.iconPosition}
                 disabled={disabled || (tabState && tabState.disabled)}
               />
             );
@@ -70,10 +73,11 @@ export function Tabs({
         return (
           value === index && (
             <Box
+              style={tabState?.style}
               key={index}
               type={type}
               onChange={onChange}
-              children={tabState?.children ?? undefined}
+              children={tabState?.children}
             />
           )
         );

chartlets.py/CHANGES.md

@@ -1,5 +1,7 @@
 ## Version 0.1.8 (in development)
 
+* Added `iconPosition` to `Tabs` Component. (#135)
+
 ## Version 0.1.7 (from 2025/12/03)
 
 * Updated dependencies
@@ -11,10 +13,10 @@
 
 ## Version 0.1.5 (from 2025/03/21)
 
-* Add `multiple` property for `Select` component to enable the
+* Added `multiple` property for `Select` component to enable the selection
   of multiple elements.
 
-* Add support for `Python 3.13`
+* Added support for `Python 3.13`
 
 
 ## Version 0.1.4 (from 2025/03/06)

chartlets.py/chartlets/components/tabs.py

@@ -12,6 +12,12 @@ class Tab(Component):
     icon: str | None = None
     """The tab icon's name."""
 
+    iconPosition: str | None = None
+    """	The position of the icon relative to the label.
+    One of "bottom" | "end" | "start" | "top". 
+    Defaults to "top".
+    """
+
     label: str | None = None
     """The tab label."""
 

chartlets.py/demo/my_extension/my_panel_8.py

@@ -1,8 +1,15 @@
 import altair as alt
 
 from chartlets import Component, Input, State, Output
-from chartlets.components import (Tabs, Tab, Typography, Box,
-                                  VegaChart, Table)
+from chartlets.components import (
+    Tabs,
+    Tab,
+    Typography,
+    Box,
+    VegaChart,
+    Table,
+    Button,
+)
 from chartlets.components.table import TableColumn, TableRow
 
 from server.context import Context
@@ -37,25 +44,57 @@ def render_panel(
         ["3", "Peter", "Jones", 40],
     ]
 
-    table = Table(id="table", rows=rows, columns=columns, hover=True)
+    open_button = Button(
+        id="open_button", text="Show component!", style={"margin": "20px"}
+    )
+
+    table = Table(
+        id="table",
+        rows=rows,
+        columns=columns,
+        hover=True,
+        style={"width": "250px", "margin": "30px"},
+    )
+
+    info_text = Typography(
+        id="info_text", children=["This is a text."], style={"color": "pink"}
+    )
 
-    info_text = Typography(id="info_text", children=["This is a text."])
     chart = VegaChart(
-        id="chart", chart=(
-        alt.Chart(dataset)
-        .mark_bar()
-        .encode(
-            x=alt.X("x:N", title="x"),
-            y=alt.Y("a:Q", title="a"))
-        .properties(width=290, height=300, title="Vega charts")
-    ), style={"flexGrow": 1}
+        id="chart",
+        chart=(
+            alt.Chart(dataset)
+            .mark_bar()
+            .encode(x=alt.X("x:N", title="x"), y=alt.Y("a:Q", title="a"))
+            .properties(width=290, height=300, title="Vega charts")
+        ),
+        style={"flexGrow": 1, "margin": "10px"},
     )
 
-    tab1 = Tab(id = "tab1", label="Tab 1", children=[table])
-    tab2 = Tab(id = "tab2", label="Tab 2", children=[info_text])
-    tab3 = Tab(id="tab3", label="Tab 3", children=[chart])
+    tab1 = Tab(
+        id="tab1",
+        label="Tab 1",
+        children=[table],
+        style={"backgroundColor": "darkblue", "padding": "1px"},
+    )
+    tab2 = Tab(id="tab2", label="Tab 2", children=[info_text])
+    tab3 = Tab(
+        id="tab3",
+        label="Tab 3",
+        children=[chart],
+        style={
+            "color": "darkseagreen",
+            "backgroundColor": "darkgreen",
+            "padding": "1px",
+        },
+    )
 
-    tabs = Tabs(id = "tabs", value = 0, children=[tab1,tab2,tab3])
+    tabs = Tabs(
+        id="tabs",
+        value=0,
+        children=[tab1, tab2, tab3],
+        style={"visibility": "hidden"},
+    )
 
     return Box(
         style={
@@ -64,6 +103,27 @@ def render_panel(
             "width": "100%",
             "height": "100%",
         },
-        children=[ tabs ],
+        children=[open_button, tabs],
     )
 
+
+# noinspection PyUnusedLocal
+@panel.callback(
+    Input("open_button", "clicked"),
+    Input("tabs", "style"),
+    Output("tabs", "style"),
+    Output("open_button", "text"),
+)
+def tabs_on_open(ctx: Context, button, style) -> tuple[dict, str]:
+    visibility = style["visibility"]
+
+    if visibility == "hidden":
+        return (
+            {**style, "visibility": "visible"},
+            "Hide component!",
+        )
+    else:
+        return (
+            {**style, "visibility": "hidden"},
+            "Show component!",
+        )