adding classes for tailwind styling to all elements and providing more documentation

main.py

@@ -70,15 +70,15 @@ with example(ui.timer):
     ui.checkbox('active').bind_value(t.active)
 
 with example(ui.label):
-
     ui.label('some label')
 
 with example(ui.markdown):
-
     ui.markdown('### Headline\nWith hyperlink to [GitHub](https://github.com/zauberzeug/nicegui).')
 
-with example(ui.button):
+with example(ui.html):
+    ui.html('<p>demo paragraph in <strong>html</strong></p>')
 
+with example(ui.button):
     def button_increment():
         global button_count
         button_count += 1
@@ -89,18 +89,27 @@ with example(ui.button):
     button_result = ui.label('pressed: 0')
 
 with example(ui.checkbox):
-
     ui.checkbox('check me', on_change=lambda e: checkbox_state.set_text(e.value))
     with ui.row():
         ui.label('the checkbox is:')
         checkbox_state = ui.label('False')
 
-with example(ui.input):
+with example(ui.switch):
+    ui.switch('switch me', on_change=lambda e: checkbox_state.set_text("ON" if e.value else'OFF'))
+    with ui.row():
+        ui.label('the switch is:')
+        checkbox_state = ui.label('OFF')
 
+with example(ui.slider):
+    slider = ui.slider(min=0, max=100, value=50, design='label')
+    ui.label().bind_text_from(slider.value)
+
+with example(ui.input):
     ui.input(
         label='Text',
         placeholder='press ENTER to apply',
-        on_change=lambda e: result.set_text('you typed: ' + e.value)
+        on_change=lambda e: result.set_text('you typed: ' + e.value),
+        classes='w-full',
     )
     result = ui.label('')
 

nicegui/elements/bool_element.py

@@ -6,8 +6,10 @@ class BoolElement(ValueElement):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 design: str,
                  value: bool,
-                 on_change: Callable):
+                 on_change: Callable,
+                 design: str,
+                 classes: str,
+                 ):
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)

nicegui/elements/checkbox.py

@@ -7,8 +7,10 @@ class Checkbox(BoolElement):
     def __init__(self,
                  text: str = '',
                  value: bool = False,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str = '',
+                 ):
         """Checkbox Element
 
         :param text: the label to display beside the checkbox
@@ -18,4 +20,4 @@ class Checkbox(BoolElement):
         """
         view = jp.QCheckbox(text=text, input=self.handle_change)
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)

nicegui/elements/choice_element.py

@@ -6,14 +6,16 @@ class ChoiceElement(ValueElement):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 design: str,
                  value: Any,
                  options: Union[List, Dict],
-                 on_change: Callable):
+                 on_change: Callable,
+                 design: str = '',
+                 classes: str = '',
+                 ):
 
         if isinstance(options, list):
             view.options = [{'label': option, 'value': option} for option in options]
         else:
             view.options = [{'label': value, 'value': key} for key, value in options.items()]
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)

nicegui/elements/float_element.py

@@ -6,14 +6,16 @@ class FloatElement(ValueElement):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 design: str,
                  value: float,
                  format: str,
-                 on_change: Callable):
+                 on_change: Callable,
+                 design: str,
+                 classes=str,
+                 ):
 
         self.format = format
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)
 
     def value_to_view(self, value: float):
 

nicegui/elements/html.py

@@ -4,6 +4,12 @@ from .element import Element
 class Html(Element):
 
     def __init__(self, content: str = '', design='', classes: str = ''):
+        """Html Element
+
+        Renders arbitrary html onto the page. `Tailwind <https://tailwindcss.com/>`_ can be used for styling.
+
+        :param content: the html code to be displayed
+        """
 
         view = jp.QDiv()
         super().__init__(view, design=design, classes=classes)

nicegui/elements/input.py

@@ -10,6 +10,7 @@ class Input(StringElement):
                  placeholder: str = None,
                  value: str = '',
                  design: str = '',
