Onsen UI

https://onsen.io/v2/
Admin
Onsen UI is an open-source UI component library designed for building HTML5 hybrid and mobile web...
Tokens:416,547
Snippets:4,509
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Full example with modifiers (JavaScript setup)

Source: https://onsen.io/v2/api/vue3/v-ons-button.html

JavaScript code that creates a Vue app using the template from the HTML example and mounts it. This is the companion script for the tutorial example.

```javascript
const app = Vue.createApp({
template: '#main'
});
app.use(VueOnsen);
app.mount('#app');
```

--------------------------------

### Navigator implementation with HTML and JS

Source: https://onsen.io/v2/api/angular1/ons-navigator.html

A complete example showing the navigator setup, page templates, and controller logic for handling page initialization and data access.

```html
<ons-navigator swipeable var="myNavigator" page="page1.html"></ons-navigator>
<template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button ng-click="myNavigator.pushPage('page2.html', {data: {title: 'Page 2'}})">Push page</ons-button>
</ons-page>
</template>
<template id="page2.html">
<ons-page ng-controller="Page2Controller as page2" ons-init="page2.init($event)">
<ons-toolbar>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

```javascript
ons.bootstrap()
.controller('Page2Controller', function($scope) {
console.log('controller', $scope.myNavigator.topPage.data);
this.init = function(e) {
// Ensure the emitter is the current page, not a nested one
if (e.target === e.currentTarget) {
var page = e.target;
// Safely access data
console.log('init event', page.data);
}
};
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Implement a full dialog example

Source: https://onsen.io/v2/api/vue3/v-ons-dialog.html

A complete example showing the HTML template and the corresponding Vue application setup for a dialog.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Dialogs</div>
</v-ons-toolbar>
<p>
<v-ons-button @click="dialogVisible = true">
Simple Dialog
</v-ons-button>
</p>
<v-ons-dialog
cancelable
v-model:visible="dialogVisible"
>
<p style="text-align: center">Lorem ipsum</p>
```

```javascript
const app = Vue.createApp({
template: '#main',
data() {
return {
dialogVisible: false,
};
}
});
app.use(VueOnsen);
app.mount('#app');
```

--------------------------------

### Popover implementation with template and script

Source: https://onsen.io/v2/api/vue/v-ons-popover.html

This example demonstrates a complete setup for a popover, including the HTML template with buttons to trigger the popover and the Vue instance logic to manage visibility and target positioning.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Popover</div>
<div class="right">
<v-ons-toolbar-button @click="showPopover($event, 'down', true)">
<v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
<span v-else> Click me </span>
</v-ons-toolbar-button>
</div>
</v-ons-toolbar>
<div style="height: 100%; display: flex; flex-direction: column">
<div style="height: 100%; margin: 1em 0; display: flex; justify-content: space-around">
<v-ons-button @click="showPopover($event, 'right')" style="align-self: flex-start">Click me</v-ons-button>
<v-ons-button @click="showPopover($event, 'up')" style="align-self: center">Click me</v-ons-button>
<v-ons-button @click="showPopover($event, 'left')" style="align-self: flex-end">Click me</v-ons-button>
```

```javascript
new Vue({
el: '#app',
template: '#main',
data() {
return {
popoverVisible: false,
popoverTarget: null,
popoverDirection: 'up',
coverTarget: false
};
},
methods: {
showPopover(event, direction, coverTarget = false) {
this.popoverTarget = event;
this.popoverDirection = direction;
this.coverTarget = coverTarget;
this.popoverVisible = true;
```

--------------------------------

### Full page example with switches in a list

Source: https://onsen.io/v2/api/js/ons-switch.html

Complete example of a page with a toolbar and a list of switches in a settings layout, demonstrating checked, unchecked, and disabled states.

```html
<ons-page>
<ons-toolbar>
<div class="center">Switches</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Settings</ons-list-header>
<ons-list-item>
<div class="center">
Enable cool feature
</div>
<div class="right">
<ons-switch checked></ons-switch>
</div>
</ons-list-item>
<ons-list-item>
<div class="center">
Enable even cooler feature
</div>
<div class="right">
<ons-switch></ons-switch>
</div>
</ons-list-item>
<ons-list-item>
<div class="center">
Enable amazing feature
</div>
<div class="right">
<ons-switch disabled></ons-switch>
</div>
</ons-list-item>
</ons-list>
```

--------------------------------

### Live example: Notifications page (JS)

Source: https://onsen.io/v2/api/angular1/ons.notification.html

JavaScript for the live example, bootstrapping Onsen UI and defining a controller. It is part of the same example as the HTML above.

```javascript
ons.bootstrap()
.controller('PageController', function () {});

```

--------------------------------

### Vue Application Initialization

Source: https://onsen.io/v2/api/vue3/v-ons-card.html

The JavaScript setup required to mount the Vue application using the template defined in the card example.

```javascript
const app = Vue.createApp({
template: '#main'
});
app.use(VueOnsen);
app.mount('#app');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Popover Implementation Example

Source: https://onsen.io/v2/api/angular1/ons-popover.html

A complete example showing a page with a button that triggers a popover display.

```html
<ons-page>
<ons-toolbar>
<div class="center">Popover</div>
</ons-toolbar>
<p style="text-align: center; margin: 50% 0;">
<ons-button ng-click="popover.show($event)">Click me</ons-button>
</p>
</ons-page>
<ons-popover direction="up" var="popover">
<div style="padding: 10px; text-align: center;">
<p>
This is a popover
</p>
<p>
<ons-button ng-click="popover.hide()">Close</ons-button>
</p>
</div>
</ons-popover>
```

```javascript
ons.bootstrap();
```

--------------------------------

### Install Vue CLI

Source: https://onsen.io/v2/guide/vue/index.html

Install the Vue CLI globally to facilitate project creation.

```bash
npm install -g @vue/cli
```

--------------------------------

### Install onsenui and ngx-onsenui

Source: https://onsen.io/v2/guide/angular2/index.html

Use npm to install the Onsen UI core and the Angular binding library.

```bash
npm install onsenui ngx-onsenui --save
```

--------------------------------

### Toasts tutorial example (HTML template)

Source: https://onsen.io/v2/api/vue/v-ons-toast.html

HTML template for the tutorial example. Includes a button that queues a notification toast and a button that toggles an element toast.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Toasts</div>
</v-ons-toolbar>
<p>
<v-ons-button
@click="$ons.notification.toast('Hi there!', { timeout: 1000, animation: 'fall' })"
>
Queue notification toast (top)
</v-ons-button>
<br><br>
<v-ons-button @click="toastVisible = !toastVisible">Toggle element toast (bottom)</v-ons-button>
</p>
```

--------------------------------

### List with toggle expansion and Vue app setup

Source: https://onsen.io/v2/api/vue3/v-ons-list-item.html

This is a tutorial example showing a list with a default header and an expandable list controlled by a button. The HTML template includes a toggle button and the JavaScript sets up the Vue app with the isExpanded data property. Note that the source contains placeholder markers (XXXX...) indicating incomplete code.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Lists</div>
</v-ons-toolbar>
<v-ons-list>
<v-ons-list-header>Default</v-ons-list-header>
<v-ons-list-item>Item A</v-ons-list-item>
<v-ons-list-item>Item B</v-ons-list-item>
</v-ons-list>
<br />
<v-ons-button @click="isExpanded = !isExpanded">Toggle expansion</v-ons-button>
<v-ons-list>
<v-ons-list-header>Expandable</v-ons-list-header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
JS
1
2
3
4
5
6
7
8
9
10
11
const app = Vue.createApp({
template: '#main',
data() {
return {
isExpanded: false
}
}
});
app.use(VueOnsen);
app.mount('#app');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Install Onsen UI and Vue bindings

Source: https://onsen.io/v2/guide/vue

Install the core Onsen UI package and the Vue bindings inside the project root.

```bash
npm install onsenui vue-onsenui

```

--------------------------------

### React example with Ons.ToolbarButton

Source: https://onsen.io/v2/api/react/ons-toolbar-button.html

A complete React example demonstrating the `<Ons.ToolbarButton>` inside a toolbar, with an icon and a button that triggers an alert.

```jsx
const MyPage = () => {
const handleClick = () =>
ons.notification.alert('Hello world!');
const renderToolbar = () => (
<Ons.Toolbar>
<div className='center'>My app</div>
<div className='right'>
<Ons.ToolbarButton>
<Ons.Icon icon='ion-ios-menu, material:md-menu'></Ons.Icon>
</Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
return (
<Ons.Page renderToolbar={renderToolbar}>
<p style={{textAlign: 'center'}}>
<Ons.Button onClick={handleClick}>
Click me!
</Ons.Button>
</p>
</Ons.Page>
);
};
ons.ready(function() {
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<MyPage />);
});
```

--------------------------------

### Install React bindings via NPM

Source: https://onsen.io/v2/guide/react

Use this command to install the necessary Onsen UI packages for React projects.

```bash
$ npm install onsenui react-onsenui --save
```

--------------------------------

### React example with toolbar, notification, and icons

Source: https://onsen.io/v2/api/react/ons-icon.html

Complete React example using Onsen UI components: a Toolbar with an icon button, a notification alert on click, and multiple icons including spin, colored, and button icons. The example uses ons.notification.alert and conditional Fab styling based on platform.

```jsx
const MyPage = () => {
const renderToolbar = () => (
<Ons.Toolbar>
<div className='center'>Floating action button</div>
<div className='right'>
<Ons.ToolbarButton><Ons.Icon icon='ion-ios-menu, material:md-menu' /></Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
const handleClick = () =>
ons.notification.alert('You clicked the button!');
return (
<Ons.Page renderToolbar={renderToolbar}>
<section style={{fontSize: '26px', margin: '16px'}}>
<p>
<Ons.Icon icon='md-delete' />
</p>
<p>
<Ons.Icon style={{color: 'red'}} spin icon='md-spinner' />
</p>
<p>
<Ons.Button>
Edit <Ons.Icon icon='md-edit' />
</Ons.Button>
</p>
</section>
<Ons.Fab
style={{backgroundColor: ons.platform.isIOS() ? '#4282cc' : null}}
position='bottom right'>

```

--------------------------------

### Live example with v-ons-toolbar-button (HTML)

Source: https://onsen.io/v2/api/vue/v-ons-toolbar-button.html

HTML template for a live example that uses v-ons-toolbar-button inside a toolbar, along with a button that triggers an alert. The template is referenced by the JavaScript snippet.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">{{ title }}</div>
<div class="right">
<v-ons-toolbar-button>
<v-ons-icon icon="ion-ios-menu, material: md-menu"></v-ons-icon>
</v-ons-toolbar-button>
</div>
</v-ons-toolbar>
<p style="text-align: center">
<v-ons-button @click="$ons.notification.alert('Hello World!')">
Click me!
</v-ons-button>
</p>
</v-ons-page>

```

--------------------------------

### Onsen UI button modifiers examples

Source: https://onsen.io/v2/guide/theming.html

Shows preset modifiers for Onsen UI buttons. Each modifier gives a different appearance; modifiers can be changed dynamically by manipulating the `modifier` attribute from JavaScript.

```html
<ons-button modifier="quiet">Quiet</ons-button>
<ons-button modifier="light">Light</ons-button>
<ons-button modifier="large">Large</ons-button>
<ons-button modifier="cta">Call To Action</ons-button>
<ons-button modifier="material">Material Design</ons-button>

```

--------------------------------

### Serve the application

Source: https://onsen.io/v2/guide/vue/index.html

Run the development server to preview the application in the browser.

```bash
npm run serve
```

--------------------------------

### Create a new Vue 3 project with Vite

Source: https://onsen.io/v2/guide/vue3/index.html

Run this command in a terminal with npm installed to scaffold a new Vue 3 project using Vite. The interactive prompts guide you through project setup options.

```bash
npm init vue@latest

```

--------------------------------

### jQuery with Onsen UI CDN installation example

Source: https://onsen.io/v2/guide/jquery/index.html

Complete HTML page that loads Onsen UI and jQuery from a CDN. It initializes a click handler on an ons-button element and shows an alert when tapped. Use this as a starting point for integrating jQuery with Onsen UI.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <script>
    $(function(){
      // Initialization code
      $('ons-button').on('click', function(e) {
        ons.notification.alert('Button is tapped!');
      })
    });
  </script>
  <ons-button>Click me!</ons-button>
</body>
</html>
```

--------------------------------

### v-ons-list Interactive Example Script

Source: https://onsen.io/v2/api/vue3/v-ons-list.html

Vue 3 script setup for the interactive list example.

```javascript
const app = Vue.createApp({
template: '#main',
data() {
return {
isExpanded: false
}
}
});
app.use(VueOnsen);
app.mount('#app');
```

--------------------------------

### Complete example with various icon types and platform-specific icon

Source: https://onsen.io/v2/api/angular1/ons-icon.html

A full page example showing Material, Font Awesome, Ionicons, and an automatic platform-specific icon. Includes a toolbar button and uses ons.bootstrap() in JavaScript.

```html
<ons-page>
<ons-toolbar>
<div class="center">Icons</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-ios-menu, material:md-more-vert"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<section style="padding: 10px">
<h3>Material icons</h3>
<ons-icon icon="md-face"></ons-icon>
<ons-icon icon="md-home"></ons-icon>
<ons-icon icon="md-zoom-in"></ons-icon>
<h3>Font awesome</h3>
<ons-icon icon="fa-file"></ons-icon>
<ons-icon icon="fa-cog"></ons-icon>
<ons-icon icon="fa-car"></ons-icon>
<h3>Ionicons</h3>
<ons-icon icon="ion-ios-menu"></ons-icon>
<ons-icon icon="ion-ios-hammer"></ons-icon>
<ons-icon icon="ion-ios-calendar"></ons-icon>
<h3>Automatic icon</h3>
<ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
</section>
</ons-page>
```

```javascript
ons.bootstrap();
```

--------------------------------

### Speed Dial Implementation

Source: https://onsen.io/v2/api/vue3/v-ons-speed-dial-item.html

A complete example showing the HTML template and Vue application setup for a speed dial component.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Floating action button</div>
</v-ons-toolbar>
<p style="text-align: center">
<label>Show FAB <input type="checkbox" v-model="spdVisible" /></label>
<br><br>
<label>Show items <input type="checkbox" v-model="spdOpen" /></label>
</p>
<v-ons-speed-dial position="bottom right" direction="up"
:visible="spdVisible"
v-model:open="spdOpen"
>
<v-ons-fab>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

```javascript
const app = Vue.createApp({
template: '#main',
data() {
return {
spdVisible: true,
spdOpen: true,
shareItems: {
'Twitter': 'md-twitter',
'Facebook': 'md-facebook',
'Google+': 'md-google-plus'
}
};
}
});
app.use(VueOnsen);
app.mount('#app');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Run Development Server

Source: https://onsen.io/v2/guide/vue3

Command to start the development server for previewing the application.

```bash
npm run dev
```

--------------------------------

### Serve the app with http-server

Source: https://onsen.io/v2/guide/pwa/tutorial.html

Run this command in the onsenui-pwa folder to start a local server. Then open http://localhost:8080 in Chrome to view the app.

```bash
http-server .
```

--------------------------------

### Checkbox implementation with VOnsCheckbox

Source: https://onsen.io/v2/api/vue3/v-ons-checkbox.html

A complete example showing the HTML template and JavaScript setup for a list of checkboxes bound to a data array.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Checkboxes</div>
</v-ons-toolbar>
<v-ons-list>
<v-ons-list-header>
Checkboxes - {{checkedColors}}
</v-ons-list-header>
<v-ons-list-item v-for="(color, $index) in colors" :key="color" tappable>
<label class="left">
<v-ons-checkbox
:input-id="'checkbox-' + $index"
:value="color"
v-model="checkedColors"
>
```

```javascript
const app = Vue.createApp({
template: '#main',
data() {
return {
colors: ['Red', 'Green', 'Blue'],
checkedColors: ['Green', 'Blue']
};
}
});
app.use(VueOnsen);
app.mount('#app');
```

--------------------------------

### Create Hello World Component

Source: https://onsen.io/v2/guide/vue3

Example of a single-file component using v-ons-page and v-ons-button.

```html
<template id="main-page">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Title</div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <v-ons-button @click="$ons.notification.alert('Hello World!')">
        Click me!
      </v-ons-button>
    </p>
  </v-ons-page>
</template>

<style>
  /* CSS goes here */
</style>

<script>
  // Javascript goes here
</script>
```

--------------------------------

### Hello World application with React

Source: https://onsen.io/v2/guide/react

A complete example of a basic React application using Onsen UI components.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/onsenui.css">
  <link rel="stylesheet" href="css/onsen-css-components.css">
  <script src="react.js"></script>
  <script src="react-dom.js"></script>
  <script src="onsenui.js"></script>
  <script src="react-onsenui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">
    var App = React.createClass({
      handleClick: function() {
        ons.notification.alert('Hello world!');
      },

      render: function() {
        return (
          <Ons.Page>
            <Ons.Button onClick={this.handleClick}>Tap me!</Ons.Button>
          </Ons.Page>
        );
      }
    });
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
</body>
</html>
```

--------------------------------

### VOnsToolbar with toolbar button and Vue app setup

Source: https://onsen.io/v2/api/vue3/v-ons-toolbar.html

A complete example showing a VOnsToolbar with a toolbar button in the right section, and the Vue app that mounts it. The template uses a data property for the title.

```html
<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">{{ title }}</div>
<div class="right">
<v-ons-toolbar-button icon="ion-ios-menu, material: md-menu"></v-ons-toolbar-button>
</div>
</v-ons-toolbar>
<p style="text-align: center">
Some content.
</p>
</v-ons-page>
</template>
<div id="app"></div>
```

```javascript
const app = Vue.createApp({
template: '#main',
data() {
return {
title: 'My app'
};
}
});
app.use(VueOnsen);
app.mount('#app');
```

--------------------------------

### Create a new Vue project

Source: https://onsen.io/v2/guide/vue/index.html

Initialize a new project using the Vue CLI.

```bash
vue create my-onsen-app
```

--------------------------------

### Angular 2+ (ngx-onsenui) ripple effect example

Source: https://onsen.io/v2/api/angular2/ons-ripple.html

The HTML block is the root element of the Angular app. The TypeScript block defines the AppComponent with a template that uses ons-ripple inside a styled div and an ons-list-item with the ripple attribute. The code is incomplete; the closing braces and NgModule setup are not shown.

```html
<app></app>
```

```ts
import {
Component,
OnsenModule,
NgModule,
CUSTOM_ELEMENTS_SCHEMA
} from 'ngx-onsenui';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({
selector: 'app',
template: `
<ons-page>
<ons-toolbar>
<div class="center">Ripple Effect</div>
</ons-toolbar>
<div class="background"></div>
<div class="content">
<ons-list>
<ons-list-item ripple>In list item</ons-list-item>
</ons-list>
<div style="margin: 10px auto; width: 100px; height: 100px; background-color: gray; border: 1px solid #ccc;">
<ons-ripple></ons-ripple>
Click me!
</div>
</div>
</ons-page>
`
})
export class AppComponent{

```

--------------------------------

### Full React example with Fab and click handler

Source: https://onsen.io/v2/api/react/ons-fab.html

A complete React example showing a `Page` with a toolbar and a fixed `Fab` that triggers an alert on click. It uses `ons.platform.isIOS()` for styling and `ons.notification.alert` for the click action.

```jsx
const MyPage = () => {
const renderToolbar = () => (
<Ons.Toolbar>
<div className='center'>Floating action button</div>
</Ons.Toolbar>
);
const renderFixed = () => (
<Ons.Fab
style={{backgroundColor: ons.platform.isIOS() ? '#4282cc' : null}}
onClick={handleClick}
position='bottom right'>
<Ons.Icon icon='md-face' />
</Ons.Fab>
);
const handleClick = () =>
ons.notification.alert('You clicked the button!');
return (
<Ons.Page
renderToolbar={renderToolbar}
renderFixed={renderFixed}
>
Some Content
</Ons.Page>
);
};
ons.ready(function() {
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<MyPage />);

```

--------------------------------

### Initialize Vue Project

Source: https://onsen.io/v2/guide/vue3

Run this command to start the process of creating a new Vue project using Vite.

```bash
npm init vue@latest
```

--------------------------------

### Animation options example

Source: https://onsen.io/v2/api/js/ons-back-button.html

Shows an example of the animationOptions property value.

```javascript
{duration: 0.2, delay: 0.4, timing: 'ease-in'}
```

--------------------------------

### Complete list example with headers, expandable, tappable, chevron, and thumbnail

Source: https://onsen.io/v2/api/angular1/ons-list-item.html

A comprehensive example from the tutorial showing various list item features: default items, expandable, tappable, chevron modifier, and thumbnail with title/subtitle. Includes the required `ons.bootstrap()` call.

```html
<ons-page>
  <ons-toolbar>
    <div class="center">Lists</div>
  </ons-toolbar>
  <ons-list>
    <ons-list-header>Default</ons-list-header>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-header>Expandable</ons-list-header>
    <ons-list-item expandable>
      Tap to expand
      <div class="expandable-content">Expandable content</div>
    </ons-list-item>
    <ons-list-header>Tappable / Ripple</ons-list-header>
    <ons-list-item tappable>Tap me</ons-list-item>
    <ons-list-header>Chevron</ons-list-header>
    <ons-list-item modifier="chevron" tappable>Chevron</ons-list-item>
    <ons-list-header>Thumbnails and titles</ons-list-header>
    <ons-list-item>
      <div class="left">
        <img class="list-item__thumbnail" src="http://placekitten.com/g/40/40">
      </div>
      <div class="center">
        <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span>
      </div>
    </ons-list-item>
  </ons-list>
</ons-page>
```

```javascript
ons.bootstrap();
```

--------------------------------

### Navigator implementation with templates

Source: https://onsen.io/v2/api/vue3/v-ons-navigator.html

A complete example showing the navigator template and the corresponding JavaScript configuration for page management.

```html
<template id="main">
<v-ons-navigator swipeable
v-model:page-stack="pageStack"
@push-page="pageStack = [...pageStack, $event]"
></v-ons-navigator>
</template>
<template id="page1">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Page 1</div>
</v-ons-toolbar>
<p style="text-align: center">
This is the first page
<v-ons-button @click="push">Push Page 2</v-ons-button>
</p>
</v-ons-page>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

```javascript
const page2 = {
key: 'page2',
template: '#page2'
};
const page1 = {
key: 'page1',
template: '#page1',
methods: {
push() {
this.$emit('push-page', page2);
}
}
};
const app = Vue.createApp({
template: '#main',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Interactive ons-search-input example

Source: https://onsen.io/v2/api/js/ons-search-input.html

An example showing an ons-search-input inside an ons-page, triggering an alert on change.

```html
<ons-page>
<p style="text-align: center; margin-top: 10px;">
<ons-search-input
placeholder="Search"
onchange="ons.notification.alert('Searched for: ' + this.value)"
></ons-search-input>
</p>
</ons-page>
```

--------------------------------

### Serve the Vue project

Source: https://onsen.io/v2/guide/vue

Serve the project locally so you can preview it in the browser. After running, open the given URL and click the button to see the alert dialog.

```bash
npm run serve

```

--------------------------------

### Install Onsen UI with npm

Source: https://onsen.io/v2/guide/installation.html

Install Onsen UI via npm and save it as a dependency in your project.

```bash
npm install onsenui --save
```

--------------------------------

### Toasts tutorial example (JavaScript)

Source: https://onsen.io/v2/api/vue/v-ons-toast.html

JavaScript for the tutorial example. Creates a Vue instance with data property toastVisible.

```javascript
new Vue({
el: '#app',
template: '#main',
data() {
return {
toastVisible: false,
};
}
});
```

--------------------------------

### Install vue-onsenui for Vue 3

Source: https://onsen.io/v2/guide/vue3

Install vue-onsenui v3 and its corresponding onsenui version for Vue 3 projects.

```bash
npm install --save vue-onsenui@latest onsenui@latest
```
Tokens:
Raw