1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[591],{5591:function(o,n,i){i.r(n),n.default='<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <meta name="color-scheme" content="light dark"/> <title>Modal</title> <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/> <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"/> <style>:root{--ion-safe-area-top:20px;--ion-safe-area-bottom:22px}</style> <script type="module">import{modalController}from"https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/index.esm.js";window.modalController=modalController</script> <script>window.Ionic={config:{mode:"md"}}</script> <style>.background{height:100vh;width:100vw;background-image:url("/img/components/framework-demo/modal-background-light.png");background-size:contain}body.dark .background{height:100vh;width:100vw;background-image:url("/img/components/framework-demo/modal-background-dark.png")}body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body.dark{--ion-color-primary:#428cff;--ion-color-primary-rgb:66,140,255;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3a7be0;--ion-color-primary-tint:#5598ff;--ion-color-secondary:#50c8ff;--ion-color-secondary-rgb:80,200,255;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255,255,255;--ion-color-secondary-shade:#46b0e0;--ion-color-secondary-tint:#62ceff;--ion-color-tertiary:#6a64ff;--ion-color-tertiary-rgb:106,100,255;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255,255,255;--ion-color-tertiary-shade:#5d58e0;--ion-color-tertiary-tint:#7974ff;--ion-color-success:#2fdf75;--ion-color-success-rgb:47,223,117;--ion-color-success-contrast:#000000;--ion-color-success-contrast-rgb:0,0,0;--ion-color-success-shade:#29c467;--ion-color-success-tint:#44e283;--ion-color-warning:#ffd534;--ion-color-warning-rgb:255,213,52;--ion-color-warning-contrast:#000000;--ion-color-warning-contrast-rgb:0,0,0;--ion-color-warning-shade:#e0bb2e;--ion-color-warning-tint:#ffd948;--ion-color-danger:#ff4961;--ion-color-danger-rgb:255,73,97;--ion-color-danger-contrast:#ffffff;--ion-color-danger-contrast-rgb:255,255,255;--ion-color-danger-shade:#e04055;--ion-color-danger-tint:#ff5b71;--ion-color-dark:#f4f5f8;--ion-color-dark-rgb:244,245,248;--ion-color-dark-contrast:#000000;--ion-color-dark-contrast-rgb:0,0,0;--ion-color-dark-shade:#d7d8da;--ion-color-dark-tint:#f5f6f9;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152,154,162;--ion-color-medium-contrast:#000000;--ion-color-medium-contrast-rgb:0,0,0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-light:#222428;--ion-color-light-rgb:34,36,40;--ion-color-light-contrast:#ffffff;--ion-color-light-contrast-rgb:255,255,255;--ion-color-light-shade:#1e2023;--ion-color-light-tint:#383a3e}.md body.dark{--ion-background-color:#121212;--ion-background-color-rgb:18,18,18;--ion-text-color:#ffffff;--ion-text-color-rgb:255,255,255;--ion-border-color:#222222;--ion-color-step-50:#1e1e1e;--ion-color-step-100:#2a2a2a;--ion-color-step-150:#363636;--ion-color-step-200:#414141;--ion-color-step-250:#4d4d4d;--ion-color-step-300:#595959;--ion-color-step-350:#656565;--ion-color-step-400:#717171;--ion-color-step-450:#7d7d7d;--ion-color-step-500:#898989;--ion-color-step-550:#949494;--ion-color-step-600:#a0a0a0;--ion-color-step-650:#acacac;--ion-color-step-700:#b8b8b8;--ion-color-step-750:#c4c4c4;--ion-color-step-800:#d0d0d0;--ion-color-step-850:#dbdbdb;--ion-color-step-900:#e7e7e7;--ion-color-step-950:#f3f3f3;--ion-item-background:#1e1e1e;--ion-toolbar-background:#1f1f1f;--ion-tab-bar-background:#1f1f1f;--ion-card-background:#1e1e1e}</style> </head> <body> <ion-app> <div class="ion-page"> <ion-content fullscreen> <div class="background" onClick="openSheetModal()"/> <ion-modal> <ion-header translucent> <ion-toolbar> <ion-title>Modal Sheet</ion-title> </ion-toolbar> </ion-header> <ion-content fullscreen> <ion-list> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-home.png"/> </ion-avatar> <ion-label> <h2>Home</h2> <p>Directions from my location</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-work.png"/> </ion-avatar> <ion-label> <h2>Work</h2> <p>20 min drive away</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-school.png"/> </ion-avatar> <ion-label> <h2>School</h2> <p>Too far away to arrive on time</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-fast-food.png"/> </ion-avatar> <ion-label> <h2>Fast Food</h2> <p>You probably shouldnât</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-gas-stations.png"/> </ion-avatar> <ion-label> <h2>Gas Stations</h2> <p>Fill up at a location nearby</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-movies.png"/> </ion-avatar> <ion-label> <h2>Movies</h2> <p>Find a theatre and kick back</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-hotels.png"/> </ion-avatar> <ion-label> <h2>Hotels</h2> <p>Find a place to stay</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <ion-img src="/img/components/framework-demo/modal-home.png"/> </ion-avatar> <ion-label> <h2>Library</h2> <p>Read a book for goodness sake</p> </ion-label> </ion-item> </ion-list> </ion-content> </ion-modal> </ion-content> </div> </ion-app> <script>const modal=document.querySelector("ion-modal");function openSheetModal(){modal.present()}
1modal.isOpen=!0,modal.breakpoints=[0,.3,1],modal.initialBreakpoint=.3,modal.swipeToClose=!1</script> </body> </html> '}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.