### 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
Page 1
This is the first page.
Push page
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
Dialogs
Simple Dialog
Lorem ipsum
```
```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
Popover
Click me
Click meClick meClick me
```
```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
Switches
Settings
Enable cool feature
Enable even cooler feature
Enable amazing feature
```
--------------------------------
### 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 () {});
```
--------------------------------
### 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
Click me!
```
--------------------------------
### 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
Popover
Click me
This is a popover
Close
```
```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
Toasts
Queue notification toast (top)
Toggle element toast (bottom)
```
--------------------------------
### 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');
```
--------------------------------
### 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
```
--------------------------------
### 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
Icons
Material icons
Font awesome
Ionicons
Automatic icon
```
```javascript
ons.bootstrap();
```
--------------------------------
### 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
Lists
DefaultItem AItem B Toggle expansionExpandable
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 `` 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 = () => (
My app
);
return (
Click me!
);
};
ons.ready(function() {
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render();
});
```
--------------------------------
### 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
```
--------------------------------
### 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 = () => (
Floating action button
);
const renderFixed = () => (
);
const handleClick = () =>
ons.notification.alert('You clicked the button!');
return (
Some Content
);
};
ons.ready(function() {
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render();
```
--------------------------------
### 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 = () => (
```
--------------------------------
### 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 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
```
--------------------------------
### 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
Lists
DefaultItem AItem BExpandable
Tap to expand
Expandable content
Tappable / RippleTap meChevronChevronThumbnails and titles
Cutest kittyOn the Internet
```
```javascript
ons.bootstrap();
```
--------------------------------
### Interactive toast example with buttons and FAB
Source: https://onsen.io/v2/api/js/ons-toast.html
A complete example showing a page with buttons that trigger a notification toast and toggle an element toast, along with a FAB and a toast element with an animation.
```html
Queue notification toast (top)
Toggle element toast (bottom)
+
FABs up!
```
--------------------------------
### 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'}
```
--------------------------------
### 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
{{ title }}
Click me!
```
--------------------------------
### Full Page Example with Icons
Source: https://onsen.io/v2/api/angular1/ons-speed-dial-item.html
A complete page example showing a speed dial with social media icons. The speed dial is positioned at bottom right and opens upward. Requires `ons.bootstrap()` to initialize the app.
```html
Speed dial
```
```javascript
ons.bootstrap();
```
--------------------------------
### Live example with v-ons-toolbar-button (JavaScript)
Source: https://onsen.io/v2/api/vue/v-ons-toolbar-button.html
JavaScript code for the live example, creating a Vue instance with the template and data. This is the companion script to the HTML template.
```javascript
new Vue({
el: '#app',
template: '#main',
data() {
return {
title: 'My app'
};
}
});
```
--------------------------------
### Install angularjs-onsenui via npm
Source: https://onsen.io/v2/guide/angular1/index.html
Use npm to install the separate AngularJS 1.x bindings package for Onsen UI.
```bash
npm install angularjs-onsenui
```
--------------------------------
### v-ons-select JavaScript example
Source: https://onsen.io/v2/api/vue/v-ons-select.html
JavaScript code for the v-ons-select example, setting up a Vue instance with data for the select options and selected value.
```javascript
new Vue({
el: '#app',
template: '#main',
data() {
return {
items: [
{ text: 'Vue', value: 'Vue' },
{ text: 'React', value: 'React' },
{ text: 'Angular', value: 'Angular' }
],
selectedItem: 'Vue'
};
}
});
```
--------------------------------
### Basic Navigator Usage
Source: https://onsen.io/v2/api/react/Navigator.html
Example of initializing a Navigator with a renderPage function and an initialRoute.
```jsx
navigator.popPage()}
/>
}
initialRoute={{
title: 'First Page'
}} />
}
}
```
--------------------------------
### Live example: Notifications page (HTML)
Source: https://onsen.io/v2/api/angular1/ons.notification.html
HTML for a page that uses `ons.notification.alert`, `confirm`, and `prompt` with `ng-click` handlers. It is part of a live example with a corresponding JS file.
```html
Notifications
AlertConfirmationPrompt
```
--------------------------------
### 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
```
--------------------------------
### Popover example with isOpen and getTarget
Source: https://onsen.io/v2/api/react/ons-popover.html
Shows a React component that uses `isOpen` state and a `getTarget` function returning a ref to a button to display a popover. The example is part of a tutorial and includes an HTML container div.
```html
```
```jsx
class MyPage extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.buttonRef = React.createRef();
this.show = this.show.bind(this);
this.hide = this.hide.bind(this);
this.getTarget = this.getTarget.bind(this);
}
renderToolbar() {
return (
Popover
);
}
getTarget() {
return this.buttonRef;
}
show() {
this.setState({isOpen: true});
}
hide() {
this.setState({isOpen: false});
}
```
--------------------------------
### Navigator with page stack example
Source: https://onsen.io/v2/api/vue/v-ons-back-button.html
Interactive example showing a navigator with a page stack and a button that pushes a second page. The HTML template defines the navigator and first page, while the JavaScript defines the page objects and Vue instance. Note: the code is truncated with X's in the source.
```html
Page 1
This is the first page
Push Page 2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
```javascript
const page2 = {
key: 'page2',
template: '#page2'
};
const page1 = {
key: 'page1',
template: '#page1',
methods: {
push() {
this.$emit('push-page', page2);
}
}
};
new Vue({
el: '#app',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
--------------------------------
### 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
Floating action button
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