Готовя свой последний доклад о веб-компонентах и Ionic v4, я заметил, что не использовал ни один из них для создания слайдов 🤔 Вот почему на этой неделе я опубликовал DeckDeckGo, новый инструмент для создания легких презентаций с использованием HTML. и ионные компоненты 🚀
Чтобы развить то, что я узнал во время работы над этим новым домашним проектом, я подумал, что было бы, может быть, интересно написать краткую статью о том, как использовать Ionic без какого-либо фреймворка или с любым фреймворком, как вам больше нравится😉
Импорт ионного
Цель этой статьи - описать, как использовать Ionic в простом index.html, поэтому мы не будем полагаться на NPM, и мы собираемся импортировать Ionic из CDN, особенно из Unpkg. Для этого мы просто добавим следующие строки в <head/> вашей HTML-страницы:
<!-- 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>
Вот и все, что вам нужно для импорта Ionic в любые веб-приложения 🎉
Базовое использование
Что ж, я мог бы прекратить статью здесь, это очень просто и понятно, но я подумал, что было бы неплохо показать и несколько примеров использования. В этом первом примере я просто продемонстрирую кнопку, которая должна вызывать предупреждение.
<!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
Поскольку мы используем Ionic в index.html без какой-либо структуры, это дает возможность действительно легко создавать примеры Codepen. Вы можете проверить именно этот по следующему адресу: https://codepen.io/peterpeterparker/pen/YJLvQq
Немного более сложное использование
Предыдущий пример действительно прост, но как насчет более «сложных» компонентов, таких как создание и использование модальных окон или всплывающих окон?
Модальные окна
Честно говоря, описание того, как реализовать модальное окно, было бы просто копией документации. Поэтому, если вы хотите реализовать Ionic-модальное окно в проекте без или с фреймворками, просто посетите модальную документацию, перейдите к главе Использование, переключитесь на Javascript в примере, скопируйте / вставьте код в свой проект и вуаля, он просто будет работать из коробки 😜
Поповерс
Я обнаружил, что реализация всплывающего окна немного сложнее (в некоторых случаях это все еще очень просто 😆). Теперь мы попытаемся переместить кнопку из предыдущего примера, которая запускает предупреждение, с главной страницы во всплывающее окно.
Прежде всего, чтобы реализовать такой компонент, мы должны добавить элемент new<ion-popover-controller/> на нашу HTML-страницу. Я лично понимаю это как привязку к элементу, который мы собираемся добавить, что, кстати, и будет. добавляется в DOM только после того, как вызывается, а не раньше.
Второй шаг - создать настраиваемый элемент, который будет отвечать за анализ содержимого нашего всплывающего окна.
Наконец, как и в классическом приложении Ionic Angular, мы будем использовать PopoverController для его создания и представления.
Сложенная вместе страница index.html теперь будет выглядеть следующим образом:
<!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
Вы можете проверить второй пример по следующему адресу: https://codepen.io/peterpeterparker/pen/JmvZLo
Пользовательские элементы и совместимость с браузером
Пользовательские элементы теперь изначально поддерживаются Chrome и Safari, но пока не поддерживаются по умолчанию в Firefox ‹v63. Чтобы решить эту проблему, мы могли бы добавить полифил пользовательских элементов в заголовок нашей HTML-страницы:
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
Вишня на торте 🍒🎂
Как я уже сказал во введении, на этой неделе я опубликовал свой новый проект DeckDeckGo, в котором я использовал эти компоненты. Но то, что я пока не упомянул, это то, что этот проект бесплатный и с открытым исходным кодом 🚀 Таким образом, вы можете найти практическую реализацию всего, что я пытался отобразить выше, в моем репозитории DeckDeckGo: https://github.com/fluster / deckdeckgo
До бесконечности и дальше 🚀
Дэйвид
