Tabs active bg

CHANGELOG.md

@@ -1,7 +1,12 @@
+# Unreleased
+
+## Enhancements
+- Tabs - adds active_background property
+  https://github.com/anvilistas/anvil-extras/issues/481
+
 # v2.5.2 25-Oct-2023
 * storage - fix bug with deserializing
 
-
 # v2.5.0 3-Oct-2023
 
 ## New Features

client_code/Tabs/__init__.py

@@ -66,13 +66,17 @@
     white-space: nowrap;
 }
 .tabs .tab a:focus,.tabs .tab a:focus.active {
-    background-color: rgb(var(--color), 0.2);
+    --fallback-bg: var(--color),0.2;
+    background-color: rgb(var(--active-bg, var(--fallback-bg)));
     outline: none
 }
 .tabs .tab a:hover,.tabs .tab a.active {
     background-color: transparent;
     color: rgb(var(--color));
 }
+.tabs .tab a:hover,.tabs .tab a.active {
+    background-color: rgb(var(--active-bg));
+}
 .tabs .indicator {
     position: absolute;
     bottom: 0;
@@ -87,6 +91,7 @@
     "align": "left",
     "tab_titles": [],
     "active_tab_index": 0,
+    "active_background": "",
     "spacing_above": "none",
     "spacing_below": "none",
     "foreground": "",
@@ -153,6 +158,7 @@ def __init__(self, **properties):
             "spacing_below": props["spacing_below"],
             "foreground": props["foreground"],
             "background": props["background"],
+            "active_background": props["active_background"],
             "role": props["role"],
             "visible": props["visible"],
         }
@@ -235,6 +241,15 @@ def active_tab_index(self):
     def active_tab_index(self, index):
         self._set_indicator(index or 0)
 
+    @property
+    def active_background(self):
+        return self._props["active_background"]
+
+    @active_background.setter
+    def active_background(self, value):
+        self._props["active_background"] = value
+        self._dom_node.style.setProperty("--active-bg", value and _get_rgb(value))
+
     @property
     def foreground(self):
         return self._props["foreground"]

client_code/Tabs/form_template.yaml

@@ -9,6 +9,7 @@ properties:
   important: true
 - {name: active_tab_index, type: number, default_value: 0, default_binding_prop: true,
   description: The current active tab, important: false}
+- {name: active_background, type: color, default_value: '', important: true, group: appearance}
 - {name: role, type: string, default_value: null, description: This component works well with the card role. Place a card below or above the tabs component,
   group: appearance, important: true}
 - name: align

client_code/utils/_component_helpers.py

@@ -107,14 +107,16 @@ def setter(self, value):
     return property(getter, setter, None, a_b)
 
 
-_primary = _app.theme_colors.get("Primary 500", "#2196F3")
+_primary_color = (window.document.querySelector("meta[name=theme-color]") or {}).get(
+    "content", "#2196F3"
+)
 
 
 def _get_color(value):
     if not value:
-        return _primary
+        return _primary_color
     elif value.startswith("theme:"):
-        return _app.theme_colors.get(value.replace("theme:", ""), _primary)
+        return _app.theme_colors.get(value.replace("theme:", ""), _primary_color)
     else:
         return value
 

docs/guides/components/tabs.rst

@@ -14,6 +14,10 @@ Properties
 
     Which tab should be active.
 
+:active_tab_background: color
+
+    the background of the active tab.
+
 :foreground: color
     the color of the highlight and text. Defaults to ``"theme:Primary 500"``