I can add and show tabs with lazy loading and content management
This commit is contained in:
@@ -327,7 +327,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden; /* important */
|
/*overflow: hidden; important */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Individual Tab Button using DaisyUI tab classes */
|
/* Individual Tab Button using DaisyUI tab classes */
|
||||||
|
|||||||
@@ -272,6 +272,30 @@ class TabsManager(MultipleInstance):
|
|||||||
None,
|
None,
|
||||||
True))
|
True))
|
||||||
|
|
||||||
|
def _mk_tabs_controller(self):
|
||||||
|
return Div(
|
||||||
|
Div(id=f"{self._id}-content-controller", data_active_tab=f"{self._state.active_tab}"),
|
||||||
|
Script(f'updateTabs("{self._id}-content-controller");'),
|
||||||
|
)
|
||||||
|
|
||||||
|
def _mk_tabs_header(self, oob=False):
|
||||||
|
# Create visible tab buttons
|
||||||
|
visible_tab_buttons = [
|
||||||
|
self._mk_tab_button(tab_id, self._state.tabs[tab_id])
|
||||||
|
for tab_id in self._state.tabs_order
|
||||||
|
if tab_id in self._state.tabs
|
||||||
|
]
|
||||||
|
|
||||||
|
header_content = [*visible_tab_buttons]
|
||||||
|
|
||||||
|
return Div(
|
||||||
|
Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"),
|
||||||
|
self._mk_show_tabs_menu(),
|
||||||
|
id=f"{self._id}-header-wrapper",
|
||||||
|
cls="mf-tabs-header-wrapper",
|
||||||
|
hx_swap_oob="true" if oob else None
|
||||||
|
)
|
||||||
|
|
||||||
def _mk_tab_button(self, tab_id: str, tab_data: dict, in_dropdown: bool = False):
|
def _mk_tab_button(self, tab_id: str, tab_data: dict, in_dropdown: bool = False):
|
||||||
"""
|
"""
|
||||||
Create a single tab button with its label and close button.
|
Create a single tab button with its label and close button.
|
||||||
@@ -306,38 +330,6 @@ class TabsManager(MultipleInstance):
|
|||||||
data_manager_id=self._id
|
data_manager_id=self._id
|
||||||
)
|
)
|
||||||
|
|
||||||
def _mk_tabs_header(self, oob=False):
|
|
||||||
# Create visible tab buttons
|
|
||||||
visible_tab_buttons = [
|
|
||||||
self._mk_tab_button(tab_id, self._state.tabs[tab_id])
|
|
||||||
for tab_id in self._state.tabs_order
|
|
||||||
if tab_id in self._state.tabs
|
|
||||||
]
|
|
||||||
|
|
||||||
header_content = [*visible_tab_buttons]
|
|
||||||
|
|
||||||
return Div(
|
|
||||||
Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"),
|
|
||||||
self._mk_show_tabs_menu(),
|
|
||||||
id=f"{self._id}-header-wrapper",
|
|
||||||
cls="mf-tabs-header-wrapper",
|
|
||||||
hx_swap_oob="true" if oob else None
|
|
||||||
),
|
|
||||||
|
|
||||||
def _mk_tabs_controller(self):
|
|
||||||
return Div(
|
|
||||||
Div(id=f"{self._id}-content-controller", data_active_tab=f"{self._state.active_tab}"),
|
|
||||||
Script(f'updateTabs("{self._id}-content-controller");'),
|
|
||||||
)
|
|
||||||
|
|
||||||
def _mk_tab_content(self, tab_id: str, content):
|
|
||||||
is_active = tab_id == self._state.active_tab
|
|
||||||
return Div(
|
|
||||||
content if content else Div("No Content", cls="mf-empty-content"),
|
|
||||||
cls=f"mf-tab-content {'hidden' if not is_active else ''}", # ← ici
|
|
||||||
id=f"{self._id}-{tab_id}-content",
|
|
||||||
)
|
|
||||||
|
|
||||||
def _mk_tab_content_wrapper(self):
|
def _mk_tab_content_wrapper(self):
|
||||||
"""
|
"""
|
||||||
Create the active tab content area.
|
Create the active tab content area.
|
||||||
@@ -357,6 +349,14 @@ class TabsManager(MultipleInstance):
|
|||||||
id=f"{self._id}-content-wrapper",
|
id=f"{self._id}-content-wrapper",
|
||||||
)
|
)
|
||||||
|
|
||||||
|
def _mk_tab_content(self, tab_id: str, content):
|
||||||
|
is_active = tab_id == self._state.active_tab
|
||||||
|
return Div(
|
||||||
|
content if content else Div("No Content", cls="mf-empty-content"),
|
||||||
|
cls=f"mf-tab-content {'hidden' if not is_active else ''}", # ← ici
|
||||||
|
id=f"{self._id}-{tab_id}-content",
|
||||||
|
)
|
||||||
|
|
||||||
def _mk_show_tabs_menu(self):
|
def _mk_show_tabs_menu(self):
|
||||||
return Div(
|
return Div(
|
||||||
mk.icon(tabs24_regular,
|
mk.icon(tabs24_regular,
|
||||||
@@ -365,6 +365,8 @@ class TabsManager(MultipleInstance):
|
|||||||
role="button",
|
role="button",
|
||||||
cls="btn btn-xs"),
|
cls="btn btn-xs"),
|
||||||
Div(
|
Div(
|
||||||
|
Div("content"),
|
||||||
|
Div("content"),
|
||||||
Div("content"),
|
Div("content"),
|
||||||
tabindex="-1",
|
tabindex="-1",
|
||||||
cls="dropdown-content menu w-52 rounded-box bg-base-300 shadow-xl"
|
cls="dropdown-content menu w-52 rounded-box bg-base-300 shadow-xl"
|
||||||
|
|||||||
Reference in New Issue
Block a user