restructure demo page; introduce typography for labels

main.py

@@ -3,11 +3,8 @@ from nice_gui import ui
 from datetime import datetime
 from matplotlib import pyplot as plt
 
-ui.label('Hello world!')
-
-ui.button('Click me!', on_click=lambda: ui.label('Yes!'))
-
 with ui.card():
+    ui.label('Rows and columns', 'h5')
     with ui.row():
         ui.label('A')
         ui.label('B')
@@ -16,19 +13,26 @@ with ui.card():
             ui.label('C2')
             ui.label('C3')
 
-with ui.row():
-    ui.label('Time:')
+with ui.card():
+    ui.label('Timer', 'h5')
     time = ui.label()
     ui.timer(0.1, lambda: time.set_text(datetime.now().strftime("%X")))
 
-with ui.plot(close=False) as plot:
-    plt.title('Some plot')
-    plt.plot(range(10), [x**2 for x in range(10)])
+with ui.card():
+    ui.label('Interactive elements', 'h5')
+    ui.button('Click me!', on_click=lambda: output.set_text('Click'))
+    output = ui.label()
+
+with ui.card():
+    ui.label('Matplotlib', 'h5')
+    with ui.plot(close=False) as plot:
+        plt.title('Some plot')
+        plt.plot(range(10), [x**2 for x in range(10)])
 
-def update_plot():
-    plt.title('Some plot with a second curve')
-    plt.plot(range(10), [100 - x**2 for x in range(10)])
-    plot.update()
-ui.timer(3.0, update_plot, once=True)
+    def update_plot():
+        plt.title('Some plot with a second curve')
+        plt.plot(range(10), [100 - x**2 for x in range(10)])
+        plot.update()
+    ui.timer(3.0, update_plot, once=True)
 
 ui.run()

nice_gui.py

@@ -51,9 +51,12 @@ class Plot(Element):
 
 class Ui(Starlette):
 
-    def label(self, text=''):
+    def label(self, text='', typography=[]):
 
-        view = jp.Div(text=text)
+        if isinstance(typography, str):
+            typography = [typography]
+        classes = ' '.join('text-' + t for t in typography)
+        view = jp.Div(text=text, classes=classes)
         return Element(view)
 
     def button(self, text, on_click=None):