Докато подготвях последната си беседа за уеб компоненти и Ionic v4, забелязах, че не използвам нищо от тях, за да създам слайдовете си 🤔 Ето защо публикувах тази седмица DeckDeckGo, новия инструмент за създаване на лека презентация с помощта на HTML и йонни компоненти 🚀
За да продължа това, което научих, докато приключвах този нов домашен проект, реших, че може би ще е интересно да напиша кратка статия за това как да използвам Ionic без рамка или с рамка, както предпочитате😉
Импортиране на 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
Малко по-сложна употреба
Предишният пример е наистина ясен, но какво ще кажете за по-„сложни“ компоненти, като създаване и използване на модални или изскачащи елементи?
Модали
За да бъда честен, описанието как да се внедри модал би било просто откъсване от документацията. Ето защо, ако искате да внедрите йонен модал в проект без или с рамка, просто посетете модалната документация, отидете на глава „Използване“, превключете на „Javascript“ примера, копирайте/поставете кода във вашия проект и готово, то просто ще работи от кутията 😜
Попови
Намерих внедряването на popover за малко по-трудно (за някои разширения все още е супер лесно 😆). Сега ще се опитаме да преместим бутона от предишния пример, който задейства предупреждението, от главната страница към изскачащ прозорец.
Първо, за да внедрим такъв компонент, трябва да добавим new<ion-popover-controller/> елемент към нашата HTML страница. Аз лично разбирам това като котва за елемента, който предстои да добавим, което между другото ще стане. да се добавят към DOM само след извикване, а не преди това.
Втората стъпка е да създадем персонализиран елемент, който ще отговаря за анализирането на съдържанието на нашия popover.
И накрая, както бихме направили в класическо приложение на 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. За да преодолеем този проблем, бихме могли да добавим „потребителски елементи Polyfill“ в заглавката на нашата HTML страница:
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
Черешката на тортата 🍒🎂
Както казах във въведението си, публикувах новия си домашен любимец проект DeckDeckGo , където използвах тези компоненти, тази седмица. Но това, което не споменах досега, е, че този проект е безплатен и с отворен код 🚀 Следователно можете да намерите практическа реализация на всичко, което се опитах да покажа по-горе в моето репо на DeckDeckGo: https://github.com/fluster /deckdeckgo
До безкрайност и отвъд 🚀
Дейвид
