-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
8 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,10 +23,10 @@ import { <components you want to import> } from "vanjs-ui" | |
| Alternatively, you can import **VanUI** from CDN via a `<script type="text/javascript">` tag: | ||
|
|
||
| ```html | ||
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.min.js"></script> | ||
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.min.js"></script> | ||
| ``` | ||
|
|
||
| `https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.js` can be used for the non-minified version. | ||
| `https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.js` can be used for the non-minified version. | ||
|
|
||
| Note that: **VanJS** needs to be imported via a `<script type="text/javascript">` tag for **VanUI** to work properly. | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -66,12 +66,12 @@ export default (doc: HTMLDocument) => { | |
| ), | ||
| pre( | ||
| code({class: "language-html"}, | ||
| "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.min.js\"></script>\n", | ||
| "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.min.js\"></script>\n", | ||
| ), | ||
| ), | ||
| p( | ||
| Symbol( | ||
| "https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.js", | ||
| "https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.js", | ||
| ), | ||
| " can be used for the non-minified version.", | ||
| ), | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,8 +52,8 @@ <h1 class="w3-padding-16 w3-xxxlarge"> | |
| <div id="page"> | ||
| <div id="content"><h1 class="w3-xxlarge"><strong>VanUI</strong>: A Collection of Grab 'n Go Reusable Utility and UI Components for VanJS</h1><p>🙏 Feedback and contribution are welcome and greatly appreciated! (<a href="https://github.com/vanjs-org/van/tree/main/components" class="w3-hover-opacity">source code</a>)</p><h2 class="w3-xxlarge w3-text-red" id="installation"><a class="self-link" href="#installation">Installation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="via-npm"><a class="self-link" href="#via-npm">Via NPM</a></h3><p>The library is published as NPM package <a href="https://www.npmjs.com/package/vanjs-ui" class="w3-hover-opacity">vanjs-ui</a>. Run the following command to install the package:</p><pre><code class="language-shell">npm install vanjs-ui | ||
| </code></pre><p>To use the NPM package, add this line to your script:</p><pre><code class="language-js">import { <components you want to import> } from "vanjs-ui" | ||
| </code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol"><script type="text/javascript"></code> tag:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.min.js"></script> | ||
| </code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol"><script type="text/javascript"></code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/k61m70vz/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/2kp3mu6b/1/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol"><script></code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts" | ||
| </code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol"><script type="text/javascript"></code> tag:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.min.js"></script> | ||
| </code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol"><script type="text/javascript"></code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/k61m70vz/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/2kp3mu6b/1/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol"><script></code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts" | ||
|
|
||
| declare const Modal: typeof ModalType | ||
| </code></pre><h2 class="w3-xxlarge w3-text-red" id="documentation"><a class="self-link" href="#documentation">Documentation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following components have been implemented so far:</p><ul><li>Utility components:<ul><li><a href="#await" class="w3-hover-opacity">Await</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/await?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li><li>UI components:<ul><li><a href="#modal" class="w3-hover-opacity">Modal</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/modal?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#tabs" class="w3-hover-opacity">Tabs</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tabs?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#message" class="w3-hover-opacity">MessageBoard</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/message?file=/src/main.ts" class="w3-hover-opacity">preview</a>)</li><li><a href="#tooltip" class="w3-hover-opacity">Tooltip</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tooltip?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#toggle" class="w3-hover-opacity">Toggle</a> (<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">preview</a>)</li><li><a href="#optiongroup" class="w3-hover-opacity">OptionGroup</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/option-group?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#banner" class="w3-hover-opacity">Banner</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/banner?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#floatingwindow" class="w3-hover-opacity">FloatingWindow</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/window?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><span style="color:red; padding-right: 0.3rem;"><strong>New!</strong></span><a href="#choose" class="w3-hover-opacity">choose</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/choose?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li></ul><h3 class="w3-large w3-text-red" id="await"><a class="self-link" href="#await">Await</a></h3><p><em>Author: <a href="https://github.com/Hunter-Gu" class="w3-hover-opacity">@Hunter-Gu</a></em></p><p><code class="symbol">Await</code> is a utility component that helps you build UI components based on asynchronous data (i.e.: a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="w3-hover-opacity"><code class="symbol">Promise</code></a> object).</p><h4 class="w3-medium w3-text-red" id="signature"><a class="self-link" href="#signature">Signature</a></h4><pre><code class="language-js">Await({ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,8 +52,8 @@ <h1 class="w3-padding-16 w3-xxxlarge"> | |
| <div id="page"> | ||
| <div id="content"><h1 class="w3-xxlarge"><strong>VanUI</strong>: A Collection of Grab 'n Go Reusable Utility and UI Components for VanJS</h1><p>🙏 Feedback and contribution are welcome and greatly appreciated! (<a href="https://github.com/vanjs-org/van/tree/main/components" class="w3-hover-opacity">source code</a>)</p><h2 class="w3-xxlarge w3-text-red" id="installation"><a class="self-link" href="#installation">Installation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="via-npm"><a class="self-link" href="#via-npm">Via NPM</a></h3><p>The library is published as NPM package <a href="https://www.npmjs.com/package/vanjs-ui" class="w3-hover-opacity">vanjs-ui</a>. Run the following command to install the package:</p><pre><code class="language-shell">npm install vanjs-ui | ||
| </code></pre><p>To use the NPM package, add this line to your script:</p><pre><code class="language-js">import { <components you want to import> } from "vanjs-ui" | ||
| </code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol"><script type="text/javascript"></code> tag:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/van-ui.nomodule.min.js"></script> | ||
| </code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol"><script type="text/javascript"></code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/k61m70vz/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/2kp3mu6b/1/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol"><script></code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts" | ||
| </code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol"><script type="text/javascript"></code> tag:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/van-ui.nomodule.min.js"></script> | ||
| </code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol"><script type="text/javascript"></code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/k61m70vz/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/2kp3mu6b/1/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol"><script></code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts" | ||
|
|
||
| declare const Modal: typeof ModalType | ||
| </code></pre><h2 class="w3-xxlarge w3-text-red" id="documentation"><a class="self-link" href="#documentation">Documentation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following components have been implemented so far:</p><ul><li>Utility components:<ul><li><a href="#await" class="w3-hover-opacity">Await</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/await?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li><li>UI components:<ul><li><a href="#modal" class="w3-hover-opacity">Modal</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/modal?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#tabs" class="w3-hover-opacity">Tabs</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tabs?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#message" class="w3-hover-opacity">MessageBoard</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/message?file=/src/main.ts" class="w3-hover-opacity">preview</a>)</li><li><a href="#tooltip" class="w3-hover-opacity">Tooltip</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tooltip?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#toggle" class="w3-hover-opacity">Toggle</a> (<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">preview</a>)</li><li><a href="#optiongroup" class="w3-hover-opacity">OptionGroup</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/option-group?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#banner" class="w3-hover-opacity">Banner</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/banner?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#floatingwindow" class="w3-hover-opacity">FloatingWindow</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/window?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><span style="color:red; padding-right: 0.3rem;"><strong>New!</strong></span><a href="#choose" class="w3-hover-opacity">choose</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/choose?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li></ul><h3 class="w3-large w3-text-red" id="await"><a class="self-link" href="#await">Await</a></h3><p><em>Author: <a href="https://github.com/Hunter-Gu" class="w3-hover-opacity">@Hunter-Gu</a></em></p><p><code class="symbol">Await</code> is a utility component that helps you build UI components based on asynchronous data (i.e.: a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="w3-hover-opacity"><code class="symbol">Promise</code></a> object).</p><h4 class="w3-medium w3-text-red" id="signature"><a class="self-link" href="#signature">Signature</a></h4><pre><code class="language-js">Await({ | ||
|
|
||