From cd85e5056736d5c550e5db1d10a8a880848c68fa Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Fri, 18 Oct 2024 21:51:49 +0200 Subject: [PATCH 1/6] introduce html module --- nicegui/__init__.py | 3 +- nicegui/html.py | 134 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 nicegui/html.py diff --git a/nicegui/__init__.py b/nicegui/__init__.py index c59026d20..ade51999b 100644 --- a/nicegui/__init__.py +++ b/nicegui/__init__.py @@ -1,4 +1,4 @@ -from . import elements, run, ui +from . import elements, html, run, ui from .api_router import APIRouter from .app.app import App from .client import Client @@ -16,6 +16,7 @@ 'context', 'ElementFilter', 'elements', + 'html', 'run', 'Tailwind', 'ui', diff --git a/nicegui/html.py b/nicegui/html.py new file mode 100644 index 000000000..2c34643c4 --- /dev/null +++ b/nicegui/html.py @@ -0,0 +1,134 @@ +from typing import Optional + +from .element import Element + + +def _create_html_element(tag: str): + class HTMLElement(Element): + def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: + super().__init__(tag) + self._text = inner_html + self.props.update(**kwargs) + return HTMLElement + + +a = _create_html_element('a') +abbr = _create_html_element('abbr') +acronym = _create_html_element('acronym') +address = _create_html_element('address') +applet = _create_html_element('applet') +area = _create_html_element('area') +article = _create_html_element('article') +aside = _create_html_element('aside') +audio = _create_html_element('audio') +b = _create_html_element('b') +base = _create_html_element('base') +basefont = _create_html_element('basefont') +bdi = _create_html_element('bdi') +bdo = _create_html_element('bdo') +big = _create_html_element('big') +blockquote = _create_html_element('blockquote') +body = _create_html_element('body') +br = _create_html_element('br') +button = _create_html_element('button') +canvas = _create_html_element('canvas') +caption = _create_html_element('caption') +center = _create_html_element('center') +cite = _create_html_element('cite') +code = _create_html_element('code') +col = _create_html_element('col') +colgroup = _create_html_element('colgroup') +data = _create_html_element('data') +datalist = _create_html_element('datalist') +dd = _create_html_element('dd') +del_ = _create_html_element('del') +details = _create_html_element('details') +dfn = _create_html_element('dfn') +dialog = _create_html_element('dialog') +dir_ = _create_html_element('dir') +div = _create_html_element('div') +dl = _create_html_element('dl') +dt = _create_html_element('dt') +em = _create_html_element('em') +embed = _create_html_element('embed') +fieldset = _create_html_element('fieldset') +figcaption = _create_html_element('figcaption') +figure = _create_html_element('figure') +font = _create_html_element('font') +footer = _create_html_element('footer') +form = _create_html_element('form') +frame = _create_html_element('frame') +frameset = _create_html_element('frameset') +h1 = _create_html_element('h1') +head = _create_html_element('head') +header = _create_html_element('header') +hgroup = _create_html_element('hgroup') +hr = _create_html_element('hr') +html = _create_html_element('html') +i = _create_html_element('i') +iframe = _create_html_element('iframe') +img = _create_html_element('img') +input_ = _create_html_element('input') +ins = _create_html_element('ins') +kbd = _create_html_element('kbd') +label = _create_html_element('label') +legend = _create_html_element('legend') +li = _create_html_element('li') +link = _create_html_element('link') +main = _create_html_element('main') +map_ = _create_html_element('map') +mark = _create_html_element('mark') +menu = _create_html_element('menu') +meta = _create_html_element('meta') +meter = _create_html_element('meter') +nav = _create_html_element('nav') +noframes = _create_html_element('noframes') +noscript = _create_html_element('noscript') +object_ = _create_html_element('object') +ol = _create_html_element('ol') +optgroup = _create_html_element('optgroup') +option = _create_html_element('option') +output = _create_html_element('output') +p = _create_html_element('p') +param = _create_html_element('param') +picture = _create_html_element('picture') +pre = _create_html_element('pre') +progress = _create_html_element('progress') +q = _create_html_element('q') +rp = _create_html_element('rp') +rt = _create_html_element('rt') +ruby = _create_html_element('ruby') +s = _create_html_element('s') +samp = _create_html_element('samp') +script = _create_html_element('script') +search = _create_html_element('search') +section = _create_html_element('section') +select = _create_html_element('select') +small = _create_html_element('small') +source = _create_html_element('source') +span = _create_html_element('span') +strike = _create_html_element('strike') +strong = _create_html_element('strong') +style = _create_html_element('style') +sub = _create_html_element('sub') +summary = _create_html_element('summary') +sup = _create_html_element('sup') +svg = _create_html_element('svg') +table = _create_html_element('table') +tbody = _create_html_element('tbody') +td = _create_html_element('td') +template = _create_html_element('template') +textarea = _create_html_element('textarea') +tfoot = _create_html_element('tfoot') +th = _create_html_element('th') +thead = _create_html_element('thead') +time = _create_html_element('time') +title = _create_html_element('title') +tr = _create_html_element('tr') +track = _create_html_element('track') +tt = _create_html_element('tt') +u = _create_html_element('u') +ul = _create_html_element('ul') +var = _create_html_element('var') +video = _create_html_element('video') +wbr = _create_html_element('wbr') From 48100a4ec31715c33e500fe47b75e247cb2be839 Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Thu, 24 Oct 2024 18:19:11 +0200 Subject: [PATCH 2/6] add documentation --- .../content/section_text_elements.py | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/website/documentation/content/section_text_elements.py b/website/documentation/content/section_text_elements.py index 1b50ca02e..b0f553774 100644 --- a/website/documentation/content/section_text_elements.py +++ b/website/documentation/content/section_text_elements.py @@ -20,3 +20,19 @@ 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 ``, `
`, `

`, etc. + It is equivalent to using the `ui.element` method with the `tag` argument. + Like any other element, you can add classes, style, props, tooltips and events. +''') +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!') From e5cf645b0f4bac3c96f254400f7839e4c4ef3144 Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Thu, 24 Oct 2024 18:22:44 +0200 Subject: [PATCH 3/6] add pytest --- tests/test_html.py | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 tests/test_html.py diff --git a/tests/test_html.py b/tests/test_html.py new file mode 100644 index 000000000..495af9903 --- /dev/null +++ b/tests/test_html.py @@ -0,0 +1,17 @@ +from nicegui import html, ui +from nicegui.testing import Screen + + +def test_html_element(screen: Screen): + ui.html('This is strong.', tag='strong') + + screen.open('/') + assert screen.find_by_tag('strong').text == 'This is strong.' + + +def test_html_button(screen: Screen): + html.button('Click me').on('click', lambda: ui.notify('Hi!')) + + screen.open('/') + screen.click('Click me') + screen.should_contain('Hi!') From 4e07df214038ab41347db638711eecdcb68893a6 Mon Sep 17 00:00:00 2001 From: Rodja Trappe Date: Fri, 25 Oct 2024 06:15:49 +0200 Subject: [PATCH 4/6] provide info and demo on how to set props --- website/documentation/content/section_text_elements.py | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/website/documentation/content/section_text_elements.py b/website/documentation/content/section_text_elements.py index b0f553774..00151a308 100644 --- a/website/documentation/content/section_text_elements.py +++ b/website/documentation/content/section_text_elements.py @@ -25,7 +25,9 @@ @doc.demo('Other HTML Elements', ''' There is an `html` module that allows you to insert other HTML elements like ``, `

`, `

`, etc. It is equivalent to using the `ui.element` method with the `tag` argument. + Like any other element, you can add classes, style, props, tooltips and events. + One convenience is that the kwargs are automatically added to the element's `props` dictionary. ''') def other_html_elements(): from nicegui import html, ui @@ -36,3 +38,6 @@ def other_html_elements(): .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') From 81f86aaba1f89d865e334fe148715afaec61fcc8 Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Fri, 25 Oct 2024 07:20:54 +0200 Subject: [PATCH 5/6] review --- website/documentation/content/section_text_elements.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/documentation/content/section_text_elements.py b/website/documentation/content/section_text_elements.py index 00151a308..e34a93d7e 100644 --- a/website/documentation/content/section_text_elements.py +++ b/website/documentation/content/section_text_elements.py @@ -26,8 +26,8 @@ There is an `html` module that allows you to insert other HTML elements like ``, `

