Onsen UI Playground
Playground, interactive tutorial and issue reporter for Onsen UI.
Try it here: http://onsenui.github.io/playground
We always appreciate contributions in form of issues or pull requests. For questions about OnsenUI please ask in our community.
First, clone the repository with
firstname.lastname@example.org:OnsenUI/playground.git. After that just run a simple http-server for example:
$ npm install -g http-server $ http-server . -c-1 -o -p 9000
In order to create new tutorials simply add an HTML file to the corresponding directory under
./tutorial/. After that, include a line in
./js/modules.js to index it in the app. Please check the existing examples to understand the proper syntax. Also add the necessary keywords to
modulesDefaultKeywords (same file) to make the tutorial searchable.
By default, this app fetches the latest released version of Onsen UI and the bindings. This can be modified by running
app.setVersion(libName, version) in the Developer Console, where
libName is a string matching 'onsenui', 'react-onsenui' or any other bindings; and
version is a string containing the exact version, e.g. '2.0.5'.
All the libs version are listed under
undefined value means
If the playground app is served locally together with Onsen UI repo, it will fetch local versions for Onsen UI and the bindings. It requires Onsen UI main repo directory to be located in the same level:
workspace/ ├── Onsen UI/ (main repo) └── playground/ (playground repo) http-server workspace -c-1 // Navigate to localhost:8080/playground/
This can be disabled by running
app.config.local = false; in Developer Console and reloading the demo.
Testing Onsen UI
Open this on a device browser while serving locally. It will automatically switch to
tabs.html view and can be used to manually debug Onsen UI with any framework.
As part of the build process of onsen.io, it pulls the
gh-pages branch of this repository. To release your Playground changes, merge
gh-pages (preferably via a pull request, even if you merge it yourself). Then trigger a new build of
onsen.io as per its release guide.
tab-visibilitybinary parameter can be used to toggle tabs visibility:
?tab-visibility=1110shows everything except "Docs" tab.
docsboolean parameter is used to optionally hide the Docs panel (
issuenumeric parmeter can be included to fetch a GitHub issue information. E.g.
externalparmeter can specify an external URL to a tutorial-like document. E.g.