javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 08:45:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

update demo

Browse Source
This commit is contained in:
Liam DeBeasi
2024-03-14 14:54:30 -04:00
parent 9185938be1
commit 7a98d0b958
1 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
core/src/components/input/test/basic/index.html
View File

@ -13,6 +13,10 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/shoelace-autoloader.js"></script>
<style>
.grid {
display: grid;
@ -40,29 +44,35 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Go Back" default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Ionic</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Go Back" default-href="/">
<i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
</ion-back-button>
</ion-buttons>
<ion-title>Input - Basic</ion-title>
<ion-title>Phosphor</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Go Back" default-href="/"></ion-back-button>
<ion-back-button text="Go Back" default-href="/">
<sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
</ion-back-button>
</ion-buttons>
<ion-title>Input - Basic</ion-title>
<ion-title>Shoelace</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<h1>Ionic</h1>
<div class="grid">
<div class="grid-item">
<h2>Input / Clear Input</h2>
<ion-input value="hi@ionic.io" label="Email" clear-input="true">
<i class="ph-fill ph-heart" slot="clear-input-icon" style="color: hotpink"></i>
</ion-input>
<ion-input value="hi@ionic.io" label="Email" clear-input="true"></ion-input>
</div>
@ -70,6 +80,32 @@
<h2>Select</h2>
<ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up"></ion-select>
</div>
<div class="grid-item">
<h2>Searchbar / Clear and Search</h2>
<ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search"></ion-searchbar>
</div>
<div class="grid-item">
<h2>Toast</h2>
<ion-button id="open-icon-prop-toast">Open Toast with Icon Prop</ion-button>
<ion-toast trigger="open-icon-prop-toast" icon="heart" duration="5000" message="Icon Property"></ion-toast>
</div>
</div>
<h1>Phosphor</h1>
<div class="grid">
<div class="grid-item">
<h2>Input / Clear Input</h2>
<ion-input value="hi@ionic.io" label="Email" clear-input="true">
<i class="ph-fill ph-heart" slot="clear-input-icon" style="color: hotpink"></i>
</ion-input>
</div>
<div class="grid-item">
<h2>Select</h2>
<ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
<i class="ph-fill ph-heart" slot="toggle-icon" style="color: red"></i>
<i class="ph-fill ph-heart" slot="expanded-icon" style="color: green"></i>
@ -79,22 +115,48 @@
<div class="grid-item">
<h2>Searchbar / Clear and Search</h2>
<ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search"></ion-searchbar>
<ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search">
<i class="ph-fill ph-trash" slot="clear-icon" style="color: red"></i>
<i class="ph-fill ph-paper-plane" slot="search-icon" style="color: red"></i>
<i class="ph-fill ph-smiley-sad" slot="cancel-icon" style="color: red"></i>
</ion-searchbar>
TODO
</div>
<div class="grid-item">
<h2>Toast</h2>
<ion-button id="open-icon-slot-toast">Open Toast with Icon Slot</ion-button>
<ion-toast trigger="open-icon-slot-toast" duration="5000" message="Icon Property">
<i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
</ion-toast>
</div>
</div>
<ion-button id="open-icon-prop-toast">Open Toast with Icon Prop</ion-button>
<ion-toast trigger="open-icon-prop-toast" icon="airplane" duration="3000" message="Icon Property"></ion-toast>
<h1>Shoelace</h1>
<div class="grid">
<div class="grid-item">
<h2>Input / Clear Input</h2>
<ion-input value="hi@ionic.io" label="Email" clear-input="true">
<sl-icon name="suit-heart-fill" slot="clear-input-icon" style="color: hotpink"></sl-icon>
</ion-input>
</div>
<ion-button id="open-icon-slot-toast">Open Toast with Icon Slot</ion-button>
<ion-toast trigger="open-icon-slot-toast" duration="0" message="Icon Property">
<i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
</ion-toast>
<div class="grid-item">
<h2>Select</h2>
<ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
<sl-icon name="suit-heart-fill" slot="toggle-icon" style="color: red"></sl-icon>
<sl-icon name="suit-heart-fill" slot="expanded-icon" style="color: green"></sl-icon>
</ion-select>
</div>
<div class="grid-item">
<h2>Searchbar / Clear and Search</h2>
TODO
</div>
<div class="grid-item">
<h2>Toast</h2>
<ion-button id="open-icon-slot-toast-sl">Open Toast with Icon Slot</ion-button>
<ion-toast trigger="open-icon-slot-toast-sl" duration="5000" message="Icon Property">
<sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
</ion-toast>
</div>
</div>
</ion-content>
</ion-app>
</body>