moving more documentation into the new format (and further improving styling)

Dockerfile

@@ -13,4 +13,4 @@ WORKDIR /app
 COPY ./pyproject.toml ./poetry.lock* main.py ./
 RUN poetry install --no-root
 
-CMD python3 -m debugpy --listen 5678 api_reference.py
+CMD python3 -m debugpy --listen 5678 main.py

README.md

@@ -44,37 +44,6 @@ python3 main.py
 
 Note: The script will automatically reload the GUI if you modify your code.
 
-## API
-
-See [main.py](https://github.com/zauberzeug/nicegui/tree/main/main.py) for an extensive example what you can do with NiceGUI.
-
-### Interactive Elements
-
-<img src="https://raw.githubusercontent.com/zauberzeug/nicegui/main/sceenshots/demo-boolean-interaction.gif" width="100" align="right">
-
-`Button`, `Checkbox` and `Switch` require a name which is displayed as their label and a callback. The callback can have an optional `event` parameter which provides informations like sender and value:
-
-```python
-ui.button('Button', on_click=lambda: result.set_text('Button: pressed'))
-ui.checkbox('Checkbox', on_change=lambda e: result.set_text(f'checkbox: {e.value}'))
-ui.switch('Switch', on_change=lambda e: result.set_text(f'switch: {e.value}'))
-
-result = ui.label('please interact', typography='bold')
-```
-
-<img src="https://raw.githubusercontent.com/zauberzeug/nicegui/main/sceenshots/demo-input.gif" width="200" align="right">
-
-Use `ui.input` to receive text and `ui.number` for explicit number input.
-
-```python
-ui.input(label='Text', on_change=lambda e: result.set_text(e.value))
-ui.number(label='Number', format='%.2f', on_change=lambda e: result.set_text(e.value))
-
-result = ui.label('please type', typography='bold')
-```
-
-Pre-fill `ui.input` with the `text` property and `ui.number` with `value`.
-
 ### Styling & Design
 
 NiceGUI use the [Quasar Framework](https://quasar.dev/) and hence has their full design power. Each NiceGUI element provides a `design` property which content is passed [as props the Quasar component](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components):
@@ -88,17 +57,9 @@ ui.button(icon='touch_app', design='outline round')
 
 Have a look at [the Quasar documentation](https://quasar.dev/vue-components/button#design) for all styling "props".
 
-### Timer
-
-One major drive behind the creation of NiceGUI was the necessity to have an simple approach to update the interface
-in regular intervals. For example to show a graph with incomming measurements (see plots below):
-
-```python
-clock = ui.label()
-ui.timer(interval=0.1, callback=lambda: clock.set_text(datetime.now().strftime("%X")))
-```
+## API
 
-With an optional third parameter `once=True` the `callback` is once executed after an delay specified by `interval`. Otherwise the `callback` is run repeatedly.
+API Reference is hosted at [https://nicegui.io](https://nicegui.io). Also have a look at [examples.py](https://github.com/zauberzeug/nicegui/tree/main/examples.py) for an extensive demonstration what you can do with NiceGUI.
 
 ### Plots
 

main.py

@@ -2,9 +2,7 @@
 #!/usr/bin/env python3
 from nicegui import ui, wp
 from contextlib import contextmanager
-from icecream import ic
 import inspect
-from executing import Source
 from nicegui.elements.element import Element
 import sys
 import docutils.core
@@ -17,32 +15,56 @@ def example(element: Element):
 
     callFrame = inspect.currentframe().f_back.f_back
     begin = callFrame.f_lineno
-    with ui.row():
+    with ui.row(classes='flex w-screen'):
 
         doc = element.__init__.__doc__
-        html = docutils.core.publish_parts(doc, writer_name='html')['html_body']
-        html = html.replace('<p>', '<h3>', 1)
-        html = html.replace('</p>', '</h3>', 1)
-        ui.html(html)
+        if doc:
+            html = docutils.core.publish_parts(doc, writer_name='html')['html_body']
+            html = html.replace('<p>', '<h3 class="text-2xl mb-3">', 1)
+            html = html.replace('</p>', '</h3>', 1)
+            ui.html(html, classes='w-4/12 pr-12')
+        else:
+            ui.label(element.__name__, 'h5')
 
-        with ui.card(classes='mt-12'):
+        with ui.card(classes='mt-12 w-1/12'):
             yield
         callFrame = inspect.currentframe().f_back.f_back
         end = callFrame.f_lineno
         code = inspect.getsource(sys.modules[__name__])
         code = code.splitlines()[begin:end]
+        code = [l[4:] for l in code]
         code.insert(0, '```python')
+        code.insert(1, 'from nicegui import ui')
         code.append('```')
         code = '\n'.join(code)
-        ui.markdown(code, classes='mt-12')
+        ui.markdown(code, classes='mt-12 w-6/12 overflow-auto')
+
 
 with open('README.md', 'r') as file:
     ui.markdown(file.read())
 
+with example(ui.timer):
+    from datetime import datetime
+
+    clock = ui.label()
+    ui.timer(interval=0.1, callback=lambda: clock.set_text(datetime.now().strftime("%X")))
+
+with example(ui.button):
+
+    def button_increment():
+        global button_count
+        button_count += 1
+        button_result.set_text(f'pressed: {button_count}')
+
+    button_count = 0
+    ui.button('Button', on_click=button_increment)
+    button_result = ui.label('pressed: 0')
+
 with example(ui.input):
+
     ui.input(
         label='Text',
-        placeholder='some placeholder',
+        placeholder='press ENTER to apply',
         on_change=lambda e: result.set_text('you typed: ' + e.value)
     )
-    result = ui.label('', typography='bold')
+    result = ui.label('')

nicegui/elements/button.py

@@ -14,6 +14,12 @@ class Button(Element):
                  text_color: str = None,
                  design: str = '',
                  on_click: Callable = None):
+        """Button Element
+
+        :param text: the label of the button
+        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/button>`_)
+        :param on_click: callback which is invoked when button is pressed
+        """
 
         view = jp.QButton(
             label=text,

nicegui/elements/input.py

@@ -13,11 +13,11 @@ class Input(StringElement):
                  on_change: Callable = None):
         """Text Input Element
 
-        :param str label: display name for the text input
-        :param str placeholder: text to show if no value is entered
-        :param str value: the current value of the field
-        :param str design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/input>`_)
-        :param Callable on_change: callback when the input is confirmed via leaving the focus
+        :param label: display name for the text input
+        :param placeholder: text to show if no value is entered
+        :param value: the current value of the field
+        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/input>`_)
+        :param on_change: callback when the input is confirmed via leaving the focus
         """
         view = jp.QInput(
             label=label,

nicegui/elements/row.py

@@ -3,8 +3,8 @@ from .group import Group
 
 class Row(Group):
 
-    def __init__(self):
+    def __init__(self, design='', classes=''):
 
         view = jp.QDiv(classes='row items-start', style='gap: 1em', delete_flag=False)
 
-        super().__init__(view, '')
+        super().__init__(view, design=design, classes=classes)

nicegui/nicegui.py

@@ -20,9 +20,8 @@ if not inspect.stack()[-2].filename.endswith('spawn.py'):
 wp = jp.QuasarPage(delete_flag=False, title='NiceGUI', favicon='favicon.png')
 wp.tailwind = True  # use Tailwind classes instead of Quasars
 wp.css = HtmlFormatter().get_style_defs('.codehilite')
-wp.css += ''.join([f'h{i} {{ font-size: {80*(5-i)}%; line-height: normal; margin-block-end: {0.1*(5-1)}em }}' for i in range(1, 5)])
 wp.head_html = '<script>confirm = () => true;</script>'  # avoid confirmation dialog for reload
-
+wp.head_html += '<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">'  # using latest tailwind
 
 main = jp.Div(a=wp, classes='q-ma-md column items-start', style='row-gap: 1em')
 main.add_page(wp)

nicegui/timer.py

@@ -9,6 +9,14 @@ class Timer:
     tasks = []
 
     def __init__(self, interval, callback, *, once=False):
+        """Timer
+
+        One major drive behind the creation of NiceGUI was the necessity to have an simple approach to update the interface in regular intervals. For example to show a graph with incomming measurements.
+
+        :param interval: the interval in which the timer is been called
+        :param callback: function to execute when interval elapses
+        :param once: weather the callback is only executed once after an delay specified by `interval`; default is False
+        """
 
         parent = Element.view_stack[-1]