mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
refactor(ionicons): update to ionicons v5 (#19670)
* refactor(ionicons): update to ionicons v5 * refactor(back-button): update back button icon to v5 ionicons * refactor(item): update default detail icon to chevron-forward * refactor(reorder): update reorder icon for ionicons v5 * refactor(searchbar): use search-sharp * refactor(searchIcon): update v5 ionicon * refactor(clearIcon): update searchbar clear icon * refactor(cancelButton): update to arrow-back-sharp * refactor(menuIcon): update to v5 ionicons * api readme updates * update react and vue ionicons * add ionicons to react deps * add ionicons to ionic/vue deps * add icon to react test * updates * fix back button regression for no icon * update tests * fix more tests * fix more icons * update ionicons version * fix circle icons * add correct ellipsis
This commit is contained in:
Adam Bradley
committed by
Liam DeBeasi
Liam DeBeasi
parent
5bbb95fae1
commit
69e10de718
@ -465,7 +465,7 @@ ion-item,shadow
|
||||
ion-item,prop,button,boolean,false,false,false
|
||||
ion-item,prop,color,string | undefined,undefined,false,false
|
||||
ion-item,prop,detail,boolean | undefined,undefined,false,false
|
||||
ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false
|
||||
ion-item,prop,detailIcon,string,'chevron-forward',false,false
|
||||
ion-item,prop,disabled,boolean,false,false,false
|
||||
ion-item,prop,download,string | undefined,undefined,false,false
|
||||
ion-item,prop,href,string | undefined,undefined,false,false
|
||||
@ -947,7 +947,7 @@ ion-searchbar,scoped
|
||||
ion-searchbar,prop,animated,boolean,false,false,false
|
||||
ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'arrow-back-sharp') as string,false,false
|
||||
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
|
||||
ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
|
||||
ion-searchbar,prop,color,string | undefined,undefined,false,false
|
||||
@ -956,7 +956,7 @@ ion-searchbar,prop,disabled,boolean,false,false,false
|
||||
ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false
|
||||
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-searchbar,prop,placeholder,string,'Search',false,false
|
||||
ion-searchbar,prop,searchIcon,string,'search',false,false
|
||||
ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
|
||||
ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
|
||||
ion-searchbar,prop,spellcheck,boolean,false,false,false
|
||||
ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"ionicons": "^4.6.3",
|
||||
"ionicons": "^5.0.0-12",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
14
core/src/components.d.ts
vendored
14
core/src/components.d.ts
vendored
@ -2141,7 +2141,7 @@ export namespace Components {
|
||||
*/
|
||||
'autocorrect': 'on' | 'off';
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
|
||||
*/
|
||||
'cancelButtonIcon': string;
|
||||
/**
|
||||
@ -2149,7 +2149,7 @@ export namespace Components {
|
||||
*/
|
||||
'cancelButtonText': string;
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
*/
|
||||
'clearIcon'?: string;
|
||||
/**
|
||||
@ -2181,9 +2181,9 @@ export namespace Components {
|
||||
*/
|
||||
'placeholder': string;
|
||||
/**
|
||||
* The icon to use as the search icon.
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
|
||||
*/
|
||||
'searchIcon': string;
|
||||
'searchIcon'?: string;
|
||||
/**
|
||||
* Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.
|
||||
*/
|
||||
@ -5370,7 +5370,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'autocorrect'?: 'on' | 'off';
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
|
||||
*/
|
||||
'cancelButtonIcon'?: string;
|
||||
/**
|
||||
@ -5378,7 +5378,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'cancelButtonText'?: string;
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
*/
|
||||
'clearIcon'?: string;
|
||||
/**
|
||||
@ -5430,7 +5430,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'placeholder'?: string;
|
||||
/**
|
||||
* The icon to use as the search icon.
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
|
||||
*/
|
||||
'searchIcon'?: string;
|
||||
/**
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
icon: 'chevron-forward-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
@ -221,7 +221,7 @@
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
icon: 'chevron-forward-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
icon: 'chevron-forward-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
@ -98,7 +98,7 @@
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
icon: 'chevron-forward-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
}
|
||||
}, {
|
||||
text: 'Play (open modal)',
|
||||
icon: 'arrow-dropright-circle',
|
||||
icon: 'chevron-forward-circle',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
|
||||
})
|
||||
export class BackButton implements ComponentInterface, ButtonInterface {
|
||||
|
||||
private mode = getIonMode(this);
|
||||
mode = getIonMode(this);
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
/**
|
||||
@ -54,20 +54,32 @@ export class BackButton implements ComponentInterface, ButtonInterface {
|
||||
*/
|
||||
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
|
||||
|
||||
private get backButtonIcon() {
|
||||
return this.icon != null ? this.icon : config.get('backButtonIcon', 'arrow-back');
|
||||
get backButtonIcon() {
|
||||
const icon = this.icon;
|
||||
if (icon != null) {
|
||||
// icon is set on the component or by the config
|
||||
return icon;
|
||||
}
|
||||
|
||||
if (this.mode === 'ios') {
|
||||
// default ios back button icon
|
||||
return config.get('backButtonIcon', 'chevron-back');
|
||||
}
|
||||
|
||||
// default md back button icon
|
||||
return config.get('backButtonIcon', 'arrow-back-sharp');
|
||||
}
|
||||
|
||||
private get backButtonText() {
|
||||
get backButtonText() {
|
||||
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
|
||||
return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
|
||||
}
|
||||
|
||||
private get hasIconOnly() {
|
||||
get hasIconOnly() {
|
||||
return this.backButtonIcon && !this.backButtonText;
|
||||
}
|
||||
|
||||
private get rippleType() {
|
||||
get rippleType() {
|
||||
// If the button only has an icon we use the unbounded
|
||||
// "circular" ripple effect
|
||||
if (this.hasIconOnly) {
|
||||
|
||||
59
core/src/components/back-button/test/back-button.spec.ts
Normal file
59
core/src/components/back-button/test/back-button.spec.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { BackButton } from "../back-button";
|
||||
import { config } from "../../../global/config";
|
||||
|
||||
|
||||
describe('back button', () => {
|
||||
let bb: BackButton;
|
||||
|
||||
beforeEach(() => {
|
||||
config.reset({});
|
||||
bb = new BackButton();
|
||||
});
|
||||
|
||||
describe('backButtonIcon', () => {
|
||||
|
||||
it('set custom icon on the instance, override config', () => {
|
||||
bb.icon = 'custom-icon-instance';
|
||||
config.reset({
|
||||
backButtonIcon: 'custom-icon-config'
|
||||
});
|
||||
expect(bb.backButtonIcon).toBe('custom-icon-instance');
|
||||
});
|
||||
|
||||
it('set custom icon in the config', () => {
|
||||
config.reset({
|
||||
backButtonIcon: 'custom-icon-config'
|
||||
});
|
||||
expect(bb.backButtonIcon).toBe('custom-icon-config');
|
||||
});
|
||||
|
||||
it('set custom icon on the instance', () => {
|
||||
bb.icon = 'custom-icon-instance';
|
||||
expect(bb.backButtonIcon).toBe('custom-icon-instance');
|
||||
});
|
||||
|
||||
it('default icon for ios mode', () => {
|
||||
bb.mode = 'ios';
|
||||
expect(bb.backButtonIcon).toBe('chevron-back');
|
||||
});
|
||||
|
||||
it('default icon', () => {
|
||||
expect(bb.backButtonIcon).toBe('arrow-back-sharp');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('backButtonText', () => {
|
||||
|
||||
it('default text for ios mode', () => {
|
||||
bb.mode = 'ios';
|
||||
expect(bb.backButtonText).toBe('Back');
|
||||
});
|
||||
|
||||
it('default text', () => {
|
||||
expect(bb.backButtonText).toBe(null);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@ -32,7 +32,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -83,7 +83,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -100,7 +100,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -117,10 +117,10 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon name="contact" slot="start"></ion-icon>
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
@ -136,10 +136,10 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon name="contact" slot="start"></ion-icon>
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
@ -155,7 +155,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
@ -164,7 +164,7 @@
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
@ -173,7 +173,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
@ -182,7 +182,7 @@
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
@ -191,7 +191,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon name="contact" slot="start"></ion-icon>
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled>
|
||||
<ion-icon name="arrow-dropleft"></ion-icon>
|
||||
<ion-icon name="arrow-back-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab2')">
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft">
|
||||
<ion-icon name="arrow-dropright"></ion-icon>
|
||||
<ion-icon name="arrow-forward-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab3')">
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft">
|
||||
<ion-icon name="arrow-dropup"></ion-icon>
|
||||
<ion-icon name="arrow-up-circle"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab4')">
|
||||
@ -110,7 +110,7 @@
|
||||
|
||||
<ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter">
|
||||
<ion-icon name="md-share"></ion-icon>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary">
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-back-circle"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
@ -58,7 +58,7 @@
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-forward-circle"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
@ -68,7 +68,7 @@
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-up-circle"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
@ -78,7 +78,7 @@
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="share"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
|
||||
@ -4,9 +4,15 @@
|
||||
|
||||
Icons can be used on their own as a standalone component, or inside of another component.
|
||||
|
||||
Ionicons provide platform continuity out of the box in Ionic by rendering a different icon based on the device the app is running on. For example, by setting the icon `name` to `alarm` the icon will automatically use the `ios-alarm` on an iOS device, and the `md-alarm` for any device running Material Design. This allows the developer to write the markup once while Ionic handles displaying the appropriate icon based on the mode.
|
||||
By default, Ionicons will use the same icon for each platform (iOS or Material Design). In previous versions of Ionicons, icons would automatically update based on the platform. As of Ionicons 5.0, apps will have to handle this on a per-icon basis, if needed.
|
||||
|
||||
For a full list of available icons and more usage explanations, check out the [Ionicons documentation](https://ionicons.com/).
|
||||
To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it'll show the `logo-apple` icon. When using `md`, it'll show the `logo-android` icon.
|
||||
|
||||
```
|
||||
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
|
||||
```
|
||||
|
||||
For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/).
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -50,55 +50,19 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="md-home" slot="start"></ion-icon>
|
||||
<ion-icon name="STAR" slot="end"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="md-home"
|
||||
name="STAR"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="ios-home" slot="start"></ion-icon>
|
||||
<ion-icon icon="home" color="primary" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="ios-home"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="ios-home" slot="end"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="ios-home"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="ios-star-outline" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="ios-star-outline"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="IOS-STAR-OUTLINE"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
name="md-home"
|
||||
icon="home"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
@ -130,24 +94,6 @@
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
ios="ios-color-filter" md="md-color-filter"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
<code>
|
||||
ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
|
||||
</code>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
|
||||
@ -51,25 +51,17 @@
|
||||
<ion-grid>
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col size="auto"><code>null</code></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropright"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropright-circle"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-round-forward"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropleft"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropleft-circle"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-forward-circle"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-round-back"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-back-circle"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col size="auto"><code>false</code></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropright" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropright-circle" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-round-forward" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropleft" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropleft-circle" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-forward-circle" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-round-back" flip-rtl="false"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-back-circle" flip-rtl="false"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
|
||||
@ -56,30 +56,16 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="md-home" is-active="true" slot="start"></ion-icon>
|
||||
<ion-icon name="home" is-active="true" slot="start"></ion-icon>
|
||||
<code>
|
||||
name="md-home" is-active="true"
|
||||
name="home" is-active="true"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="ios-home" is-active="true" slot="start"></ion-icon>
|
||||
<ion-icon name="home" color="primary" slot="start"></ion-icon>
|
||||
<code>
|
||||
name="ios-home" is-active="true"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="ios-home" slot="start"></ion-icon>
|
||||
<code>
|
||||
name="ios-home"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
|
||||
<code>
|
||||
name="md-home"
|
||||
name="home"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
@ -96,18 +82,11 @@
|
||||
ios="logo-apple" md="logo-android"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
|
||||
<ion-item>
|
||||
<ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon>
|
||||
<ion-icon ios="logo-apple" md="logo-android" slot="start" id-active="false"></ion-icon>
|
||||
<code>
|
||||
ios="md-color-filter" md="ios-color-filter"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon>
|
||||
<code>
|
||||
ios="md-color-filter" md="ios-color-filter" is-active="false"
|
||||
ios="logo-apple" md="logo-android" is-active="false"
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
|
||||
@ -20,12 +20,12 @@
|
||||
<ion-icon name="happy" color="warning"></ion-icon>
|
||||
<ion-icon name="people"></ion-icon>
|
||||
<ion-icon name="person" color="tertiary"></ion-icon>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
<ion-icon name="person-circle"></ion-icon>
|
||||
|
||||
<ion-icon name="apps"></ion-icon>
|
||||
<ion-icon name="lock"></ion-icon>
|
||||
<ion-icon name="lock-closed"></ion-icon>
|
||||
<ion-icon name="key" color="success"></ion-icon>
|
||||
<ion-icon name="unlock"></ion-icon>
|
||||
<ion-icon name="lock-open"></ion-icon>
|
||||
|
||||
<ion-icon name="map" color="secondary"></ion-icon>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
@ -35,7 +35,6 @@
|
||||
<ion-icon name="mic"></ion-icon>
|
||||
<ion-icon name="musical-notes" color="warning"></ion-icon>
|
||||
<ion-icon name="volume-high"></ion-icon>
|
||||
<ion-icon name="microphone" color="tertiary"></ion-icon>
|
||||
|
||||
<ion-icon name="cafe" color="success"></ion-icon>
|
||||
<ion-icon name="calculator"></ion-icon>
|
||||
@ -47,9 +46,9 @@
|
||||
<ion-icon name="star" color="success"></ion-icon>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
|
||||
<ion-icon name="arrow-dropup-circle" color="warning"></ion-icon>
|
||||
<ion-icon name="arrow-up-circle" color="warning"></ion-icon>
|
||||
<ion-icon name="arrow-back"></ion-icon>
|
||||
<ion-icon name="arrow-dropdown"></ion-icon>
|
||||
<ion-icon name="arrow-down-circle"></ion-icon>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
|
||||
<ion-icon name="cloud"></ion-icon>
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon slot="start" name="more"></ion-icon>
|
||||
<ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
More
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary">
|
||||
@ -105,7 +105,7 @@
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon slot="end" name="more"></ion-icon>
|
||||
<ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
More
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary">
|
||||
@ -124,7 +124,7 @@
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon slot="top" name="more"></ion-icon>
|
||||
<ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
More
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary">
|
||||
@ -143,7 +143,7 @@
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon slot="bottom" name="more"></ion-icon>
|
||||
<ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
More
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary">
|
||||
|
||||
@ -49,7 +49,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
|
||||
/**
|
||||
* The icon to use when `detail` is set to `true`.
|
||||
*/
|
||||
@Prop() detailIcon = 'ios-arrow-forward';
|
||||
@Prop() detailIcon = 'chevron-forward';
|
||||
|
||||
/**
|
||||
* If `true`, the user cannot interact with the item.
|
||||
|
||||
@ -1364,21 +1364,21 @@ Item Inputs
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- |
|
||||
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
|
||||
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
|
||||
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
|
||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||
| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
|
||||
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------- |
|
||||
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
|
||||
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'chevron-forward'` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
|
||||
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
|
||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||
| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
|
||||
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
|
||||
|
||||
## Slots
|
||||
|
||||
@ -64,7 +64,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
|
||||
render() {
|
||||
const { color, disabled } = this;
|
||||
const mode = getIonMode(this);
|
||||
const menuIcon = config.get('menuIcon', 'menu');
|
||||
const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');
|
||||
const hidden = this.autoHide && !this.visible;
|
||||
|
||||
const attrs = {
|
||||
|
||||
@ -19,10 +19,12 @@ export class Reorder implements ComponentInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const mode = getIonMode(this);
|
||||
const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp';
|
||||
return (
|
||||
<Host class={getIonMode(this)}>
|
||||
<Host class={mode}>
|
||||
<slot>
|
||||
<ion-icon name="reorder" lazy={false} class="reorder-icon" />
|
||||
<ion-icon name={reorderIcon} lazy={false} class="reorder-icon" />
|
||||
</slot>
|
||||
</Host>
|
||||
);
|
||||
|
||||
@ -219,25 +219,25 @@ export const SearchbarExample: React.FC = () => (
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------- |
|
||||
| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
|
||||
| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
|
||||
| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
|
||||
| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `config.get('backButtonIcon', 'md-arrow-back') as string` |
|
||||
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
|
||||
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
|
||||
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
|
||||
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` |
|
||||
| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
|
||||
| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
|
||||
| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
|
||||
| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
|
||||
| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
|
||||
| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
|
||||
| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`. | `string` | `config.get('backButtonIcon', 'arrow-back-sharp') as string` |
|
||||
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
|
||||
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. | `string \| undefined` | `undefined` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
|
||||
| `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode. | `string \| undefined` | `undefined` |
|
||||
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` |
|
||||
| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
|
||||
| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
|
||||
| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@ -53,8 +53,9 @@ export class Searchbar implements ComponentInterface {
|
||||
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode.
|
||||
* Defaults to `"arrow-back-sharp"`.
|
||||
*/
|
||||
@Prop() cancelButtonIcon = config.get('backButtonIcon', 'md-arrow-back') as string;
|
||||
@Prop() cancelButtonIcon = config.get('backButtonIcon', 'arrow-back-sharp') as string;
|
||||
|
||||
/**
|
||||
* Set the the cancel button text. Only applies to `ios` mode.
|
||||
@ -62,7 +63,7 @@ export class Searchbar implements ComponentInterface {
|
||||
@Prop() cancelButtonText = 'Cancel';
|
||||
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
*/
|
||||
@Prop() clearIcon?: string;
|
||||
|
||||
@ -100,9 +101,10 @@ export class Searchbar implements ComponentInterface {
|
||||
@Prop() placeholder = 'Search';
|
||||
|
||||
/**
|
||||
* The icon to use as the search icon.
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in
|
||||
* `ios` mode and `"search-sharp"` in `md` mode.
|
||||
*/
|
||||
@Prop() searchIcon = 'search';
|
||||
@Prop() searchIcon?: string;
|
||||
|
||||
/**
|
||||
* Sets the behavior for the cancel button. Defaults to `"never"`.
|
||||
@ -412,8 +414,8 @@ export class Searchbar implements ComponentInterface {
|
||||
render() {
|
||||
const animated = this.animated && config.getBoolean('animated', true);
|
||||
const mode = getIonMode(this);
|
||||
const clearIcon = this.clearIcon || (mode === 'ios' ? 'ios-close-circle' : 'md-close');
|
||||
const searchIcon = this.searchIcon;
|
||||
const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
|
||||
const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
|
||||
|
||||
const cancelButton = (this.showCancelButton !== 'never') && (
|
||||
<button
|
||||
|
||||
@ -18,12 +18,12 @@
|
||||
<ion-tab-bar selected-tab="1">
|
||||
|
||||
<ion-tab-button tab="1" disabled>
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<!-- Custom Class -->
|
||||
<ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
|
||||
<ion-tab-button tab="11">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
<!-- Color & Custom Class -->
|
||||
<ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
|
||||
<ion-tab-button tab="111">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
<!-- Custom Background Buttons -->
|
||||
<ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
|
||||
<ion-tab-button tab="1111" class="custom-tab-button-background-red">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
<!-- Custom Color Buttons -->
|
||||
<ion-tab-bar selected-tab="1111">
|
||||
<ion-tab-button tab="1111" class="custom-tab-button-color-red">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
<!-- Custom All -->
|
||||
<ion-tab-bar selected-tab="11111" class="custom-all">
|
||||
<ion-tab-button tab="11111">
|
||||
<ion-icon name="clock"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
@ -154,7 +154,7 @@
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="label-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" class="main-tab">
|
||||
@ -208,7 +208,7 @@
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar-color">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
|
||||
<ion-label>Tab Four</ion-label>
|
||||
<ion-icon name="chatboxes"></ion-icon>
|
||||
<ion-icon name="chatbox"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -42,7 +42,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -59,7 +59,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
@ -76,10 +76,10 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
@ -95,10 +95,10 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button href="#" fill="solid" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
@ -114,7 +114,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
@ -123,7 +123,7 @@
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
@ -132,7 +132,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
@ -141,7 +141,7 @@
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
@ -150,7 +150,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@ionic/core": "5.0.0-beta.0",
|
||||
"ionicons": "^5.0.0-11",
|
||||
"tslib": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
import { defineCustomElements } from '@ionic/core/loader';
|
||||
import { addIcons } from 'ionicons';
|
||||
import { arrowBack, arrowDown, arrowForward, close, closeCircle, menu, reorder, search } from 'ionicons/icons';
|
||||
import { arrowBackSharp, chevronBack, chevronForward, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
|
||||
export { AlertButton, AlertInput, setupConfig } from '@ionic/core';
|
||||
export * from './proxies';
|
||||
|
||||
@ -29,22 +29,17 @@ export { RouterDirection } from './hrefprops';
|
||||
|
||||
// Icons that are used by internal components
|
||||
addIcons({
|
||||
'ios-close': close.ios,
|
||||
'md-close': close.md,
|
||||
'ios-reorder': reorder.ios,
|
||||
'md-reorder': reorder.md,
|
||||
'ios-menu': menu.ios,
|
||||
'md-menu': menu.md,
|
||||
'ios-arrow-forward': arrowForward.ios,
|
||||
'md-arrow-forward': arrowForward.md,
|
||||
'ios-arrow-back': arrowBack.ios,
|
||||
'md-arrow-back': arrowBack.md,
|
||||
'ios-arrow-down': arrowDown.ios,
|
||||
'md-arrow-down': arrowDown.md,
|
||||
'ios-search': search.ios,
|
||||
'md-search': search.md,
|
||||
'ios-close-circle': closeCircle.ios,
|
||||
'md-close-circle': closeCircle.md,
|
||||
'arrow-back-sharp': arrowBackSharp,
|
||||
'chevron-back': chevronBack,
|
||||
'chevron-forward': chevronForward,
|
||||
'close-circle': closeCircle,
|
||||
'close-sharp': closeSharp,
|
||||
'menu-outline': menuOutline,
|
||||
'menu-sharp': menuSharp,
|
||||
'reorder-two-sharp': reorderTwoSharp,
|
||||
'reorder-three-outline': reorderThreeOutline,
|
||||
'search-outline': searchOutline,
|
||||
'search-sharp': searchSharp,
|
||||
});
|
||||
|
||||
// TODO: defineCustomElements() is asyncronous
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { IonApp, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { IonApp, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { logoIonic } from 'ionicons/icons';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
@ -12,6 +13,7 @@ const App: React.FC = () => {
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonItem button>
|
||||
<IonIcon icon={logoIonic} slot="start"></IonIcon>
|
||||
<IonLabel>
|
||||
Test something
|
||||
</IonLabel>
|
||||
|
||||
1402
vue/package-lock.json
generated
Normal file
1402
vue/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -44,6 +44,10 @@
|
||||
"lint.fix": "tslint --project . --fix",
|
||||
"test": "jest --coverage --verbose"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^4.6.0",
|
||||
"ionicons": "^5.0.0-11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rollup": "^0.62.0",
|
||||
"rollup-plugin-terser": "^1.0.1",
|
||||
@ -57,9 +61,6 @@
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^4.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
|
||||
@ -4,7 +4,7 @@ import { IonicConfig } from '@ionic/core';
|
||||
|
||||
// Webpack import for ionicons
|
||||
import { addIcons } from 'ionicons';
|
||||
import { arrowBack, arrowDown, arrowForward, close, closeCircle, menu, reorder, search } from 'ionicons/icons';
|
||||
import { arrowBackSharp, chevronBack, chevronForward, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
|
||||
|
||||
// import '@ionic/core/css/ionic.bundle.css';
|
||||
// import 'ionicons/dist/collection/icon/icon.css';
|
||||
@ -21,21 +21,16 @@ export function appInitialize(config?: IonicConfig) {
|
||||
|
||||
// Icons that are used by internal components
|
||||
addIcons({
|
||||
'ios-close': close.ios,
|
||||
'md-close': close.md,
|
||||
'ios-reorder': reorder.ios,
|
||||
'md-reorder': reorder.md,
|
||||
'ios-menu': menu.ios,
|
||||
'md-menu': menu.md,
|
||||
'ios-arrow-forward': arrowForward.ios,
|
||||
'md-arrow-forward': arrowForward.md,
|
||||
'ios-arrow-back': arrowBack.ios,
|
||||
'md-arrow-back': arrowBack.md,
|
||||
'ios-arrow-down': arrowDown.ios,
|
||||
'md-arrow-down': arrowDown.md,
|
||||
'ios-search': search.ios,
|
||||
'md-search': search.md,
|
||||
'ios-close-circle': closeCircle.ios,
|
||||
'md-close-circle': closeCircle.md,
|
||||
'arrow-back-sharp': arrowBackSharp,
|
||||
'chevron-back': chevronBack,
|
||||
'chevron-forward': chevronForward,
|
||||
'close-circle': closeCircle,
|
||||
'close-sharp': closeSharp,
|
||||
'menu-outline': menuOutline,
|
||||
'menu-sharp': menuSharp,
|
||||
'reorder-two-sharp': reorderTwoSharp,
|
||||
'reorder-three-outline': reorderThreeOutline,
|
||||
'search-outline': searchOutline,
|
||||
'search-sharp': searchSharp,
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user