add all text elements

website/documentation/content/overview.py

@@ -59,7 +59,7 @@ class Overview(Documentation):
                             .classes('bg-[#5898d420] p-4 self-stretch rounded flex flex-col gap-2') \
                             .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
                         if documentation.title:
-                            ui.label(documentation.title).classes(replace='text-2xl')
+                            ui.label(documentation.title.replace('*', '')).classes(replace='text-2xl')
                         ui.markdown(description).classes(replace='bold-links arrow-links')
 
         self.add_markdown('Actions', '''

website/documentation/content/sections/text_elements.py

@@ -1,8 +1,20 @@
 from ...model import SectionDocumentation
+from ...more.chat_message_documentation import ChatMessageDocumentation
+from ...more.element_documentation import ElementDocumentation
+from ...more.html_documentation import HtmlDocumentation
 from ...more.label_documentation import LabelDocumentation
+from ...more.link_documentation import LinkDocumentation
+from ...more.markdown_documentation import MarkdownDocumentation
+from ...more.mermaid_documentation import MermaidDocumentation
 
 
 class TextElementsDocumentation(SectionDocumentation, title='*Text* Elements', name='text_elements'):
 
     def content(self) -> None:
         self.add_element_intro(LabelDocumentation())
+        self.add_element_intro(LinkDocumentation())
+        self.add_element_intro(ChatMessageDocumentation())
+        self.add_element_intro(ElementDocumentation())
+        self.add_element_intro(MarkdownDocumentation())
+        self.add_element_intro(MermaidDocumentation())
+        self.add_element_intro(HtmlDocumentation())

website/documentation/model.py

@@ -58,12 +58,12 @@ class Documentation(abc.ABC):
             return function
         return decorator
 
-    def add_element_intro(self, documentation: ElementDocumentation) -> None:
+    def add_element_intro(self, documentation: UiElementDocumentation) -> None:
         """Add an element intro section to the documentation."""
         documentation.back_link = self.route
         self.add_main_element_demo(documentation, intro_only=True)
 
-    def add_main_element_demo(self, documentation: ElementDocumentation, *, intro_only: bool = False) -> None:
+    def add_main_element_demo(self, documentation: UiElementDocumentation, *, intro_only: bool = False) -> None:
         """Add a demo section for an element to the documentation."""
         title, doc = documentation.element.__init__.__doc__.split('\n', 1)  # type: ignore
         doc = remove_indentation(doc).replace('param ', '')
@@ -100,7 +100,7 @@ class SectionDocumentation(Documentation):
         super().__init__(self._route, subtitle='Documentation', title=self._title, back_link='/documentation')
 
 
-class ElementDocumentation(Documentation):
+class UiElementDocumentation(Documentation):
     _element: type
 
     def __init_subclass__(cls, element: type) -> None:
@@ -116,9 +116,9 @@ class ElementDocumentation(Documentation):
     def main_demo(self) -> None:
         """Add a demo for the element here."""
 
-    def more_demos(self) -> None:
+    def more(self) -> None:
         """Add more demos for the element here."""
 
     def content(self) -> None:
         self.add_main_element_demo(self)
-        self.more_demos()
+        self.more()

website/documentation/more/chat_message_documentation.py

@@ -1,39 +1,40 @@
 from nicegui import ui
 
-from ..tools import text_demo
-
-
-def main_demo() -> None:
-    ui.chat_message('Hello NiceGUI!',
-                    name='Robot',
-                    stamp='now',
-                    avatar='https://robohash.org/ui')
-
-
-def more() -> None:
-    @text_demo('HTML text', '''
-        Using the `text_html` parameter, you can send HTML text to the chat.
-    ''')
-    def html_text():
-        ui.chat_message('Without <strong>HTML</strong>')
-        ui.chat_message('With <strong>HTML</strong>', text_html=True)
-
-    @text_demo('Newline', '''
-        You can use newlines in the chat message.
-    ''')
-    def newline():
-        ui.chat_message('This is a\nlong line!')
-
-    @text_demo('Multi-part messages', '''
-        You can send multiple message parts by passing a list of strings.
-    ''')
-    def multiple_messages():
-        ui.chat_message(['Hi! 😀', 'How are you?'])
-
-    @text_demo('Chat message with child elements', '''
-        You can add child elements to a chat message.
-    ''')
-    def child_elements():
-        with ui.chat_message():
-            ui.label('Guess where I am!')
-            ui.image('https://picsum.photos/id/249/640/360').classes('w-64')
+from ..model import UiElementDocumentation
+
+
+class ChatMessageDocumentation(UiElementDocumentation, element=ui.chat_message):
+
+    def main_demo(self) -> None:
+        ui.chat_message('Hello NiceGUI!',
+                        name='Robot',
+                        stamp='now',
+                        avatar='https://robohash.org/ui')
+
+    def more(self) -> None:
+        @self.add_markdown_demo('HTML text', '''
+            Using the `text_html` parameter, you can send HTML text to the chat.
+        ''')
+        def html_text():
+            ui.chat_message('Without <strong>HTML</strong>')
+            ui.chat_message('With <strong>HTML</strong>', text_html=True)
+
+        @self.add_markdown_demo('Newline', '''
+            You can use newlines in the chat message.
+        ''')
+        def newline():
+            ui.chat_message('This is a\nlong line!')
+
+        @self.add_markdown_demo('Multi-part messages', '''
+            You can send multiple message parts by passing a list of strings.
+        ''')
+        def multiple_messages():
+            ui.chat_message(['Hi! 😀', 'How are you?'])
+
+        @self.add_markdown_demo('Chat message with child elements', '''
+            You can add child elements to a chat message.
+        ''')
+        def child_elements():
+            with ui.chat_message():
+                ui.label('Guess where I am!')
+                ui.image('https://picsum.photos/id/249/640/360').classes('w-64')

website/documentation/more/element_documentation.py

@@ -1,67 +1,68 @@
 from nicegui import ui
 
-from ..tools import text_demo
+from ..model import UiElementDocumentation
 
 
-def main_demo() -> None:
-    with ui.element('div').classes('p-2 bg-blue-100'):
-        ui.label('inside a colored div')
+class ElementDocumentation(UiElementDocumentation, element=ui.element):
 
+    def main_demo(self) -> None:
+        with ui.element('div').classes('p-2 bg-blue-100'):
+            ui.label('inside a colored div')
 
-def more() -> None:
-    @text_demo('Move elements', '''
-        This demo shows how to move elements between or within containers.
-    ''')
-    def move_elements() -> None:
-        with ui.card() as a:
-            ui.label('A')
-            x = ui.label('X')
+    def more(self) -> None:
+        @self.add_markdown_demo('Move elements', '''
+            This demo shows how to move elements between or within containers.
+        ''')
+        def move_elements() -> None:
+            with ui.card() as a:
+                ui.label('A')
+                x = ui.label('X')
 
-        with ui.card() as b:
-            ui.label('B')
+            with ui.card() as b:
+                ui.label('B')
 
-        ui.button('Move X to A', on_click=lambda: x.move(a))
-        ui.button('Move X to B', on_click=lambda: x.move(b))
-        ui.button('Move X to top', on_click=lambda: x.move(target_index=0))
+            ui.button('Move X to A', on_click=lambda: x.move(a))
+            ui.button('Move X to B', on_click=lambda: x.move(b))
+            ui.button('Move X to top', on_click=lambda: x.move(target_index=0))
 
-    @text_demo('Default props', '''
-        You can set default props for all elements of a certain class.
-        This way you can avoid repeating the same props over and over again.
-        
-        Default props only apply to elements created after the default props were set.
-        Subclasses inherit the default props of their parent class.
-    ''')
-    def default_props() -> None:
-        ui.button.default_props('rounded outline')
-        ui.button('Button A')
-        ui.button('Button B')
-        # END OF DEMO
-        ui.button.default_props(remove='rounded outline')
+        @self.add_markdown_demo('Default props', '''
+            You can set default props for all elements of a certain class.
+            This way you can avoid repeating the same props over and over again.
+            
+            Default props only apply to elements created after the default props were set.
+            Subclasses inherit the default props of their parent class.
+        ''')
+        def default_props() -> None:
+            ui.button.default_props('rounded outline')
+            ui.button('Button A')
+            ui.button('Button B')
+            # END OF DEMO
+            ui.button.default_props(remove='rounded outline')
 
-    @text_demo('Default classes', '''
-        You can set default classes for all elements of a certain class.
-        This way you can avoid repeating the same classes over and over again.
-        
-        Default classes only apply to elements created after the default classes were set.
-        Subclasses inherit the default classes of their parent class.
-    ''')
-    def default_classes() -> None:
-        ui.label.default_classes('bg-blue-100 p-2')
-        ui.label('Label A')
-        ui.label('Label B')
-        # END OF DEMO
-        ui.label.default_classes(remove='bg-blue-100 p-2')
+        @self.add_markdown_demo('Default classes', '''
+            You can set default classes for all elements of a certain class.
+            This way you can avoid repeating the same classes over and over again.
+            
+            Default classes only apply to elements created after the default classes were set.
+            Subclasses inherit the default classes of their parent class.
+        ''')
+        def default_classes() -> None:
+            ui.label.default_classes('bg-blue-100 p-2')
+            ui.label('Label A')
+            ui.label('Label B')
+            # END OF DEMO
+            ui.label.default_classes(remove='bg-blue-100 p-2')
 
-    @text_demo('Default style', '''
-        You can set a default style for all elements of a certain class.
-        This way you can avoid repeating the same style over and over again.
-        
-        A default style only applies to elements created after the default style was set.
-        Subclasses inherit the default style of their parent class.
-    ''')
-    def default_style() -> None:
-        ui.label.default_style('color: tomato')
-        ui.label('Label A')
-        ui.label('Label B')
-        # END OF DEMO
-        ui.label.default_style(remove='color: tomato')
+        @self.add_markdown_demo('Default style', '''
+            You can set a default style for all elements of a certain class.
+            This way you can avoid repeating the same style over and over again.
+            
+            A default style only applies to elements created after the default style was set.
+            Subclasses inherit the default style of their parent class.
+        ''')
+        def default_style() -> None:
+            ui.label.default_style('color: tomato')
+            ui.label('Label A')
+            ui.label('Label B')
+            # END OF DEMO
+            ui.label.default_style(remove='color: tomato')

website/documentation/more/html_documentation.py

@@ -1,5 +1,9 @@
 from nicegui import ui
 
+from ..model import UiElementDocumentation
 
-def main_demo() -> None:
-    ui.html('This is <strong>HTML</strong>.')
+
+class HtmlDocumentation(UiElementDocumentation, element=ui.html):
+
+    def main_demo(self) -> None:
+        ui.html('This is <strong>HTML</strong>.')

website/documentation/more/label_documentation.py

@@ -1,14 +1,14 @@
 from nicegui import ui
 
-from ..model import ElementDocumentation
+from ..model import UiElementDocumentation
 
 
-class LabelDocumentation(ElementDocumentation, element=ui.label):
+class LabelDocumentation(UiElementDocumentation, element=ui.label):
 
     def main_demo(self) -> None:
         ui.label('some label')
 
-    def more_demos(self) -> None:
+    def more(self) -> None:
         @self.add_markdown_demo('Change Appearance Depending on the Content', '''
             You can overwrite the `_handle_text_change` method to update other attributes of a label depending on its content. 
             This technique also works for bindings as shown in the example below.

website/documentation/more/link_documentation.py

@@ -1,54 +1,55 @@
 from nicegui import ui
 
 from ...style import link_target
-from ..tools import text_demo
-
-
-def main_demo() -> None:
-    ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
-
-
-def more() -> None:
-    @text_demo('Navigate on large pages', '''
-        To jump to a specific location within a page you can place linkable anchors with `ui.link_target('target_name')`
-        or simply pass a NiceGUI element as link target.
-    ''')
-    def same_page_links():
-        navigation = ui.row()
-        # ui.link_target('target_A')
-        link_target('target_A', '-10px')  # HIDE
-        ui.label(
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, '
-            'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        )
-        link_target('target_B', '70px')  # HIDE
-        label_B = ui.label(
-            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '
-            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. '
-            'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-        )
-        with navigation:
-            ui.link('Goto A', '#target_A')
-            # ui.link('Goto B', label_B)
-            ui.link('Goto B', '#target_B')  # HIDE
-
-    @text_demo('Links to other pages', '''
-        You can link to other pages by providing the link target as path or function reference.
-    ''')
-    def link_to_other_page():
-        @ui.page('/some_other_page')
-        def my_page():
-            ui.label('This is another page')
-
-        ui.label('Go to other page')
-        ui.link('... with path', '/some_other_page')
-        ui.link('... with function reference', my_page)
-
-    @text_demo('Link from images and other elements', '''
-        By nesting elements inside a link you can make the whole element clickable.
-        This works with all elements but is most useful for non-interactive elements like 
-        [ui.image](/documentation/image), [ui.avatar](/documentation/image) etc.
-    ''')
-    def link_from_elements():
-        with ui.link(target='https://github.com/zauberzeug/nicegui'):
-            ui.image('https://picsum.photos/id/41/640/360').classes('w-64')
+from ..model import UiElementDocumentation
+
+
+class LinkDocumentation(UiElementDocumentation, element=ui.link):
+
+    def main_demo(self) -> None:
+        ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
+
+    def more(self) -> None:
+        @self.add_markdown_demo('Navigate on large pages', '''
+            To jump to a specific location within a page you can place linkable anchors with `ui.link_target('target_name')`
+            or simply pass a NiceGUI element as link target.
+        ''')
+        def same_page_links():
+            navigation = ui.row()
+            # ui.link_target('target_A')
+            link_target('target_A', '-10px')  # HIDE
+            ui.label(
+                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, '
+                'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+            )
+            link_target('target_B', '70px')  # HIDE
+            label_B = ui.label(
+                'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '
+                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. '
+                'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            )
+            with navigation:
+                ui.link('Goto A', '#target_A')
+                # ui.link('Goto B', label_B)
+                ui.link('Goto B', '#target_B')  # HIDE
+
+        @self.add_markdown_demo('Links to other pages', '''
+            You can link to other pages by providing the link target as path or function reference.
+        ''')
+        def link_to_other_page():
+            @ui.page('/some_other_page')
+            def my_page():
+                ui.label('This is another page')
+
+            ui.label('Go to other page')
+            ui.link('... with path', '/some_other_page')
+            ui.link('... with function reference', my_page)
+
+        @self.add_markdown_demo('Link from images and other elements', '''
+            By nesting elements inside a link you can make the whole element clickable.
+            This works with all elements but is most useful for non-interactive elements like 
+            [ui.image](/documentation/image), [ui.avatar](/documentation/image) etc.
+        ''')
+        def link_from_elements():
+            with ui.link(target='https://github.com/zauberzeug/nicegui'):
+                ui.image('https://picsum.photos/id/41/640/360').classes('w-64')

website/documentation/more/markdown_documentation.py

@@ -1,53 +1,54 @@
 from nicegui import ui
 
-from ..tools import text_demo
+from ..model import UiElementDocumentation
 
 
-def main_demo() -> None:
-    ui.markdown('''This is **Markdown**.''')
+class MarkdownDocumentation(UiElementDocumentation, element=ui.markdown):
 
+    def main_demo(self) -> None:
+        ui.markdown('''This is **Markdown**.''')
 
-def more() -> None:
-    @text_demo('Markdown with indentation', '''
-        Common indentation is automatically stripped from the beginning of each line.
-        So you can indent markdown elements, and they will still be rendered correctly.
-    ''')
-    def markdown_with_indentation():
-        ui.markdown('''
-            ### Example
-
-            This line is not indented.
-
-                This block is indented.
-                Thus it is rendered as source code.
-            
-            This is normal text again.
+    def more(self) -> None:
+        @self.add_markdown_demo('Markdown with indentation', '''
+            Common indentation is automatically stripped from the beginning of each line.
+            So you can indent markdown elements, and they will still be rendered correctly.
         ''')
+        def markdown_with_indentation():
+            ui.markdown('''
+                ### Example
+
+                This line is not indented.
+
+                    This block is indented.
+                    Thus it is rendered as source code.
+                
+                This is normal text again.
+            ''')
+
+        @self.add_markdown_demo('Markdown with code blocks', '''
+            You can use code blocks to show code examples.
+            If you specify the language after the opening triple backticks, the code will be syntax highlighted.
+            See [the Pygments website](https://pygments.org/languages/) for a list of supported languages.
+        ''')
+        def markdown_with_code_blocks():
+            ui.markdown('''
+                ```python
+                from nicegui import ui
 
-    @text_demo('Markdown with code blocks', '''
-        You can use code blocks to show code examples.
-        If you specify the language after the opening triple backticks, the code will be syntax highlighted.
-        See [the Pygments website](https://pygments.org/languages/) for a list of supported languages.
-    ''')
-    def markdown_with_code_blocks():
-        ui.markdown('''
-            ```python
-            from nicegui import ui
+                ui.label('Hello World!')
 
-            ui.label('Hello World!')
+                ui.run(dark=True)
+                ```
+            ''')
 
-            ui.run(dark=True)
-            ```
+        @self.add_markdown_demo('Markdown tables', '''
+            By activating the "tables" extra, you can use Markdown tables.
+            See the [markdown2 documentation](https://github.com/trentm/python-markdown2/wiki/Extras#implemented-extras) for a list of available extras.
         ''')
-
-    @text_demo('Markdown tables', '''
-        By activating the "tables" extra, you can use Markdown tables.
-        See the [markdown2 documentation](https://github.com/trentm/python-markdown2/wiki/Extras#implemented-extras) for a list of available extras.
-    ''')
-    def markdown_with_code_blocks():
-        ui.markdown('''
-            | First name | Last name |
-            | ---------- | --------- |
-            | Max        | Planck    |
-            | Marie      | Curie     |
-        ''', extras=['tables'])
+        def markdown_tables():
+            ui.markdown('''
+                | First name | Last name |
+                | ---------- | --------- |
+                | Max        | Planck    |
+                | Marie      | Curie     |
+            ''', extras=['tables'])

website/documentation/more/mermaid_documentation.py

@@ -1,9 +1,13 @@
 from nicegui import ui
 
+from ..model import UiElementDocumentation
 
-def main_demo() -> None:
-    ui.mermaid('''
-    graph LR;
-        A --> B;
-        A --> C;
-    ''')
+
+class MermaidDocumentation(UiElementDocumentation, element=ui.mermaid):
+
+    def main_demo(self) -> None:
+        ui.mermaid('''
+        graph LR;
+            A --> B;
+            A --> C;
+        ''')

website/documentation/rendering.py

@@ -2,7 +2,7 @@ from nicegui import ui
 
 from ..header import add_head_html, add_header
 from ..style import section_heading
-from .model import Documentation, ElementDocumentation
+from .model import Documentation, UiElementDocumentation
 from .tools import generate_class_doc
 
 
@@ -22,7 +22,7 @@ def render_page(documentation: Documentation, *, is_main: bool = False) -> None:
                 .classes('column no-wrap gap-1 bg-[#eee] dark:bg-[#1b1b1b] mt-[-20px] px-8 py-20') \
                 .style('height: calc(100% + 20px) !important') as menu:
             ui.markdown(f'[← back]({documentation.back_link})').classes('bold-links')
-            ui.markdown('**Demos**' if len(documentation) > 1 else '**Demo**').classes('mt-4')
+            ui.markdown(f'**{documentation.title.replace("*", "")}**').classes('mt-4')
             for part in documentation:
                 if part.title and part.link_target:
                     ui.link(part.title, f'#{part.link_target}')
@@ -49,7 +49,7 @@ def render_page(documentation: Documentation, *, is_main: bool = False) -> None:
                 part.function()
 
         # reference
-        if isinstance(documentation, ElementDocumentation) and menu:
+        if isinstance(documentation, UiElementDocumentation) and menu:
             with menu:
                 ui.markdown('**Reference**').classes('mt-4')
             ui.markdown('## Reference').classes('mt-16')