瀏覽代碼

add background demo to ui.query

Rodja Trappe 2 年之前
父節點
當前提交
14f4935961
共有 1 個文件被更改,包括 14 次插入1 次删除
  1. 14 1
      website/more_documentation/query_documentation.py

+ 14 - 1
website/more_documentation/query_documentation.py

@@ -1,4 +1,6 @@
-from nicegui import ui
+from nicegui import globals, ui
+
+from ..documentation_tools import text_demo
 
 
 def main_demo() -> None:
@@ -10,3 +12,14 @@ def main_demo() -> None:
     # END OF DEMO
     ui.button('Blue', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ddeeff'))
     ui.button('Orange', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ffeedd'))
+
+
+def more() -> None:
+    @text_demo('Set background gradient', '''
+        It's easy to set a background gradient, image or similar. 
+        See [w3schools.com](https://www.w3schools.com/cssref/pr_background-image.php) for more information about setting background with CSS.
+    ''')
+    def background_image():
+        # ui.query('body').classes('bg-gradient-to-t from-blue-400 to-blue-100')
+        # END OF DEMO
+        globals.get_slot_stack()[-1].parent.classes('bg-gradient-to-t from-blue-400 to-blue-100')