`, `

`, etc. It is equivalent to using the `ui.element` method with the `tag` argument. - Like any other element, you can add classes, style, props, tooltips and events. - One convenience is that the kwargs are automatically added to the element's `props` dictionary. + 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. ''') def other_html_elements(): from nicegui import html, ui From 7fea408be17070eb44c755dde974ae34c7850c8e Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Fri, 25 Oct 2024 17:01:03 +0200 Subject: [PATCH 6/6] remove useless and deprecated elements --- nicegui/html.py | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/nicegui/html.py b/nicegui/html.py index 2c34643c4..a51bc2afa 100644 --- a/nicegui/html.py +++ b/nicegui/html.py @@ -16,24 +16,20 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: abbr = _create_html_element('abbr') acronym = _create_html_element('acronym') address = _create_html_element('address') -applet = _create_html_element('applet') area = _create_html_element('area') article = _create_html_element('article') aside = _create_html_element('aside') audio = _create_html_element('audio') b = _create_html_element('b') -base = _create_html_element('base') basefont = _create_html_element('basefont') bdi = _create_html_element('bdi') bdo = _create_html_element('bdo') big = _create_html_element('big') blockquote = _create_html_element('blockquote') -body = _create_html_element('body') br = _create_html_element('br') button = _create_html_element('button') canvas = _create_html_element('canvas') caption = _create_html_element('caption') -center = _create_html_element('center') cite = _create_html_element('cite') code = _create_html_element('code') col = _create_html_element('col') @@ -45,7 +41,6 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: details = _create_html_element('details') dfn = _create_html_element('dfn') dialog = _create_html_element('dialog') -dir_ = _create_html_element('dir') div = _create_html_element('div') dl = _create_html_element('dl') dt = _create_html_element('dt') @@ -54,17 +49,11 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: fieldset = _create_html_element('fieldset') figcaption = _create_html_element('figcaption') figure = _create_html_element('figure') -font = _create_html_element('font') footer = _create_html_element('footer') form = _create_html_element('form') -frame = _create_html_element('frame') -frameset = _create_html_element('frameset') h1 = _create_html_element('h1') -head = _create_html_element('head') -header = _create_html_element('header') hgroup = _create_html_element('hgroup') hr = _create_html_element('hr') -html = _create_html_element('html') i = _create_html_element('i') iframe = _create_html_element('iframe') img = _create_html_element('img') @@ -74,16 +63,12 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: label = _create_html_element('label') legend = _create_html_element('legend') li = _create_html_element('li') -link = _create_html_element('link') main = _create_html_element('main') map_ = _create_html_element('map') mark = _create_html_element('mark') menu = _create_html_element('menu') -meta = _create_html_element('meta') meter = _create_html_element('meter') nav = _create_html_element('nav') -noframes = _create_html_element('noframes') -noscript = _create_html_element('noscript') object_ = _create_html_element('object') ol = _create_html_element('ol') optgroup = _create_html_element('optgroup') @@ -100,16 +85,13 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: ruby = _create_html_element('ruby') s = _create_html_element('s') samp = _create_html_element('samp') -script = _create_html_element('script') search = _create_html_element('search') section = _create_html_element('section') select = _create_html_element('select') small = _create_html_element('small') source = _create_html_element('source') span = _create_html_element('span') -strike = _create_html_element('strike') strong = _create_html_element('strong') -style = _create_html_element('style') sub = _create_html_element('sub') summary = _create_html_element('summary') sup = _create_html_element('sup') @@ -123,10 +105,7 @@ def __init__(self, inner_html: Optional[str] = None, **kwargs) -> None: th = _create_html_element('th') thead = _create_html_element('thead') time = _create_html_element('time') -title = _create_html_element('title') -tr = _create_html_element('tr') track = _create_html_element('track') -tt = _create_html_element('tt') u = _create_html_element('u') ul = _create_html_element('ul') var = _create_html_element('var')