code review

website/documentation/content/tabs_documentation.py

@@ -57,25 +57,29 @@ def switch_tabs():
     ui.button('GoTo 2', on_click=lambda: tabs.set_value('Tab 2'))
 
 
-@doc.demo(
-    "Vertical tabs layout",
-    """
-    Based on [Quasar's vertical tabs](https://quasar.dev/vue-components/tabs#vertical) example,
-    we can combine `ui.splitter` and tabs elements to create a vertical tabs layout.
-""",
-)
+@doc.demo('Vertical tabs layout', '''
+    Like in [Quasar's vertical tabs example](https://quasar.dev/vue-components/tabs#vertical),
+    we can combine `ui.splitter` and tab elements to create a vertical tabs layout.
+''')
 def vertical_tabs():
-    with ui.splitter(value=20).classes('w-full') as splitter:
+    with ui.splitter(value=30).classes('w-full h-56') as splitter:
         with splitter.before:
             with ui.tabs().props('vertical').classes('w-full') as tabs:
-                one = ui.tab('One')
-                two = ui.tab('Two')
+                mail = ui.tab('Mails', icon='mail')
+                alarm = ui.tab('Alarms', icon='alarm')
+                movie = ui.tab('Movies', icon='movie')
         with splitter.after:
-            with ui.tab_panels(tabs, value=two).classes('w-full'):
-                with ui.tab_panel(one):
-                    ui.label('First tab')
-                with ui.tab_panel(two):
-                    ui.label('Second tab')
+            with ui.tab_panels(tabs, value=mail) \
+                    .props('vertical').classes('w-full h-full'):
+                with ui.tab_panel(mail):
+                    ui.label('Mails').classes('text-h4')
+                    ui.label('Content of mails')
+                with ui.tab_panel(alarm):
+                    ui.label('Alarms').classes('text-h4')
+                    ui.label('Content of alarms')
+                with ui.tab_panel(movie):
+                    ui.label('Movies').classes('text-h4')
+                    ui.label('Content of movies')
 
 
 doc.reference(ui.tabs, title='Reference for ui.tabs')