mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
2 Commits
main
...
ld/icon-di
| Author | SHA1 | Date | |
|---|---|---|---|
|
7a98d0b958 | ||
|
|
9185938be1 |
@@ -48,7 +48,7 @@
|
||||
@include padding(0, 4px);
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
::slotted([slot="icon"]) {
|
||||
line-height: .67;
|
||||
|
||||
text-align: start;
|
||||
|
||||
@@ -178,7 +178,7 @@ ion-ripple-effect {
|
||||
// Back Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-icon {
|
||||
::slotted([slot="icon"]) {
|
||||
@include padding(var(--icon-padding-top), var(--icon-padding-end), var(--icon-padding-bottom), var(--icon-padding-start));
|
||||
@include margin(var(--icon-margin-top), var(--icon-margin-end), var(--icon-margin-bottom), var(--icon-margin-start));
|
||||
|
||||
|
||||
@@ -156,13 +156,15 @@ export class BackButton implements ComponentInterface, ButtonInterface {
|
||||
<button type={type} disabled={disabled} class="button-native" part="native" aria-label={ariaLabel}>
|
||||
<span class="button-inner">
|
||||
{backButtonIcon && (
|
||||
<ion-icon
|
||||
part="icon"
|
||||
icon={backButtonIcon}
|
||||
aria-hidden="true"
|
||||
lazy={false}
|
||||
flip-rtl={icon === undefined}
|
||||
></ion-icon>
|
||||
<slot name="icon">
|
||||
<ion-icon
|
||||
part="icon"
|
||||
icon={backButtonIcon}
|
||||
aria-hidden="true"
|
||||
lazy={false}
|
||||
flip-rtl={icon === undefined}
|
||||
></ion-icon>
|
||||
</slot>
|
||||
)}
|
||||
{backButtonText && (
|
||||
<span part="text" aria-hidden="true" class="button-text">
|
||||
|
||||
@@ -833,7 +833,9 @@ export class Input implements ComponentInterface {
|
||||
}}
|
||||
onClick={this.clearTextInput}
|
||||
>
|
||||
<ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
|
||||
<slot name="clear-input-icon">
|
||||
<ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
|
||||
</slot>
|
||||
</button>
|
||||
)}
|
||||
<slot name="end"></slot>
|
||||
|
||||
@@ -12,6 +12,11 @@
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<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,15 +45,116 @@
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Input - Basic</ion-title>
|
||||
<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>Phosphor</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<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>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>Default</h2>
|
||||
<ion-input value="hi@ionic.io" label="Email"></ion-input>
|
||||
<h2>Input / Clear Input</h2>
|
||||
<ion-input value="hi@ionic.io" label="Email" clear-input="true"></ion-input>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<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>
|
||||
</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">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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1087,7 +1087,11 @@ Developers can use the "legacy" property to continue using the legacy form marku
|
||||
icon = toggleIcon ?? defaultIcon;
|
||||
}
|
||||
|
||||
return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
|
||||
return (
|
||||
<slot name={isExpanded ? 'expanded-icon' : 'toggle-icon'}>
|
||||
<ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>
|
||||
</slot>
|
||||
)
|
||||
}
|
||||
|
||||
private get ariaLabel() {
|
||||
|
||||
@@ -136,7 +136,8 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
.toast-icon,
|
||||
::slotted([slot="icon"]) {
|
||||
@include margin(null, null, null, 16px);
|
||||
}
|
||||
|
||||
|
||||
@@ -727,9 +727,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
||||
<div class="toast-container" part="container">
|
||||
{this.renderButtons(startButtons, 'start')}
|
||||
|
||||
{this.icon !== undefined && (
|
||||
<ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
|
||||
)}
|
||||
<slot name="icon">
|
||||
{this.icon !== undefined && (
|
||||
<ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
|
||||
)}
|
||||
</slot>
|
||||
|
||||
{/*
|
||||
This creates a live region where screen readers
|
||||
|
||||
Reference in New Issue
Block a user