<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>
docs | OnebayUI
</title>
<meta name="description" content="A mobile web UI library write by vue3">
<link rel="stylesheet" href="/assets/style.aa86a0fe.css">
<link rel="modulepreload" href="/assets/Home.c7b4a824.js">
<link rel="modulepreload" href="/assets/app.71f0c16d.js">
<link rel="modulepreload" href="/assets/README.md.bcad5d62.lean.js">
<link rel="modulepreload" href="/assets/app.71f0c16d.js">
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.ico">
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M049RY7KX1"></script>
<script src="/assets/js/ga.js"></script>
</head>
<body>
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-c0a2c60c><div class="sidebar-button" data-v-c0a2c60c><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="OnebayUI, back to home" data-v-c0a2c60c data-v-7a4ac696><img class="logo" src="/assets/images/onebay.png" alt="Logo" data-v-7a4ac696> OnebayUI</a><div class="flex-grow" data-v-c0a2c60c></div><div class="nav" data-v-c0a2c60c><nav class="nav-links" data-v-c0a2c60c data-v-f73db414><!--[--><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item" href="/guide/getting-started" data-v-3f935ff0>Guide <!----></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item" href="/docs/action/action-sheet" data-v-3f935ff0>Components <!----></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item isExternal" href="https://github.com/onebay/onebay-ui/releases" target="_blank" rel="noopener noreferrer" data-v-3f935ff0>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-3f935ff0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item isExternal" href="https://github.com/onebay/onebay-ui" target="_blank" rel="noopener noreferrer" data-v-3f935ff0>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-3f935ff0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-4b92f82c><nav class="nav-links nav" data-v-4b92f82c data-v-f73db414><!--[--><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item" href="/guide/getting-started" data-v-3f935ff0>Guide <!----></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item" href="/docs/action/action-sheet" data-v-3f935ff0>Components <!----></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item isExternal" href="https://github.com/onebay/onebay-ui/releases" target="_blank" rel="noopener noreferrer" data-v-3f935ff0>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-3f935ff0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-f73db414><div class="nav-link" data-v-f73db414 data-v-3f935ff0><a class="item isExternal" href="https://github.com/onebay/onebay-ui" target="_blank" rel="noopener noreferrer" data-v-3f935ff0>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-3f935ff0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-4b92f82c><!--[--><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/guide/" data-v-4b92f82c>Introduce</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/guide/getting-started" data-v-4b92f82c>Getting started</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>action</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/action-sheet" data-v-4b92f82c>action-sheet</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/activity-indicator" data-v-4b92f82c>activity-indicator</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/message" data-v-4b92f82c>message</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/modal" data-v-4b92f82c>modal</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/progress" data-v-4b92f82c>progress</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/action/pull-to-refresh" data-v-4b92f82c>pull-to-refresh</a><!----></li></ul></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>basic</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/basic/button" data-v-4b92f82c>button</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/basic/icon" data-v-4b92f82c>icon</a><!----></li></ul></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>form</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/checkbox" data-v-4b92f82c>checkbox</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/image-picker" data-v-4b92f82c>image-picker</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/input" data-v-4b92f82c>input</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/input-number" data-v-4b92f82c>input-number</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/picker" data-v-4b92f82c>picker</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/radio" data-v-4b92f82c>radio</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/range" data-v-4b92f82c>range</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/rate" data-v-4b92f82c>rate</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/search-bar" data-v-4b92f82c>search-bar</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/slider" data-v-4b92f82c>slider</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/switch" data-v-4b92f82c>switch</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/form/textarea" data-v-4b92f82c>textarea</a><!----></li></ul></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>layout</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/layout/accordion" data-v-4b92f82c>accordion</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/layout/flex" data-v-4b92f82c>flex</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/layout/float-layout" data-v-4b92f82c>float-layout</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/layout/list" data-v-4b92f82c>list</a><!----></li></ul></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>navigation</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/back-top" data-v-4b92f82c>back-top</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/drawer" data-v-4b92f82c>drawer</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/navbar" data-v-4b92f82c>navbar</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/pagination" data-v-4b92f82c>pagination</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/segmented-control" data-v-4b92f82c>segmented-control</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/navigation/tabbar" data-v-4b92f82c>tabbar</a><!----></li></ul></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><p class="sidebar-link-item" data-v-4b92f82c>view</p><ul class="sidebar-links" data-v-4b92f82c><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/badge" data-v-4b92f82c>badge</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/divider" data-v-4b92f82c>divider</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/image-preview" data-v-4b92f82c>image-preview</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/noticebar" data-v-4b92f82c>noticebar</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/steps" data-v-4b92f82c>steps</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/swiper" data-v-4b92f82c>swiper</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/tag" data-v-4b92f82c>tag</a><!----></li><li class="sidebar-link" data-v-4b92f82c data-v-4b92f82c><a class="sidebar-link-item" href="/docs/view/timeline" data-v-4b92f82c>timeline</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-2b25a7d0><div class="container" data-v-2b25a7d0><!--[--><!--]--><div class="content" data-v-2b25a7d0><div data-v-2b25a7d0><h2 id="docs">docs</h2><h3 id="dev">dev</h3><div class="language-bash"><pre><code><span class="token function">npm</span> start
</code></pre></div><p>If you want to see the demo iframe, you should also run the demo command;</p><div class="language-bash"><pre><code><span class="token builtin class-name">cd</span> packages/onebay-ui-demo
<span class="token function">npm</span> start
// or
<span class="token function">npm</span> run dev:tsx
</code></pre></div></div></div><footer class="page-footer" data-v-2b25a7d0 data-v-ad063ca8><div class="edit" data-v-ad063ca8><div class="edit-link" data-v-ad063ca8 data-v-1501f284><!----></div></div><div class="updated" data-v-ad063ca8><!----></div></footer><!----><!--[--><!--]--></div></main></div><!----><!--]--></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"changelog.md\":\"e9ccd28f\",\"readme.md\":\"bcad5d62\",\"index.md\":\"e11afd52\",\"guide_getting-started.md\":\"997cca82\",\"guide_index.md\":\"047990fd\",\"src_code-template.md\":\"cfd97f2e\",\"src_template.md\":\"13d1183b\",\"docs_action_action-sheet.md\":\"4af47ef6\",\"docs_action_activity-indicator.md\":\"f6ccbd0c\",\"docs_action_message.md\":\"2e34214d\",\"docs_action_modal.md\":\"c55ae972\",\"docs_action_progress.md\":\"4607bef9\",\"docs_action_pull-to-refresh.md\":\"73647c02\",\"docs_basic_button.md\":\"099e9c6f\",\"docs_basic_icon.md\":\"b1fb46f4\",\"docs_form_checkbox.md\":\"7b606faf\",\"docs_form_image-picker.md\":\"ca6f6109\",\"docs_form_input-number.md\":\"f18d006f\",\"docs_form_input.md\":\"477bab19\",\"docs_form_picker.md\":\"19d1a6d6\",\"docs_form_radio.md\":\"0fc6404d\",\"docs_form_range.md\":\"506b02cf\",\"docs_form_rate.md\":\"a762328e\",\"docs_form_search-bar.md\":\"bbd6e176\",\"docs_form_slider.md\":\"641f6fa6\",\"docs_form_switch.md\":\"bb323221\",\"docs_form_textarea.md\":\"9c44acbf\",\"docs_layout_accordion.md\":\"359087df\",\"docs_layout_flex.md\":\"315972f4\",\"docs_layout_float-layout.md\":\"63572902\",\"docs_layout_list.md\":\"912c40bb\",\"docs_navigation_back-top.md\":\"bbafb77f\",\"docs_navigation_drawer.md\":\"9a7f45c4\",\"docs_navigation_indexes.md\":\"4d114658\",\"docs_navigation_navbar.md\":\"d3e4848f\",\"docs_navigation_pagination.md\":\"09d34920\",\"docs_navigation_segmented-control.md\":\"42489a88\",\"docs_navigation_tabbar.md\":\"755007e7\",\"docs_view_badge.md\":\"93e3fe77\",\"docs_view_divider.md\":\"36ba906b\",\"docs_view_image-preview.md\":\"b28f2452\",\"docs_view_noticebar.md\":\"a7f2d0f1\",\"docs_view_steps.md\":\"47ee714b\",\"docs_view_swiper.md\":\"747472c3\",\"docs_view_tag.md\":\"f561a28b\",\"docs_view_timeline.md\":\"eae613bf\"}")</script>
<script type="module" async src="/assets/app.71f0c16d.js"></script>
</body>
</html>