Update the example

Author: Tao-VanJS

codegen/vanui-README.md

@@ -419,6 +419,7 @@ Preview with [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/van
 
 ```ts
 van.add(document.body, Toggle({
+  on: true,
   size: 2,
   onColor: "#4CAF50"
 }))

sitegen/vanui.ts

@@ -1489,7 +1489,7 @@ export default (doc: HTMLDocument) => {
     ),
     pre(
       code({class: "language-ts"},
-        "van.add(document.body, Toggle({\n  size: 2,\n  onColor: \"#4CAF50\"\n}))\n",
+        "van.add(document.body, Toggle({\n  on: true,\n  size: 2,\n  onColor: \"#4CAF50\"\n}))\n",
       ),
     ),
     H4(

vanui.html

@@ -214,6 +214,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 }
 </code></pre><p>are needed for the tooltip element to be shown properly.</p><h4 class="w3-medium w3-text-red" id="property-reference-4"><a class="self-link" href="#property-reference-4">Property Reference</a></h4><ul><li><code class="symbol">text</code>: Type <code class="symbol">string | State&lt;string&gt;</code>. Required. The text shown in the tooltip. If a <code class="symbol">State</code> object is specified, you can set the text with <code class="symbol">text.val = ...</code>.</li><li><code class="symbol">show</code>: Type <code class="symbol">State&lt;boolean&gt;</code>. Required. The <code class="symbol">State</code> object to control whether to show the tooltip or not.</li><li><code class="symbol">width</code>: Type <code class="symbol">string</code>. Default <code class="symbol">"200px"</code>. Optional. The width of the tooltip.</li><li><code class="symbol">backgroundColor</code>: Type <code class="symbol">string</code>. Default <code class="symbol">"#333D"</code>. Optional. The background color of the tooltip.</li><li><code class="symbol">fontColor</code>: Type <code class="symbol">string</code>. Default: <code class="symbol">"white"</code>. Optional. The font color of the tooltip.</li><li><code class="symbol">fadeInSec</code>: Type <code class="symbol">number</code>. Default <code class="symbol">0.3</code>. Optional. The duration of the fade-in animation.</li><li><code class="symbol">tooltipClass</code>: Type <code class="symbol">string</code>. Default <code class="symbol">""</code>. Optional. The <code class="symbol">class</code> attribute of the tooltip. You can specify multiple CSS classes separated by <code class="symbol">" "</code>.</li><li><code class="symbol">tooltipStyleOverrides</code>: Type <code class="symbol">Record&lt;string, string | number&gt;</code>. Default <code class="symbol">{}</code>. Optional. A <a href="#property-bag-for-style-overrides" class="w3-hover-opacity">property bag</a> for the styles you want to override for the tooltip.</li><li><code class="symbol">triangleClass</code>: Type <code class="symbol">string</code>. Default <code class="symbol">""</code>. Optional. The <code class="symbol">class</code> attribute of the triangle in the bottom. You can specify multiple CSS classes separated by <code class="symbol">" "</code>.</li><li><code class="symbol">triangleStyleOverrides</code>: Type <code class="symbol">Record&lt;string, string | number&gt;</code>. Default <code class="symbol">{}</code>. Optional. A <a href="#property-bag-for-style-overrides" class="w3-hover-opacity">property bag</a> for the styles you want to override for the triangle in the bottom.</li></ul><h3 class="w3-large w3-text-red" id="toggle"><a class="self-link" href="#toggle">Toggle</a></h3><p>Creates a toggle switch that can be turned on and off.</p><h4 class="w3-medium w3-text-red" id="signature-5"><a class="self-link" href="#signature-5">Signature</a></h4><pre><code class="language-js">Toggle({...props}) =&gt; &lt;The created toggle switch&gt;
 </code></pre><h4 class="w3-medium w3-text-red" id="example-1"><a class="self-link" href="#example-1">Example</a></h4><p>Preview with <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/toggle?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><pre><code class="language-ts">van.add(document.body, Toggle({
+  on: true,
   size: 2,
   onColor: "#4CAF50"
 }))

vanui/index.html

@@ -214,6 +214,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 }
 </code></pre><p>are needed for the tooltip element to be shown properly.</p><h4 class="w3-medium w3-text-red" id="property-reference-4"><a class="self-link" href="#property-reference-4">Property Reference</a></h4><ul><li><code class="symbol">text</code>: Type <code class="symbol">string | State&lt;string&gt;</code>. Required. The text shown in the tooltip. If a <code class="symbol">State</code> object is specified, you can set the text with <code class="symbol">text.val = ...</code>.</li><li><code class="symbol">show</code>: Type <code class="symbol">State&lt;boolean&gt;</code>. Required. The <code class="symbol">State</code> object to control whether to show the tooltip or not.</li><li><code class="symbol">width</code>: Type <code class="symbol">string</code>. Default <code class="symbol">"200px"</code>. Optional. The width of the tooltip.</li><li><code class="symbol">backgroundColor</code>: Type <code class="symbol">string</code>. Default <code class="symbol">"#333D"</code>. Optional. The background color of the tooltip.</li><li><code class="symbol">fontColor</code>: Type <code class="symbol">string</code>. Default: <code class="symbol">"white"</code>. Optional. The font color of the tooltip.</li><li><code class="symbol">fadeInSec</code>: Type <code class="symbol">number</code>. Default <code class="symbol">0.3</code>. Optional. The duration of the fade-in animation.</li><li><code class="symbol">tooltipClass</code>: Type <code class="symbol">string</code>. Default <code class="symbol">""</code>. Optional. The <code class="symbol">class</code> attribute of the tooltip. You can specify multiple CSS classes separated by <code class="symbol">" "</code>.</li><li><code class="symbol">tooltipStyleOverrides</code>: Type <code class="symbol">Record&lt;string, string | number&gt;</code>. Default <code class="symbol">{}</code>. Optional. A <a href="#property-bag-for-style-overrides" class="w3-hover-opacity">property bag</a> for the styles you want to override for the tooltip.</li><li><code class="symbol">triangleClass</code>: Type <code class="symbol">string</code>. Default <code class="symbol">""</code>. Optional. The <code class="symbol">class</code> attribute of the triangle in the bottom. You can specify multiple CSS classes separated by <code class="symbol">" "</code>.</li><li><code class="symbol">triangleStyleOverrides</code>: Type <code class="symbol">Record&lt;string, string | number&gt;</code>. Default <code class="symbol">{}</code>. Optional. A <a href="#property-bag-for-style-overrides" class="w3-hover-opacity">property bag</a> for the styles you want to override for the triangle in the bottom.</li></ul><h3 class="w3-large w3-text-red" id="toggle"><a class="self-link" href="#toggle">Toggle</a></h3><p>Creates a toggle switch that can be turned on and off.</p><h4 class="w3-medium w3-text-red" id="signature-5"><a class="self-link" href="#signature-5">Signature</a></h4><pre><code class="language-js">Toggle({...props}) =&gt; &lt;The created toggle switch&gt;
 </code></pre><h4 class="w3-medium w3-text-red" id="example-1"><a class="self-link" href="#example-1">Example</a></h4><p>Preview with <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/toggle?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><pre><code class="language-ts">van.add(document.body, Toggle({
+  on: true,
   size: 2,
   onColor: "#4CAF50"
 }))