Skip to content

Commit

Permalink
dynamically mirror 'Other HTML elements' demo (#4232)
Browse files Browse the repository at this point in the history
In PR #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 <[email protected]>
  • Loading branch information
norlatif and falkoschindler authored Jan 16, 2025
1 parent a631eba commit 8d22555
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 24 deletions.
2 changes: 1 addition & 1 deletion website/documentation/content/html_documentation.py
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ def demo_inline() -> None:
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.
It is equivalent to using the `ui.element` method with the `tag` argument.
Expand Down
25 changes: 2 additions & 23 deletions website/documentation/content/section_text_elements.py
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
mermaid_documentation,
restructured_text_documentation,
)
from .html_documentation import other_html_elements_description, other_html_elements_title, other_html_elements

doc.title('*Text* Elements')

Expand All @@ -20,26 +21,4 @@
doc.intro(restructured_text_documentation)
doc.intro(mermaid_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)

0 comments on commit 8d22555

Please sign in to comment.