style update for doc/Reference.html

Author: buganini

doc/Reference.html

@@ -17,6 +17,9 @@
         .header > * {
             font-weight: bold;
         }
+        h2 {
+            margin-top: 50px;
+        }
         .table > div {
             display: contents;
         }
@@ -27,8 +30,11 @@
             box-shadow:0 0 0 1px darkgray;
         }
         .example {
+            display: inline-block;;
             background-color: dodgerblue;
             border-radius: 5px;
+            margin-top: 10px;
+            box-sizing: border-box;
             padding: 5px;
             color: white;
         }
@@ -37,6 +43,7 @@
         }
         .note {
             color: darkgray;
+            display: block;
         }
     </style>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
@@ -580,31 +587,39 @@ <h2 id="window">Window</h2>
 </code></pre>
 
 <h2 id="modal">Modal</h2>
+<div>
 Modal window
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/modal.py">Example</a>
 <pre><code>
 Modal(model[,offValue=None][,title=str][,size=(w,h)][,maximize=bool][,fullscreen=bool])
 </code></pre>
 
 <h2 id="hbox">HBox</h2>
+<div>
 Horizontal Linear Layout Container
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/hbox.py">Example</a>
 <pre><code>
 HBox()
 </code></pre>
 
 <h2 id="vbox">VBox</h2>
+<div>
 Vertical Linear Layout Container
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/tab.py">Example</a>
 <pre><code>
 VBox()
 </code></pre>
 
 <h2 id="grid">Grid</h2>
+<div>
 Grid Layout Container
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/grid.py">Example</a>
 <pre><code>
@@ -614,7 +629,9 @@ <h2 id="grid">Grid</h2>
 </code></pre>
 
 <h2 id="spacer">Spacer</h2>
+<div>
 Spacer inside linear layout containers
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/hbox.py">Example</a>
 <pre><code>
@@ -625,7 +642,9 @@ <h2 id="spacer">Spacer</h2>
 </code></pre>
 
 <h2 id="divider">Divider</h2>
+<div>
 Divider inside linear layout containers
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/vbox.py">Example</a>
 <pre><code>
@@ -636,7 +655,9 @@ <h2 id="divider">Divider</h2>
 </code></pre>
 
 <h2 id="scroll">Scroll</h2>
+<div>
 Scrollable container
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/scroll.py">Example</a>
 <pre><code>
@@ -647,7 +668,9 @@ <h2 id="scroll">Scroll</h2>
 </code></pre>
 
 <h2 id="button">Button</h2>
+<div>
 Single line clickable text with button appearance
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/button.py">Example</a>
 <pre><code>
@@ -659,7 +682,7 @@ <h2 id="button">Button</h2>
 
 
 <h2 id="label">Label</h2>
-Single line clickable text
+<div>Single line clickable text</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/label.py">Example</a>
 <pre><code>
@@ -670,31 +693,39 @@ <h2 id="label">Label</h2>
 * .click
 
 <h2 id="text">Text</h2>
+<div>
 Multiple line text viewer
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/text.py">Example</a>
 <pre><code>
 Text(text)
 </code></pre>
 
 <h2 id="html">Html</h2>
+<div>
 HTML viewer (only supported by PySide6 backend)
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/text.py">Example</a>
 <pre><code>
 Html(html)
 </code></pre>
 
 <h2 id="markdown">Markdown</h2>
+<div>
 Markdown viewer (not supported by tkinter backend)
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/text.py">Example</a>
 <pre><code>
 Markdown(md)
 </code></pre>
 
 <h2 id="combobox">Combobox</h2>
+<div>
 Editable Dropdown List
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/combobox.py">Example</a>
 <pre><code>
@@ -710,7 +741,9 @@ <h2 id="combobox">Combobox</h2>
 </code></pre>
 
 <h2 id="textfield">TextField</h2>
+<div>
 Single line text editor
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/textfield.py">Example</a>
 <pre><code>
@@ -725,8 +758,9 @@ <h3>Callbacks</h3>
 
 
 <h2 id="progressbar">ProgressBar</h2>
+<div>
 Linear progress indicator
-
+</div>
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/progressbar.py">Example</a>
 <pre><code>
 ProgressBar(progress `0-1`)
@@ -793,10 +827,19 @@ <h2 id="splitter">Splitter</h2>
 
 <h2 id="tabs">Tabs and Tab</h2>
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/tab.py">Example</a>
+<pre><code>
+with Tabs():
+    with Tab("Tab 1"):
+        Label("Tab Content 1")
+    with Tab("Tab 2"):
+        Label("Tab Content 2")
+</code></pre>
 
 <h2 id="table">Table</h2>
 
+<div>
 Table widget
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/table.py">Example with TableNode</a>
 
@@ -842,17 +885,21 @@ <h2 id="tree">Tree</h2>
 <h2 id="interop">Interop</h2>
 
 <h3 id="qtinpui">QtInPui</h3>
+<div>
 Wrapper for embedding native widget instance into PUI
 
 Currently only supported by PySide6 backend
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/cookbook/widget.py">Example</a>
 
 
 <h3 id="puiinqut">PuiInQt</h3>
+<div>
 Wrapper for embedding PUI view into existing QT view hierarchy
 
 Currently only supported by PySide6 backend
+</div>
 
 <a class="example" href="https://github.com/buganini/PUI/blob/main/examples/pyside6_interop.py">Example</a>