mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
perf(various): don't use lazy-loaded icon names in components (#24671)
This commit is contained in:
Amanda Smith
@ -3,7 +3,7 @@ ion-accordion,shadow
|
||||
ion-accordion,prop,disabled,boolean,false,false,false
|
||||
ion-accordion,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-accordion,prop,readonly,boolean,false,false,false
|
||||
ion-accordion,prop,toggleIcon,string,'chevron-down',false,false
|
||||
ion-accordion,prop,toggleIcon,string,chevronDown,false,false
|
||||
ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false
|
||||
ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false
|
||||
ion-accordion,part,content
|
||||
@ -416,7 +416,7 @@ ion-fab,method,close,close() => Promise<void>
|
||||
|
||||
ion-fab-button,shadow
|
||||
ion-fab-button,prop,activated,boolean,false,false,false
|
||||
ion-fab-button,prop,closeIcon,string,'close',false,false
|
||||
ion-fab-button,prop,closeIcon,string,close,false,false
|
||||
ion-fab-button,prop,color,string | undefined,undefined,false,true
|
||||
ion-fab-button,prop,disabled,boolean,false,false,false
|
||||
ion-fab-button,prop,download,string | undefined,undefined,false,false
|
||||
@ -557,7 +557,7 @@ ion-item,prop,button,boolean,false,false,false
|
||||
ion-item,prop,color,string | undefined,undefined,false,true
|
||||
ion-item,prop,counter,boolean,false,false,false
|
||||
ion-item,prop,detail,boolean | undefined,undefined,false,false
|
||||
ion-item,prop,detailIcon,string,'chevron-forward',false,false
|
||||
ion-item,prop,detailIcon,string,chevronForward,false,false
|
||||
ion-item,prop,disabled,boolean,false,false,false
|
||||
ion-item,prop,download,string | undefined,undefined,false,false
|
||||
ion-item,prop,fill,"outline" | "solid" | undefined,undefined,false,false
|
||||
@ -1070,7 +1070,7 @@ ion-searchbar,scoped
|
||||
ion-searchbar,prop,animated,boolean,false,false,false
|
||||
ion-searchbar,prop,autocomplete,"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'arrow-back-sharp') as string,false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) 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,true
|
||||
|
||||
12
core/src/components.d.ts
vendored
12
core/src/components.d.ts
vendored
@ -2272,7 +2272,7 @@ export namespace Components {
|
||||
*/
|
||||
"autocorrect": 'on' | 'off';
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
|
||||
*/
|
||||
"cancelButtonIcon": string;
|
||||
/**
|
||||
@ -2280,7 +2280,7 @@ export namespace Components {
|
||||
*/
|
||||
"cancelButtonText": string;
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
* Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
|
||||
*/
|
||||
"clearIcon"?: string;
|
||||
/**
|
||||
@ -2316,7 +2316,7 @@ export namespace Components {
|
||||
*/
|
||||
"placeholder": string;
|
||||
/**
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
|
||||
* The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
|
||||
*/
|
||||
"searchIcon"?: string;
|
||||
/**
|
||||
@ -5943,7 +5943,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"autocorrect"?: 'on' | 'off';
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
|
||||
* Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
|
||||
*/
|
||||
"cancelButtonIcon"?: string;
|
||||
/**
|
||||
@ -5951,7 +5951,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"cancelButtonText"?: string;
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
* Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
|
||||
*/
|
||||
"clearIcon"?: string;
|
||||
/**
|
||||
@ -6011,7 +6011,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"placeholder"?: string;
|
||||
/**
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
|
||||
* The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
|
||||
*/
|
||||
"searchIcon"?: string;
|
||||
/**
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core';
|
||||
import { chevronDown } from 'ionicons/icons';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
@ -71,7 +72,7 @@ export class Accordion implements ComponentInterface {
|
||||
* rotated when the accordion is expanded
|
||||
* or collapsed.
|
||||
*/
|
||||
@Prop() toggleIcon = 'chevron-down';
|
||||
@Prop() toggleIcon = chevronDown;
|
||||
|
||||
/**
|
||||
* The slot inside of `ion-item` to
|
||||
|
||||
@ -1626,7 +1626,7 @@ export const AccordionExample {
|
||||
| `disabled` | `disabled` | If `true`, the accordion cannot be interacted with. | `boolean` | `false` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `readonly` | `readonly` | If `true`, the accordion cannot be interacted with, but does not alter the opacity. | `boolean` | `false` |
|
||||
| `toggleIcon` | `toggle-icon` | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. | `string` | `'chevron-down'` |
|
||||
| `toggleIcon` | `toggle-icon` | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. | `string` | `chevronDown` |
|
||||
| `toggleIconSlot` | `toggle-icon-slot` | The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`. | `"end" \| "start"` | `'end'` |
|
||||
| `value` | `value` | The value of the accordion. Defaults to an autogenerated value. | `string` | ``ion-accordion-${accordionIds++}`` |
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
|
||||
import { arrowBackSharp, chevronBack } from 'ionicons/icons';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
@ -83,11 +84,11 @@ export class BackButton implements ComponentInterface, ButtonInterface {
|
||||
|
||||
if (getIonMode(this) === 'ios') {
|
||||
// default ios back button icon
|
||||
return config.get('backButtonIcon', 'chevron-back');
|
||||
return config.get('backButtonIcon', chevronBack);
|
||||
}
|
||||
|
||||
// default md back button icon
|
||||
return config.get('backButtonIcon', 'arrow-back-sharp');
|
||||
return config.get('backButtonIcon', arrowBackSharp);
|
||||
}
|
||||
|
||||
get backButtonText() {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { arrowBackSharp, chevronBack } from 'ionicons/icons';
|
||||
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
import { BackButton } from "../back-button";
|
||||
import { config } from "../../../global/config";
|
||||
@ -46,12 +48,12 @@ describe('back button', () => {
|
||||
|
||||
it('default icon for ios mode', async () => {
|
||||
const bb = await newBackButton('ios');
|
||||
expect(bb.backButtonIcon).toBe('chevron-back');
|
||||
expect(bb.backButtonIcon).toBe(chevronBack);
|
||||
});
|
||||
|
||||
it('default icon', async () => {
|
||||
const bb = await newBackButton();
|
||||
expect(bb.backButtonIcon).toBe('arrow-back-sharp');
|
||||
expect(bb.backButtonIcon).toBe(arrowBackSharp);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
|
||||
import { close } from 'ionicons/icons';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { AnimationBuilder, Color, RouterDirection } from '../../interface';
|
||||
@ -105,7 +106,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
|
||||
* is pressed. Only applies if it is the main button inside of a fab containing a
|
||||
* fab list.
|
||||
*/
|
||||
@Prop() closeIcon = 'close';
|
||||
@Prop() closeIcon = close;
|
||||
|
||||
/**
|
||||
* Emitted when the button has focus.
|
||||
|
||||
@ -149,7 +149,7 @@ export default defineComponent({
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
|
||||
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
|
||||
| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `'close'` |
|
||||
| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `close` |
|
||||
| `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` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `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` |
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Host, Listen, Prop, State, forceUpdate, h } from '@stencil/core';
|
||||
import { chevronForward } from 'ionicons/icons';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
|
||||
@ -61,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
|
||||
/**
|
||||
* The icon to use when `detail` is set to `true`.
|
||||
*/
|
||||
@Prop() detailIcon = 'chevron-forward';
|
||||
@Prop() detailIcon = chevronForward;
|
||||
|
||||
/**
|
||||
* If `true`, the user cannot interact with the item.
|
||||
|
||||
@ -1929,25 +1929,25 @@ export default defineComponent({
|
||||
|
||||
## 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` |
|
||||
| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. | `boolean` | `false` |
|
||||
| `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` |
|
||||
| `fill` | `fill` | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. | `"outline" \| "solid" \| 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` |
|
||||
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| 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'` |
|
||||
| `shape` | `shape` | The shape of the item. If "round" it will have increased border radius. | `"round" \| undefined` | `undefined` |
|
||||
| `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` |
|
||||
| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. | `boolean` | `false` |
|
||||
| `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` | `chevronForward` |
|
||||
| `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` |
|
||||
| `fill` | `fill` | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. | `"outline" \| "solid" \| 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` |
|
||||
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| 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'` |
|
||||
| `shape` | `shape` | The shape of the item. If "round" it will have increased border radius. | `"round" \| undefined` | `undefined` |
|
||||
| `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
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core';
|
||||
import { menuOutline, menuSharp } from 'ionicons/icons';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
@ -78,7 +79,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
|
||||
render() {
|
||||
const { color, disabled, inheritedAttributes } = this;
|
||||
const mode = getIonMode(this);
|
||||
const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');
|
||||
const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
|
||||
const hidden = this.autoHide && !this.visible;
|
||||
|
||||
const attrs = {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Host, Listen, h } from '@stencil/core';
|
||||
import { reorderThreeOutline, reorderTwoSharp } from 'ionicons/icons';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
|
||||
@ -31,11 +32,11 @@ export class Reorder implements ComponentInterface {
|
||||
|
||||
render() {
|
||||
const mode = getIonMode(this);
|
||||
const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp';
|
||||
const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
|
||||
return (
|
||||
<Host class={mode}>
|
||||
<slot>
|
||||
<ion-icon name={reorderIcon} lazy={false} class="reorder-icon" part="icon" />
|
||||
<ion-icon icon={reorderIcon} lazy={false} class="reorder-icon" part="icon" />
|
||||
</slot>
|
||||
</Host>
|
||||
);
|
||||
|
||||
@ -331,27 +331,27 @@ export default defineComponent({
|
||||
|
||||
## 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" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'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. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
||||
| `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" \| undefined` | `undefined` |
|
||||
| `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'` |
|
||||
| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` |
|
||||
| `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" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'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', arrowBackSharp) 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. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
||||
| `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" \| undefined` | `undefined` |
|
||||
| `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'` |
|
||||
| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` |
|
||||
| `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
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
|
||||
import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
@ -53,9 +54,9 @@ export class Searchbar implements ComponentInterface {
|
||||
|
||||
/**
|
||||
* Set the cancel button icon. Only applies to `md` mode.
|
||||
* Defaults to `"arrow-back-sharp"`.
|
||||
* Defaults to `arrow-back-sharp`.
|
||||
*/
|
||||
@Prop() cancelButtonIcon = config.get('backButtonIcon', 'arrow-back-sharp') as string;
|
||||
@Prop() cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp) as string;
|
||||
|
||||
/**
|
||||
* Set the the cancel button text. Only applies to `ios` mode.
|
||||
@ -63,7 +64,7 @@ export class Searchbar implements ComponentInterface {
|
||||
@Prop() cancelButtonText = 'Cancel';
|
||||
|
||||
/**
|
||||
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
|
||||
* Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
|
||||
*/
|
||||
@Prop() clearIcon?: string;
|
||||
|
||||
@ -108,8 +109,8 @@ export class Searchbar implements ComponentInterface {
|
||||
@Prop() placeholder = 'Search';
|
||||
|
||||
/**
|
||||
* The icon to use as the search icon. Defaults to `"search-outline"` in
|
||||
* `ios` mode and `"search-sharp"` in `md` mode.
|
||||
* The icon to use as the search icon. Defaults to `search-outline` in
|
||||
* `ios` mode and `search-sharp` in `md` mode.
|
||||
*/
|
||||
@Prop() searchIcon?: string;
|
||||
|
||||
@ -458,8 +459,8 @@ export class Searchbar implements ComponentInterface {
|
||||
const { cancelButtonText } = this;
|
||||
const animated = this.animated && config.getBoolean('animated', true);
|
||||
const mode = getIonMode(this);
|
||||
const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
|
||||
const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
|
||||
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
||||
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
||||
const shouldShowCancelButton = this.shouldShowCancelButton();
|
||||
|
||||
const cancelButton = (this.showCancelButton !== 'never') && (
|
||||
|
||||
@ -1,21 +1,4 @@
|
||||
import { IonicConfig, initialize } from '@ionic/core/components';
|
||||
import { addIcons } from 'ionicons';
|
||||
import {
|
||||
arrowBackSharp,
|
||||
caretBackSharp,
|
||||
chevronBack,
|
||||
chevronDown,
|
||||
chevronForward,
|
||||
close,
|
||||
closeCircle,
|
||||
closeSharp,
|
||||
menuOutline,
|
||||
menuSharp,
|
||||
reorderThreeOutline,
|
||||
reorderTwoSharp,
|
||||
searchOutline,
|
||||
searchSharp,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
export {
|
||||
// UTILS
|
||||
@ -171,24 +154,6 @@ export { useIonPopover, UseIonPopoverResult } from '../hooks/useIonPopover';
|
||||
export { useIonPicker, UseIonPickerResult } from '../hooks/useIonPicker';
|
||||
export { useIonLoading, UseIonLoadingResult } from '../hooks/useIonLoading';
|
||||
|
||||
// Icons that are used by internal components
|
||||
addIcons({
|
||||
'arrow-back-sharp': arrowBackSharp,
|
||||
'caret-back-sharp': caretBackSharp,
|
||||
'chevron-back': chevronBack,
|
||||
'chevron-down': chevronDown,
|
||||
'chevron-forward': chevronForward,
|
||||
close,
|
||||
'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,
|
||||
});
|
||||
|
||||
export const setupIonicReact = (config: IonicConfig = {}) => {
|
||||
/**
|
||||
* By default Ionic Framework hides elements that
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { addIcons } from 'ionicons';
|
||||
import { arrowBackSharp, caretBackSharp, chevronBack, chevronDown, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
|
||||
|
||||
export * from './proxies';
|
||||
|
||||
export { UseBackButtonResult, useBackButton } from './hooks/back-button';
|
||||
@ -149,21 +146,3 @@ export {
|
||||
ToggleChangeEventDetail,
|
||||
ToggleCustomEvent,
|
||||
} from '@ionic/core/components';
|
||||
|
||||
// Icons that are used by internal components
|
||||
addIcons({
|
||||
'arrow-back-sharp': arrowBackSharp,
|
||||
'caret-back-sharp': caretBackSharp,
|
||||
'chevron-back': chevronBack,
|
||||
'chevron-forward': chevronForward,
|
||||
'chevron-down': chevronDown,
|
||||
'close': close,
|
||||
'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