create gaps via tailwind class instead of CSS style #104

nicegui/config.py

@@ -12,6 +12,6 @@ class Config():
     reload: bool = True
     favicon: str = 'favicon.ico'
     dark: Optional[bool] = False
-    main_page_classes: str = 'q-ma-md column items-start'
+    main_page_classes: str = 'q-ma-md column items-start gap-4'
     binding_refresh_interval: float = 0.1
     excludes: List[str] = field(default_factory=list)

nicegui/elements/card.py

@@ -10,7 +10,7 @@ class Card(Group):
 
         Provides a container with a dropped shadow.
         """
-        view = jp.QCard(classes='column items-start q-pa-md', style='gap: 1em', delete_flag=False, temp=False)
+        view = jp.QCard(classes='column items-start q-pa-md gap-4', delete_flag=False, temp=False)
         super().__init__(view)
 
 

nicegui/elements/column.py

@@ -10,5 +10,5 @@ class Column(Group):
 
         Provides a container which arranges its child in a row.
         '''
-        view = jp.QDiv(classes='column items-start', style='gap: 1em', delete_flag=False, temp=False)
+        view = jp.QDiv(classes='column items-start gap-4', delete_flag=False, temp=False)
         super().__init__(view)

nicegui/elements/row.py

@@ -10,5 +10,5 @@ class Row(Group):
 
         Provides a container which arranges its child in a row.
         '''
-        view = jp.QDiv(classes='row items-start', style='gap: 1em', delete_flag=False, temp=False)
+        view = jp.QDiv(classes='row items-start gap-4', delete_flag=False, temp=False)
         super().__init__(view)

nicegui/page.py

@@ -24,7 +24,7 @@ class Page(jp.QuasarPage):
                  *,
                  favicon: Optional[str] = None,
                  dark: Optional[bool] = ...,
-                 classes: str = 'q-ma-md column items-start',
+                 classes: str = 'q-ma-md column items-start gap-4',
                  css: str = HtmlFormatter().get_style_defs('.codehilite'),
                  on_connect: Optional[Callable] = None,
                  on_page_ready: Optional[Callable] = None,
@@ -52,7 +52,7 @@ class Page(jp.QuasarPage):
         self.on('result_ready', self.handle_javascript_result)
         self.on('page_ready', self.handle_page_ready)
 
-        self.view = jp.Div(a=self, classes=classes, style='row-gap: 1em', temp=False)
+        self.view = jp.Div(a=self, classes=classes, temp=False)
         self.view.add_page(self)
 
     async def _route_function(self, request: Request) -> Page:
@@ -135,7 +135,7 @@ class page:
         *,
         favicon: Optional[str] = None,
         dark: Optional[bool] = ...,
-        classes: str = 'q-ma-md column items-start',
+        classes: str = 'q-ma-md column items-start gap-4',
         css: str = HtmlFormatter().get_style_defs('.codehilite'),
         on_connect: Optional[Callable] = None,
         on_page_ready: Optional[Callable] = None,
@@ -150,7 +150,7 @@ class page:
         :param title: optional page title
         :param favicon: optional favicon
         :param dark: whether to use Quasar's dark mode (defaults to `dark` argument of `run` command)
-        :param classes: tailwind classes for the container div (default: `'q-ma-md column items-start'`)
+        :param classes: tailwind classes for the container div (default: `'q-ma-md column items-start gap-4'`)
         :param css: CSS definitions
         :param on_connect: optional function or coroutine which is called for each new client connection
         :param on_page_ready: optional function or coroutine which is called when the websocket is connected

nicegui/run.py

@@ -22,7 +22,7 @@ def run(self, *,
         title: str = 'NiceGUI',
         favicon: str = 'favicon.ico',
         dark: Optional[bool] = False,
-        main_page_classes: str = 'q-ma-md column items-start',
+        main_page_classes: str = 'q-ma-md column items-start gap-4',
         binding_refresh_interval: float = 0.1,
         show: bool = True,
         reload: bool = True,