瀏覽代碼

dynamically mirror 'Other HTML elements' demo (#4232)

In PR https://github.com/zauberzeug/nicegui/pull/4027 it was decided to
copy&paste the other HTML section because we want the users to find it
both under "text elements" as well as when looking into the ui.html
element. Duplicating the section isn't a very nice solution though.
Maybe this PR is a better idea for keeping the information in both
places?

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>
Noor Latif 4 月之前
父節點
當前提交
8d2255594e

+ 1 - 1
website/documentation/content/html_documentation.py

@@ -15,7 +15,7 @@ def demo_inline() -> None:
     ui.html('This is <u>emphasized</u>.', tag='em')
     ui.html('This is <u>emphasized</u>.', tag='em')
 
 
 
 
-@doc.demo('Other HTML Elements', '''
+@doc.demo(other_html_elements_title := 'Other HTML Elements', other_html_elements_description := '''
     There is also an `html` module that allows you to insert other HTML elements like `<span>`, `<div>`, `<p>`, etc.
     There is also an `html` module that allows you to insert other HTML elements like `<span>`, `<div>`, `<p>`, etc.
     It is equivalent to using the `ui.element` method with the `tag` argument.
     It is equivalent to using the `ui.element` method with the `tag` argument.
 
 

+ 2 - 23
website/documentation/content/section_text_elements.py

@@ -9,6 +9,7 @@ from . import (
     mermaid_documentation,
     mermaid_documentation,
     restructured_text_documentation,
     restructured_text_documentation,
 )
 )
+from .html_documentation import other_html_elements_description, other_html_elements_title, other_html_elements
 
 
 doc.title('*Text* Elements')
 doc.title('*Text* Elements')
 
 
@@ -20,26 +21,4 @@ doc.intro(markdown_documentation)
 doc.intro(restructured_text_documentation)
 doc.intro(restructured_text_documentation)
 doc.intro(mermaid_documentation)
 doc.intro(mermaid_documentation)
 doc.intro(html_documentation)
 doc.intro(html_documentation)
-
-
-@doc.demo('Other HTML Elements', '''
-    There is an `html` module that allows you to insert other HTML elements like `<span>`, `<div>`, `<p>`, etc.
-    It is equivalent to using the `ui.element` method with the `tag` argument.
-
-    Like with any other element, you can add classes, style, props, tooltips and events.
-    One convenience is that the keyword arguments are automatically added to the element's `props` dictionary.
-
-    *Added in version 2.5.0*
-''')
-def other_html_elements():
-    from nicegui import html, ui
-
-    with html.section().style('font-size: 120%'):
-        html.strong('This is bold.') \
-            .classes('cursor-pointer') \
-            .on('click', lambda: ui.notify('Bold!'))
-        html.hr()
-        html.em('This is italic.').tooltip('Nice!')
-        with ui.row():
-            html.img().props('src=https://placehold.co/60')
-            html.img(src='https://placehold.co/60')
+doc.demo(other_html_elements_title, other_html_elements_description)(other_html_elements)