refactoring of design concept (consistent use of builder pattern for style, classes and props)

examples.py

@@ -6,7 +6,7 @@ import numpy as np
 
 with ui.row():
     with ui.card():
-        ui.label('Interactive elements', 'h5')
+        ui.label('Interactive elements').classes('text-h5')
         with ui.row():
             with ui.column():
                 ui.button('Click me!', on_click=lambda: output.set_text('Click'))
@@ -24,28 +24,28 @@ with ui.row():
                     ui.select(options={1: 'a', 2: 'b', 3: 'c'}, value=1, on_change=lambda e: output.set_text(e.value))
                 ui.toggle(['1', '2', '3'], value='1', on_change=lambda e: output.set_text(e.value))
                 ui.toggle({1: 'X', 2: 'Y', 3: 'Z'}, value=1, on_change=lambda e: output.set_text(e.value))
-        ui.radio(['x', 'y', 'z'], value='x', design='inline color=green', on_change=lambda e: output.set_text(e.value))
+        ui.radio(['x', 'y', 'z'], value='x', on_change=lambda e: output.set_text(e.value)).props('inline color=green')
         with ui.row():
             ui.label('Output:')
-            output = ui.label(' ', 'bold')
+            output = ui.label('').classes('text-bold')
 
     with ui.column():
         with ui.card():
-            ui.label('Timer', 'h5')
+            ui.label('Timer').classes('text-h5')
             with ui.row():
                 ui.icon('far fa-clock')
                 clock = ui.label()
                 t = ui.timer(0.1, lambda: clock.set_text(datetime.now().strftime("%X")))
             ui.checkbox('active').bind_value(t.active)
 
-        with ui.card().add_classes('items-center'):
-            ui.label('Style', 'h5')
-            ui.icon('fas fa-umbrella-beach', size='70px').add_classes('text-amber-14').add_style('margin: 9px')
+        with ui.card().classes('items-center'):
+            ui.label('Style').classes('text-h5')
+            ui.icon('fas fa-umbrella-beach').props('size=70px').classes('text-amber-14').style('margin: 9px')
             ui.link('color palette', 'https://quasar.dev/style/color-palette')
-            ui.button(icon='touch_app', design='outline round')
+            ui.button().props('icon=touch_app outline round')
 
     with ui.card():
-        ui.label('Binding', 'h5')
+        ui.label('Binding').classes('text-h5')
         with ui.row():
             n1 = ui.number(value=1.2345, format='%.2f')
             n2 = ui.number(format='%.3f').bind_value(n1.value)
@@ -61,12 +61,12 @@ with ui.row():
                 ui.number().bind_value(model.value)
                 ui.slider(min=1, max=3).bind_value(model.value)
                 ui.label().bind_text(model.value)
-        with ui.row().add_classes('items-center'):
+        with ui.row().classes('items-center'):
             v = ui.checkbox('visible', value=True)
             ui.icon('visibility').bind_visibility_from(v.value)
 
     with ui.card():
-        ui.label('Matplotlib', 'h5')
+        ui.label('Matplotlib').classes('text-h5')
         with ui.plot(close=False) as plot:
             plt.title('Some plot')
             x, y = [], []
@@ -85,7 +85,7 @@ with ui.row():
         ui.timer(0.5, update_plot)
 
     with ui.card():
