Using Ionic without any framework

Importing Ionic

<!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>

A basic usage

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Using Ionic without any framework</title>

<!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body>

<!-- We create a vanilla Javascript function to call the alert -->
<script>
hello = async function () {
alert('Hello World!');
};
</script>

<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
<!-- Cool thing, the Ionic CSS utilities could be used too -->
<ion-content text-center>
<h1>Basic usage</h1>
<!-- We add an ion-button with an onclick event -->
<ion-button onclick="hello()">Click me</ion-button>
</ion-content>
</ion-app>

</body>
</html>

Codepen example

A bit more tricky usage

Modals

Popovers

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Using Ionic without any framework</title>

<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" media="screen">
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body>
<script>
hello = async function () {
alert('Hello World!');
};

// Our custom element
class MyPopover extends HTMLElement {
constructor() {
super();
}

async connectedCallback() {

// Here we parse the content of the popover
this.innerHTML = '<ion-content><ion-button onclick="hello()">Click me</ion-button></ion-content>';
}
}

// We define our custom element
customElements.define('my-popover', MyPopover);

// The function to bring the pieces together
presentMyPopover = async function() {
// We get the anchor
const popoverController = document.querySelector('ion-popover-controller');

await popoverController.componentOnReady();

// We create the popover for our custom element
const popover = await popoverController.create({
component: 'my-popover',
translucent: true
});

// We present the popover
return await popover.present();
};

</script>

<ion-app>
<ion-content text-center>
<h1>Popover usage</h1>
<!-- On click we call the function to open the popover -->
<ion-button onclick="presentMyPopover()">Open</ion-button>
</ion-content>

<!-- Our popover anchor -->
<ion-popover-controller></ion-popover-controller>
</ion-app>

</body>
</html>

Codepen

Custom elements and browser compatibility

<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

Cherry on the cake 🍒🎂

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store