+                 classes: str = '',
                  on_change: Callable = None):
         """Text Input Element
 
@@ -26,4 +27,4 @@ class Input(StringElement):
             change=self.handle_change,
         )
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)

nicegui/elements/line_plot.py

@@ -4,10 +4,9 @@ from .plot import Plot
 class LinePlot(Plot):
 
     def __init__(self, n: int = 1, limit: int = 100, update_every=1, close: bool = True, **kwargs):
-        """Plot
+        """Plot Element
 
-        Create a context to configure a simple line plot. 
-        The  `push` method provides live updating when utilized in combination with ui.timer.
+        Create a line plot. The  `push` method provides live updating when utilized in combination with ui.timer.
 
         :param n: number of data points to begin with
         :param limit: maximum number of datapoints (new ones will push out the oldest)

nicegui/elements/number.py

@@ -10,8 +10,10 @@ class Number(FloatElement):
                  placeholder: str = None,
                  value: float = None,
                  format: str = None,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str='',
+                 ):
 
         view = jp.QInput(
             type='number',
@@ -20,7 +22,7 @@ class Number(FloatElement):
             change=self.handle_change,
         )
 
-        super().__init__(view, design, value, format, on_change)
+        super().__init__(view, value, format, on_change, design=design, classes=classes)
 
     def handle_change(self, msg):
 

nicegui/elements/plot.py

@@ -6,7 +6,7 @@ from .element import Element
 class Plot(Element):
 
     def __init__(self, close: bool = True, **kwargs):
-        """Plot
+        """Plot Context
 
         Create a context to configure a `Matplotlib <https://matplotlib.org/>`_ plot.
 

nicegui/elements/radio.py

@@ -7,9 +7,11 @@ class Radio(ChoiceElement):
     def __init__(self,
                  options: Union[List, Dict],
                  value: any = None,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str = ''
+                 ):
 
         view = jp.QOptionGroup(options=options, input=self.handle_change)
 
-        super().__init__(view, design, value, options, on_change)
+        super().__init__(view, value, options, on_change, design=design, classes=classes)

nicegui/elements/select.py

@@ -7,12 +7,14 @@ class Select(ChoiceElement):
     def __init__(self,
                  options: Union[List, Dict],
                  value: any = None,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str=''
+                 ):
 
         view = jp.QSelect(options=options, input=self.handle_change)
 
-        super().__init__(view, design, value, options, on_change)
+        super().__init__(view, value, options, on_change, design=design, classes=classes)
 
     def value_to_view(self, value: any):
 

nicegui/elements/slider.py

@@ -10,9 +10,18 @@ class Slider(FloatElement):
                  max: float,
                  value: float = None,
                  step: float = 1,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str = '',
+                 ):
+        """Slider Element
 
+        :param min: lower bound of the slider
+        :param max: upper bound of the slider
+        :param value: inital value to set position of the slider
+        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/slider>`_)
+        :param on_change: callback which is invoked when the user releases the slider
+        """
         view = jp.QSlider(min=min, max=max, step=step, change=self.handle_change)
 
-        super().__init__(view, design, value, None, on_change)
+        super().__init__(view, value, None, on_change, design=design, classes=classes)

nicegui/elements/string_element.py

@@ -6,8 +6,10 @@ class StringElement(ValueElement):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 design: str,
                  value: float,
-                 on_change: Callable):
+                 on_change: Callable,
+                 design: str,
+                 classes: str,
+                 ):
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design, classes)

nicegui/elements/switch.py

@@ -7,9 +7,17 @@ class Switch(BoolElement):
     def __init__(self,
                  text: str = '',
                  value: bool = False,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes: str = '',
+                 ):
+        """Switch Element
 
+        :param text: the label of the button
+        :param value: set to True if initally it should be active; default is False
+        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/switch>`_)
+        :param on_click: callback which is invoked when state is changed by the user
+        """
         view = jp.QToggle(text=text, input=self.handle_change)
 
-        super().__init__(view, design, value, on_change)
+        super().__init__(view, value, on_change, design=design, classes=classes)

nicegui/elements/toggle.py

@@ -7,9 +7,11 @@ class Toggle(ChoiceElement):
     def __init__(self,
                  options: Union[List, Dict],
                  value: any = None,
+                 on_change: Callable = None,
                  design: str = '',
-                 on_change: Callable = None):
+                 classes:str='',
+                 ):
 
         view = jp.QBtnToggle(input=self.handle_change)
 
-        super().__init__(view, design, value, options, on_change)
+        super().__init__(view, value, options, on_change, design=design, classes=classes)

nicegui/elements/value_element.py

@@ -11,11 +11,13 @@ class ValueElement(Element):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 design: str,
                  value: Any,
-                 on_change: Callable):
+                 on_change: Callable,
+                 design: str,
+                 classes: str,
+                 ):
 
-        super().__init__(view, design)
+        super().__init__(view, design=design, classes=classes)
 
         self.on_change = on_change
         self.value = value