-        ui.label('Line Plot', 'h5')
+        ui.label('Line Plot').classes('text-h5')
         lines = ui.line_plot(n=2, limit=200, update_every=5).with_legend(['sin', 'cos'], loc='upper center', ncol=2)
         ui.timer(0.1, lambda: lines.push([datetime.now()], [
             [np.sin(datetime.now().timestamp()) + 0.02 * np.random.randn()],

main.py

@@ -18,10 +18,10 @@ def example(content: Union[Element, str]):
 
     callFrame = inspect.currentframe().f_back.f_back
     begin = callFrame.f_lineno
-    with ui.row(classes='flex w-full'):
+    with ui.row().classes('flex w-full'):
 
         if isinstance(content, str):
-            ui.markdown(content, classes='mr-8 w-4/12')
+            ui.markdown(content).classes('mr-8 w-4/12')
         else:
             doc = content.__init__.__doc__
             if doc:
@@ -29,11 +29,11 @@ def example(content: Union[Element, str]):
                 html = html.replace('<p>', '<h3>', 1)
                 html = html.replace('</p>', '</h3>', 1)
                 html = Markdown.apply_tailwind(html)
-                ui.html(html, classes='mr-8 w-4/12')
+                ui.html(html).classes('mr-8 w-4/12')
             else:
-                ui.label(content.__name__, 'h5')
+                ui.label(content.__name__).classes('text-h5')
 
-        with ui.card(classes='mt-12 w-2/12'):
+        with ui.card().classes('mt-12 w-2/12'):
             yield
         callFrame = inspect.currentframe().f_back.f_back
         end = callFrame.f_lineno
@@ -44,46 +44,46 @@ def example(content: Union[Element, str]):
         code.insert(1, 'from nicegui import ui')
         code.append('```')
         code = '\n'.join(code)
-        ui.markdown(code, classes='mt-12 w-5/12 overflow-auto')
+        ui.markdown(code).classes('mt-12 w-5/12 overflow-auto')
 
-with ui.row(classes='flex w-full'):
+with ui.row().classes('flex w-full'):
     with open('README.md', 'r') as file:
         content = file.read()
         content = re.sub(r'(?m)^\<img.*\n?', '', content)
-        ui.markdown(content, classes='w-6/12')
+        ui.markdown(content).classes('w-6/12')
 
-    with ui.card(classes='mx-auto mt-24'):
+    with ui.card().classes('mx-auto mt-24'):
         with ui.row():
             with ui.column():
                 ui.button('Click me!', on_click=lambda: output.set_text('Click'))
                 ui.checkbox('Check me!', on_change=lambda e: output.set_text('Checked' if e.value else 'Unchecked'))
                 ui.switch('Switch me!', on_change=lambda e: output.set_text('Switched' if e.value else 'Unswitched'))
-                ui.input(label='Text', value='abc', on_change=lambda e: output.set_text(e.value))
-                ui.number(label='Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value))
+                ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
+                ui.number('Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value))
 
             with ui.column():
                 ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value))
-                ui.radio(options=['A', 'B', 'C'], value='A', design='inline',
-                         on_change=lambda e: output.set_text(e.value))
-                ui.toggle(['1', '2', '3'], value='1', classes='mx-auto', on_change=lambda e: output.set_text(e.value))
-                ui.select(options={1: 'One', 2: 'Two', 3: 'Three'}, value=1, classes='mx-auto',
-                          on_change=lambda e: output.set_text(e.value))
+                ui.radio(['A', 'B', 'C'], value='A', on_change=lambda e: output.set_text(e.value)).props('inline')
+                ui.toggle(['1', '2', '3'], value='1', on_change=lambda e: output.set_text(e.value)).classes('mx-auto')
+                ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1,
+                          on_change=lambda e: output.set_text(e.value)).classes('mx-auto')
 
-            with ui.column().add_classes('w-24'):
+            with ui.column().classes('w-24'):
                 ui.label('Output:')
-                output = ui.label(' ', 'bold')
+                output = ui.label('').classes('text-bold')
 
 design = '''### Styling & Design
 
-NiceGUI uses the [Quasar Framework](https://quasar.dev/) and hence has its full design power. Each NiceGUI element provides a `design` property whose content is passed [as "props" to the Quasar component](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components):
+NiceGUI uses the [Quasar Framework](https://quasar.dev/) and hence has its full design power.
+Each NiceGUI element provides a `props` method whose content is passed [to the Quasar component](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components):
 Have a look at [the Quasar documentation](https://quasar.dev/vue-components/button#design) for all styling props.
 
-You can also apply [Tailwind](https://tailwindcss.com/) utility classes with the `classes` property or `add_classes` method.
+You can also apply [Tailwind](https://tailwindcss.com/) utility classes with the `classes` method.
 '''
 with (example(design)):
 
-    ui.radio(['x', 'y', 'z'], design='inline color=green')
-    ui.button(icon='touch_app', design='outline round', classes='shadow-lg ml-14')
+    ui.radio(['x', 'y', 'z']).props('inline color=green')
+    ui.button().props('icon=touch_app outline round').classes('shadow-lg ml-14')
 
 binding = '''### Bindings
 
@@ -155,7 +155,7 @@ with example(ui.switch):
 
 with example(ui.slider):
 
-    slider = ui.slider(min=0, max=100, value=50, design='label')
+    slider = ui.slider(min=0, max=100, value=50).props('label')
     ui.label().bind_text_from(slider.value)
 
 with example(ui.input):
@@ -164,8 +164,7 @@ with example(ui.input):
         label='Text',
         placeholder='press ENTER to apply',
         on_change=lambda e: result.set_text('you typed: ' + e.value),
-        classes='w-full',
-    )
+    ).classes('w-full')
     result = ui.label('')
 
 with example(ui.number):
@@ -177,19 +176,19 @@ with example(ui.number):
 
 with example(ui.radio):
 
-    radio = ui.radio(options=[1, 2, 3], value=1, design='inline')
-    ui.radio(options={1: 'A', 2: 'B', 3: 'C'}, value=1, design='inline').bind_value(radio.value)
+    radio = ui.radio([1, 2, 3], value=1).props('inline')
+    ui.radio({1: 'A', 2: 'B', 3: 'C'}, value=1).props('inline').bind_value(radio.value)
 
 with example(ui.toggle):
 
-    toggle = ui.toggle(options=[1, 2, 3], value=1)
-    ui.toggle(options={1: 'A', 2: 'B', 3: 'C'}, value=1).bind_value(toggle.value)
+    toggle = ui.toggle([1, 2, 3], value=1)
+    ui.toggle({1: 'A', 2: 'B', 3: 'C'}, value=1).bind_value(toggle.value)
 
 with example(ui.select):
 
     with ui.row():
-        select = ui.select(options=[1, 2, 3], value=1, design='inline')
-        ui.select(options={1: 'One', 2: 'Two', 3: 'Three'}, value=1, design='inline').bind_value(select.value)
+        select = ui.select([1, 2, 3], value=1).props('inline')
+        ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1).props('inline').bind_value(select.value)
 
 with example(ui.plot):
     from matplotlib import pyplot as plt

nicegui/elements/bool_element.py

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

nicegui/elements/button.py

@@ -8,33 +8,17 @@ class Button(Element):
     def __init__(self,
                  text: str = '',
                  *,
-                 icon: str = None,
-                 icon_right: str = None,
-                 color: str = 'primary',
-                 text_color: str = None,
-                 design: str = '',
-                 classes: str = '',
-                 on_click: Callable = None):
+                 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,
-            color=color,
-            text_color=text_color,
-        )
-
-        if icon is not None:
-            view.icon = icon
-
-        if icon_right is not None:
-            icon_right = icon_right
+        view = jp.QButton(label=text, color='primary')
 
         if on_click is not None:
             view.on('click', handle_exceptions(provide_arguments(on_click)))
 
-        super().__init__(view, design=design, classes=classes)
+        super().__init__(view)

nicegui/elements/card.py

@@ -3,8 +3,8 @@ from .group import Group
 
 class Card(Group):
 
-    def __init__(self, design: str = '', classes: str = ''):
+    def __init__(self):
 
         view = jp.QCard(classes='column items-start q-pa-md', style='gap: 1em', delete_flag=False)
 
-        super().__init__(view, design=design, classes=classes)
+        super().__init__(view)

nicegui/elements/checkbox.py

@@ -6,18 +6,16 @@ class Checkbox(BoolElement):
 
     def __init__(self,
                  text: str = '',
+                 *,
                  value: bool = False,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = '',
                  ):
         """Checkbox Element
 
         :param text: the label to display next to the checkbox
         :param value: set to `True` if it should be checked initally; default is `False`
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/checkbox>`_)
         :param on_change: callback to execute when value changes
         """
         view = jp.QCheckbox(text=text, input=self.handle_change)
 
-        super().__init__(view, value, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/choice_element.py

@@ -6,16 +6,14 @@ class ChoiceElement(ValueElement):
 
     def __init__(self,
                  view: jp.HTMLBaseComponent,
-                 value: Any,
                  options: Union[List, Dict],
-                 on_change: Callable,
-                 design: str,
-                 classes: str,
-                 ):
+                 *,
+                 value: Any,
+                 on_change: Callable):
 
         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, value, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/column.py

@@ -7,4 +7,4 @@ class Column(Group):
 
         view = jp.QDiv(classes='column items-start', style='gap: 1em', delete_flag=False)
 
-        super().__init__(view, '')
+        super().__init__(view)

nicegui/elements/element.py

@@ -8,19 +8,14 @@ class Element:
 
     visible = BindableProperty
 
-    def __init__(self, view: jp.HTMLBaseComponent, design: str = '', classes: str = ''):
-
-        for word in design.split():
-            if '=' in word:
-                setattr(view, *word.split('='))
-            else:
-                setattr(view, word, True)
+    def __init__(self,
+                 view: jp.HTMLBaseComponent,
+                 ):
 
         self.parent_view = self.view_stack[-1]
         self.parent_view.add(view)
         view.add_page(self.wp)
         self.view = view
-        self.view.classes += ' ' + classes
 
         self.visible = True
 
@@ -50,22 +45,35 @@ class Element:
         self.visible.bind(target, forward=forward, backward=backward, nesting=1)
         return self
 
-    def set_classes(self, classes: str):
+    def classes(self, add: str = '', *, remove: str = '', replace: str = ''):
+
+        class_list = [] if replace else self.view.classes.split()
+        class_list = [c for c in class_list if c not in remove]
+        class_list += add.split()
+        class_list += replace.split()
+        self.view.classes = ' '.join(class_list)
 
-        self.view.classes = classes
         return self
 
-    def add_classes(self, classes: str):
+    def style(self, add: str = '', *, remove: str = '', replace: str = ''):
+
+        style_list = [] if replace else self.view.style.split()
+        style_list = [c for c in style_list if c not in remove.split()]
+        style_list += add.split()
+        style_list += replace.split()
+        self.view.style = ' '.join(style_list)
 
-        self.view.classes += ' ' + classes
         return self
 
-    def set_style(self, style: str):
+    def props(self, add: str = '', *, remove: str = '', replace: str = ''):
 
-        self.view.style = style
-        return self
+        for prop in remove.split() + replace.split():
+            setattr(self.view, prop.split('=')[0], None)
 
-    def add_style(self, style: str):
+        for prop in add.split() + replace.split():
+            if '=' in prop:
+                setattr(self.view, *prop.split('='))
+            else:
+                setattr(self.view, prop, True)
 
-        self.view.style += ' ' + style
         return self

nicegui/elements/float_element.py

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

nicegui/elements/html.py

@@ -3,7 +3,9 @@ from .element import Element
 
 class Html(Element):
 
-    def __init__(self, content: str = '', design='', classes: str = ''):
+    def __init__(self,
+                 content: str = '',
+                 ):
         """HTML Element
 
         Renders arbitrary HTML onto the page. `Tailwind <https://tailwindcss.com/>`_ can be used for styling.
@@ -12,7 +14,7 @@ class Html(Element):
         """
 
         view = jp.QDiv()
-        super().__init__(view, design=design, classes=classes)
+        super().__init__(view)
         self.content = content
 
     @property

nicegui/elements/icon.py

@@ -3,8 +3,10 @@ from .element import Element
 
 class Icon(Element):
 
-    def __init__(self, name: str, size: str = '20px'):
+    def __init__(self,
+                 name: str,
+                 ):
 
-        view = jp.QIcon(name=name, classes=f'q-pt-xs', size=size)
+        view = jp.QIcon(name=name, classes=f'q-pt-xs', size='20px')
 
-        super().__init__(view, '')
+        super().__init__(view)

nicegui/elements/input.py

@@ -5,19 +5,17 @@ from .string_element import StringElement
 class Input(StringElement):
 
     def __init__(self,
-                 *,
                  label: str = None,
+                 *,
                  placeholder: str = None,
                  value: str = '',
-                 design: str = '',
-                 classes: str = '',
-                 on_change: Callable = None):
+                 on_change: Callable = None,
+                 ):
         """Text Input Element
 
         :param label: displayed label for the text input
         :param placeholder: text to show if no value is entered
         :param value: the current value of the text input
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/input>`_)
         :param on_change: callback to execute when the input is confirmed by leaving the focus
         """
         view = jp.QInput(
@@ -27,4 +25,4 @@ class Input(StringElement):
             change=self.handle_change,
         )
 
-        super().__init__(view, value, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/label.py

@@ -1,12 +1,11 @@
 import justpy as jp
-from typing import Union, List
 from .element import Element
 
 class Label(Element):
 
     def __init__(self,
                  text: str = '',
-                 typography: Union[str, List[str]] = []):
+                 ):
         """Label Element
 
         Displays some text.
@@ -14,13 +13,9 @@ class Label(Element):
         :param text: the content of the label
         """
 
-        if isinstance(typography, str):
-            typography = [typography]
-        classes = ' '.join('text-' + t for t in typography)
+        view = jp.Div(text=text)
 
-        view = jp.Div(text=text, classes=classes)
-
-        super().__init__(view, '')
+        super().__init__(view)
 
     @property
     def text(self):

nicegui/elements/line_plot.py

@@ -3,7 +3,14 @@ from .plot import Plot
 
 class LinePlot(Plot):
 
-    def __init__(self, n: int = 1, limit: int = 100, update_every=1, close: bool = True, **kwargs):
+    def __init__(self,
+                 *,
+                 n: int = 1,
+                 limit: int = 100,
+                 update_every=1,
+                 close: bool = True,
+                 **kwargs,
+                 ):
         """Line Plot
 
         Create a line plot. The `push` method provides live updating when utilized in combination with `ui.timer`.
@@ -15,7 +22,7 @@ class LinePlot(Plot):
         :param kwargs: arguments like `figsize` which should be passed to `pyplot.figure <https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.figure.html>`_
         """
 
-        super().__init__(close, **kwargs)
+        super().__init__(close=close, **kwargs)
 
         self.x = []
         self.Y = [[] for _ in range(n)]

nicegui/elements/link.py

@@ -1,15 +1,13 @@
 import justpy as jp
-from typing import List
 from .element import Element
 
 class Link(Element):
 
-    def __init__(self, text: str = '', href: str = '#', typography: List[str] = []):
+    def __init__(self,
+                 text: str = '',
+                 href: str = '#',
+                 ):
 
-        if isinstance(typography, str):
-            typography = [typography]
+        view = jp.A(text=text, href=href)
 
-        classes = ' '.join('text-' + t for t in typography)
-        view = jp.A(text=text, href=href, classes=classes)
-
-        super().__init__(view, '')
+        super().__init__(view)

nicegui/elements/markdown.py

@@ -4,7 +4,9 @@ import re
 
 class Markdown(Html):
 
-    def __init__(self, content: str = '', classes: str = ''):
+    def __init__(self,
+                 content: str = '',
+                 ):
         """Markdown Element
 
         Renders markdown onto the page.
@@ -12,7 +14,7 @@ class Markdown(Html):
         :param content: the markdown content to be displayed
         """
 
-        super().__init__(content, classes=classes)
+        super().__init__(content)
 
     def set_content(self, content: str):
 

nicegui/elements/number.py

@@ -5,14 +5,12 @@ from .float_element import FloatElement
 class Number(FloatElement):
 
     def __init__(self,
-                 *,
                  label: str = None,
+                 *,
                  placeholder: str = None,
                  value: float = None,
                  format: str = None,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = '',
                  ):
         """Number Input Element
 
@@ -21,7 +19,6 @@ class Number(FloatElement):
         :param value: the inital value of the field
         :param format: a string like '%.2f' to format the displayed value
         :param on_change: callback to execute when the input is confirmed by leaving the focus
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/input>`_)
         """
 
         view = jp.QInput(
@@ -31,7 +28,7 @@ class Number(FloatElement):
             change=self.handle_change,
         )
 
-        super().__init__(view, value, format, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, format=format, on_change=on_change)
 
     def handle_change(self, msg):
 

nicegui/elements/plot.py

@@ -5,7 +5,11 @@ from .element import Element
 
 class Plot(Element):
 
-    def __init__(self, close: bool = True, **kwargs):
+    def __init__(self,
+                 *,
+                 close: bool = True,
+                 **kwargs,
+                 ):
         """Plot Context
 
         Create a context to configure a `Matplotlib <https://matplotlib.org/>`_ plot.
@@ -20,7 +24,7 @@ class Plot(Element):
         view = jp.Matplotlib()
         view.set_figure(self.fig)
 
-        super().__init__(view, '')
+        super().__init__(view)
 
     def __enter__(self):
 

nicegui/elements/radio.py

@@ -6,19 +6,17 @@ class Radio(ChoiceElement):
 
     def __init__(self,
                  options: Union[List, Dict],
+                 *,
                  value: any = None,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = ''
                  ):
         """Radio Selection Element
 
         :param options: a list ['value1', ...] or dictionary `{'value1':'label1', ...}` specifying the options
         :param value: the inital value
         :param on_change: callback to execute when selection changes
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/radio>`_)
         """
 
         view = jp.QOptionGroup(options=options, input=self.handle_change)
 
-        super().__init__(view, value, options, on_change, design=design, classes=classes)
+        super().__init__(view, options, value=value, on_change=on_change)

nicegui/elements/row.py

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

nicegui/elements/select.py

@@ -6,22 +6,20 @@ class Select(ChoiceElement):
 
     def __init__(self,
                  options: Union[List, Dict],
+                 *,
                  value: any = None,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = ''
                  ):
         """Dropdown Selection Element
 
         :param options: a list ['value1', ...] or dictionary `{'value1':'label1', ...}` specifying the options
         :param value: the inital value
         :param on_change: callback to execute when selection changes
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/select>`_)
         """
 
         view = jp.QSelect(options=options, input=self.handle_change)
 
-        super().__init__(view, value, options, on_change, design=design, classes=classes)
+        super().__init__(view, options, value=value, on_change=on_change)
 
     def value_to_view(self, value: any):
 

nicegui/elements/slider.py

@@ -8,20 +8,18 @@ class Slider(FloatElement):
                  *,
                  min: float,
                  max: float,
-                 value: float = None,
                  step: float = 1,
+                 value: float = None,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = '',
                  ):
         """Slider Element
 
         :param min: lower bound of the slider
         :param max: upper bound of the slider
+        :param step: step size
         :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, value, None, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/string_element.py

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

nicegui/elements/switch.py

@@ -6,18 +6,16 @@ class Switch(BoolElement):
 
     def __init__(self,
                  text: str = '',
+                 *,
                  value: bool = False,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = '',
                  ):
         """Switch Element
 
         :param text: the label to display next to the switch
         :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, value, on_change, design=design, classes=classes)
+        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/toggle.py

@@ -6,19 +6,17 @@ class Toggle(ChoiceElement):
 
     def __init__(self,
                  options: Union[List, Dict],
+                 *,
                  value: any = None,
                  on_change: Callable = None,
-                 design: str = '',
-                 classes: str = '',
                  ):
         """Toggle Element
 
         :param options: a list ['value1', ...] or dictionary `{'value1':'label1', ...}` specifying the options
         :param value: the inital value
         :param on_change: callback to execute when selection changes
-        :param design: Quasar props to alter the appearance (see `their reference <https://quasar.dev/vue-components/toggle>`_)
         """
 
         view = jp.QBtnToggle(input=self.handle_change)
 
-        super().__init__(view, value, options, on_change, design=design, classes=classes)
+        super().__init__(view, options, value=value, on_change=on_change)

nicegui/elements/value_element.py

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