@ionic/core
- Version 8.6.2
- Published
- 20 MB
- 3 dependencies
- MIT license
Install
npm i @ionic/core
yarn add @ionic/core
pnpm add @ionic/core
Overview
Base components for Ionic
Index
Variables
Functions
Classes
Interfaces
Animation
- addAnimation()
- addElement()
- afterAddClass()
- afterAddRead()
- afterAddWrite()
- afterClearStyles()
- afterRemoveClass()
- afterStyles()
- beforeAddClass()
- beforeAddRead()
- beforeAddWrite()
- beforeClearStyles()
- beforeRemoveClass()
- beforeStyles()
- childAnimations
- delay()
- destroy()
- direction()
- duration()
- easing()
- elements
- fill()
- from()
- fromTo()
- getDelay()
- getDirection()
- getDuration()
- getEasing()
- getFill()
- getIterations()
- getKeyframes()
- getWebAnimations()
- id
- isRunning()
- iterations()
- keyframes()
- onFinish()
- parentAnimation
- pause()
- play()
- progressEnd()
- progressStart()
- progressStep()
- stop()
- to()
IonicConfig
- actionSheetEnter
- actionSheetLeave
- alertEnter
- alertLeave
- animated
- backButtonDefaultHref
- backButtonIcon
- backButtonText
- experimentalCloseWatcher
- focusManagerPriority
- hardwareBackButton
- hideCaretOnScroll
- infiniteLoadingSpinner
- innerHTMLTemplatesEnabled
- inputBlurring
- inputShims
- keyboardHeight
- loadingEnter
- loadingLeave
- loadingSpinner
- logLevel
- menuIcon
- menuType
- modalEnter
- modalLeave
- mode
- navAnimation
- persistConfig
- pickerEnter
- pickerLeave
- platform
- popoverEnter
- popoverLeave
- refreshingIcon
- refreshingSpinner
- rippleEffect
- sanitizerEnabled
- scrollAssist
- scrollPadding
- spinner
- statusTap
- swipeBackEnabled
- tabButtonLayout
- toastDuration
- toastEnter
- toastLeave
- toggleOnOffLabels
Enums
Type Aliases
- AnimationBuilder
- AnimationDirection
- AnimationFill
- AnimationKeyFrames
- AnimationLifecycle
- AutocompleteTypes
- BackButtonEvent
- Color
- ComponentProps
- ComponentRef
- ComponentTags
- CounterFormatter
- CssClassMap
- DatetimeHighlight
- DatetimeHighlightCallback
- DatetimeHighlightStyle
- DatetimeHourCycle
- DatetimePresentation
- FormatOptions
- LiteralUnion
- MenuType
- ModalHandleBehavior
- Mode
- NavComponent
- NavDirection
- NavigationHookCallback
- PickerColumnValue
- PinFormatter
- PlatformConfig
- Platforms
- PopoverSize
- PositionAlign
- PositionReference
- PositionSide
- PredefinedColors
- RadioGroupCompareFn
- RangeValue
- RouterDirection
- ScrollCallback
- SegmentButtonLayout
- SegmentValue
- SelectCompareFn
- SelectInterface
- Side
- SpinnerTypes
- TabButtonLayout
- TextFieldTypes
- TitleSelectedDatesFormatter
- ToastDismissOptions
- ToastLayout
- ToastPosition
- ToastPresentOptions
- ToastSwipeGestureDirection
- TransitionDoneFn
- TriggerAction
Namespaces
Components
- IonAccordion
- IonAccordionGroup
- IonActionSheet
- IonAlert
- IonApp
- IonAvatar
- IonBackButton
- IonBackdrop
- IonBadge
- IonBreadcrumb
- IonBreadcrumbs
- IonButton
- IonButtons
- IonCard
- IonCardContent
- IonCardHeader
- IonCardSubtitle
- IonCardTitle
- IonCheckbox
- IonChip
- IonCol
- IonContent
- IonDatetime
- IonDatetimeButton
- IonFab
- IonFabButton
- IonFabList
- IonFooter
- IonGrid
- IonHeader
- IonImg
- IonInfiniteScroll
- IonInfiniteScrollContent
- IonInput
- IonInputOtp
- IonInputPasswordToggle
- IonItem
- IonItemDivider
- IonItemGroup
- IonItemOption
- IonItemOptions
- IonItemSliding
- IonLabel
- IonList
- IonListHeader
- IonLoading
- IonMenu
- IonMenuButton
- IonMenuToggle
- IonModal
- IonNav
- IonNavLink
- IonNote
- IonPicker
- IonPickerColumn
- IonPickerColumnOption
- IonPickerLegacy
- IonPickerLegacyColumn
- IonPopover
- IonProgressBar
- IonRadio
- IonRadioGroup
- IonRange
- IonRefresher
- IonRefresherContent
- IonReorder
- IonReorderGroup
- IonRippleEffect
- IonRoute
- IonRouter
- IonRouteRedirect
- IonRouterLink
- IonRouterOutlet
- IonRow
- IonSearchbar
- IonSegment
- IonSegmentButton
- IonSegmentContent
- IonSegmentView
- IonSelect
- IonSelectModal
- IonSelectOption
- IonSelectPopover
- IonSkeletonText
- IonSpinner
- IonSplitPane
- IonTab
- IonTabBar
- IonTabButton
- IonTabs
- IonText
- IonTextarea
- IonThumbnail
- IonTitle
- IonToast
- IonToggle
- IonToolbar
LocalJSX
- IntrinsicElements
- IonAccordion
- IonAccordionGroup
- IonActionSheet
- IonAlert
- IonApp
- IonAvatar
- IonBackButton
- IonBackdrop
- IonBadge
- IonBreadcrumb
- IonBreadcrumbs
- IonButton
- IonButtons
- IonCard
- IonCardContent
- IonCardHeader
- IonCardSubtitle
- IonCardTitle
- IonCheckbox
- IonChip
- IonCol
- IonContent
- IonDatetime
- IonDatetimeButton
- IonFab
- IonFabButton
- IonFabList
- IonFooter
- IonGrid
- IonHeader
- IonImg
- IonInfiniteScroll
- IonInfiniteScrollContent
- IonInput
- IonInputOtp
- IonInputPasswordToggle
- IonItem
- IonItemDivider
- IonItemGroup
- IonItemOption
- IonItemOptions
- IonItemSliding
- IonLabel
- IonList
- IonListHeader
- IonLoading
- IonMenu
- IonMenuButton
- IonMenuToggle
- IonModal
- IonNav
- IonNavLink
- IonNote
- IonPicker
- IonPickerColumn
- IonPickerColumnOption
- IonPickerLegacy
- IonPickerLegacyColumn
- IonPopover
- IonProgressBar
- IonRadio
- IonRadioGroup
- IonRange
- IonRefresher
- IonRefresherContent
- IonReorder
- IonReorderGroup
- IonRippleEffect
- IonRoute
- IonRouter
- IonRouteRedirect
- IonRouterLink
- IonRouterOutlet
- IonRow
- IonSearchbar
- IonSegment
- IonSegmentButton
- IonSegmentContent
- IonSegmentView
- IonSelect
- IonSelectModal
- IonSelectOption
- IonSelectPopover
- IonSkeletonText
- IonSpinner
- IonSplitPane
- IonTab
- IonTabBar
- IonTabButton
- IonTabs
- IonText
- IonTextarea
- IonThumbnail
- IonTitle
- IonToast
- IonToggle
- IonToolbar
Variables
variable actionSheetController
const actionSheetController: { create(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonActionSheetElement | undefined>;};
variable alertController
const alertController: { create(options: AlertOptions): Promise<HTMLIonAlertElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonAlertElement | undefined>;};
variable config
const config: Config;
variable isPlatform
const isPlatform: IsPlatformSignature;
variable LIFECYCLE_DID_ENTER
const LIFECYCLE_DID_ENTER: string;
variable LIFECYCLE_DID_LEAVE
const LIFECYCLE_DID_LEAVE: string;
variable LIFECYCLE_WILL_ENTER
const LIFECYCLE_WILL_ENTER: string;
variable LIFECYCLE_WILL_LEAVE
const LIFECYCLE_WILL_LEAVE: string;
variable LIFECYCLE_WILL_UNLOAD
const LIFECYCLE_WILL_UNLOAD: string;
variable loadingController
const loadingController: { create(options: LoadingOptions): Promise<HTMLIonLoadingElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonLoadingElement | undefined>;};
variable menuController
const menuController: MenuControllerI;
variable modalController
const modalController: { create( options: ModalOptions<import('../interface').ComponentRef> ): Promise<HTMLIonModalElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonModalElement | undefined>;};
variable pickerController
const pickerController: { create(options: PickerOptions): Promise<HTMLIonPickerLegacyElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonPickerLegacyElement | undefined>;};
Deprecated
Use the inline ion-picker component instead.
variable popoverController
const popoverController: { create( options: PopoverOptions<import('../interface').ComponentRef> ): Promise<HTMLIonPopoverElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonPopoverElement | undefined>;};
variable toastController
const toastController: { create(options: ToastOptions): Promise<HTMLIonToastElement>; dismiss(data?: any, role?: string, id?: string): Promise<boolean>; getTop(): Promise<HTMLIonToastElement | undefined>;};
Functions
function componentOnReady
componentOnReady: (el: any, callback: any) => void;
Waits for a component to be ready for both custom element and non-custom element builds. If non-custom element build, el.componentOnReady will be used. For custom element builds, we wait a frame so that the inner contents of the component have a chance to render.
Use this utility rather than calling el.componentOnReady yourself.
function createAnimation
createAnimation: (animationId?: string) => Animation;
function createGesture
createGesture: (config: GestureConfig) => Gesture;
function getIonPageElement
getIonPageElement: (element: HTMLElement) => Element;
function getMode
getMode: () => Mode;
function getPlatforms
getPlatforms: ( win?: any) => ( | 'ios' | 'ipad' | 'iphone' | 'android' | 'phablet' | 'tablet' | 'cordova' | 'capacitor' | 'electron' | 'pwa' | 'mobile' | 'mobileweb' | 'desktop' | 'hybrid')[];
function getTimeGivenProgression
getTimeGivenProgression: ( p0: number[], p1: number[], p2: number[], p3: number[], progression: number) => number[];
EXPERIMENTAL Given a cubic-bezier curve, get the x value (time) given the y value (progression). Ex: cubic-bezier(0.32, 0.72, 0, 1); P0: (0, 0) P1: (0.32, 0.72) P2: (0, 1) P3: (1, 1)
If you give a cubic bezier curve that never reaches the provided progression, this function will return an empty array.
function initialize
initialize: (userConfig?: IonicConfig) => void;
function IonicSlides
IonicSlides: (opts: any) => void;
function iosTransitionAnimation
iosTransitionAnimation: ( navEl: HTMLElement, opts: TransitionOptions) => Animation;
function mdTransitionAnimation
mdTransitionAnimation: (_: HTMLElement, opts: TransitionOptions) => Animation;
function openURL
openURL: ( url: string | undefined | null, ev: Event | undefined | null, direction: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
function setupConfig
setupConfig: (config: IonicConfig) => any;
Classes
class Config
class Config {}
method get
get: (key: keyof IonicConfig, fallback?: any) => any;
method getBoolean
getBoolean: (key: keyof IonicConfig, fallback?: boolean) => boolean;
method getNumber
getNumber: (key: keyof IonicConfig, fallback?: number) => number;
method reset
reset: (configObj: IonicConfig) => void;
method set
set: (key: keyof IonicConfig, value: any) => void;
class IonicSafeString
class IonicSafeString {}
constructor
constructor(value: string);
property value
value: string;
class ViewController
class ViewController {}
constructor
constructor(component: any, params: ComponentProps<null>);
property animationBuilder
animationBuilder?: AnimationBuilder;
property component
component: any;
property delegate
delegate?: FrameworkDelegate;
property element
element?: HTMLElement;
property nav
nav?: any;
property params
params: ComponentProps<null>;
property state
state: number;
method init
init: (container: HTMLElement) => Promise<void>;
Interfaces
interface AccordionGroupChangeEventDetail
interface AccordionGroupChangeEventDetail<T = any> {}
property value
value: T;
interface AccordionGroupCustomEvent
interface AccordionGroupCustomEvent<T = any> extends CustomEvent {}
interface ActionSheetButton
interface ActionSheetButton<T = any> {}
property cssClass
cssClass?: string | string[];
property data
data?: T;
property disabled
disabled?: boolean;
When
disabled
istrue
the action sheet button will not be interactive. Note that buttons with a 'cancel' role cannot be disabled as that would make it difficult for users to dismiss the action sheet.
property handler
handler?: () => boolean | void | Promise<boolean | void>;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property icon
icon?: string;
property id
id?: string;
property role
role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
property text
text?: string;
interface ActionSheetOptions
interface ActionSheetOptions {}
property animated
animated?: boolean;
property backdropDismiss
backdropDismiss?: boolean;
property buttons
buttons: (ActionSheetButton | string)[];
property cssClass
cssClass?: string | string[];
property enterAnimation
enterAnimation?: AnimationBuilder;
property header
header?: string;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property mode
mode?: Mode;
property subHeader
subHeader?: string;
property translucent
translucent?: boolean;
interface AlertButton
interface AlertButton {}
property cssClass
cssClass?: string | string[];
property handler
handler?: ( value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property role
role?: LiteralUnion<'cancel' | 'destructive', string>;
property text
text: string;
interface AlertInput
interface AlertInput {}
property attributes
attributes?: { [key: string]: any;};
property checked
checked?: boolean;
property cssClass
cssClass?: string | string[];
property disabled
disabled?: boolean;
property handler
handler?: (input: AlertInput) => void;
property id
id?: string;
property label
label?: string;
The label text to display next to the input, if the input type is
radio
orcheckbox
.
property max
max?: string | number;
property min
min?: string | number;
property name
name?: string;
property placeholder
placeholder?: string;
property tabindex
tabindex?: number;
property type
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
property value
value?: any;
interface AlertOptions
interface AlertOptions {}
property animated
animated?: boolean;
property backdropDismiss
backdropDismiss?: boolean;
property buttons
buttons?: (AlertButton | string)[];
property cssClass
cssClass?: string | string[];
property enterAnimation
enterAnimation?: AnimationBuilder;
property header
header?: string;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property inputs
inputs?: AlertInput[];
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property message
message?: string | IonicSafeString;
property mode
mode?: Mode;
property subHeader
subHeader?: string;
property translucent
translucent?: boolean;
interface Animation
interface Animation {}
property childAnimations
childAnimations: Animation[];
property elements
elements: HTMLElement[];
property id
id: string | undefined;
property parentAnimation
parentAnimation: Animation | undefined;
method addAnimation
addAnimation: (animationToAdd: Animation | Animation[]) => Animation;
Group one or more animations together to be controlled by a parent animation.
method addElement
addElement: (el: Element | Element[] | Node | Node[] | NodeList) => Animation;
Add one or more elements to the animation
method afterAddClass
afterAddClass: (className: string | string[]) => Animation;
Add CSS class to the animation's elements after the animation ends.
method afterAddRead
afterAddRead: (readFn: () => void) => Animation;
Add a function that performs a DOM read to be run after the animation end
method afterAddWrite
afterAddWrite: (writeFn: () => void) => Animation;
Add a function that performs a DOM write to be run after the animation end
method afterClearStyles
afterClearStyles: (propertyNames: string[]) => Animation;
Clear CSS inline styles from the animation's elements after the animation ends.
method afterRemoveClass
afterRemoveClass: (className: string | string[]) => Animation;
Remove CSS class from the animation's elements after the animation ends.
method afterStyles
afterStyles: (styles: { [property: string]: any }) => Animation;
Set CSS inline styles to the animation's elements after the animation ends.
method beforeAddClass
beforeAddClass: (className: string | string[]) => Animation;
Add a class to the animation's elements before the animation starts
method beforeAddRead
beforeAddRead: (readFn: () => void) => Animation;
Add a function that performs a DOM read to be run before the animation starts
method beforeAddWrite
beforeAddWrite: (writeFn: () => void) => Animation;
Add a function that performs a DOM write to be run before the animation starts
method beforeClearStyles
beforeClearStyles: (propertyNames: string[]) => Animation;
Clear CSS inline styles from the animation's elements before the animation begins.
method beforeRemoveClass
beforeRemoveClass: (className: string | string[]) => Animation;
Remove a class from the animation's elements before the animation starts
method beforeStyles
beforeStyles: (styles: { [property: string]: any }) => Animation;
Set CSS inline styles to the animation's elements before the animation begins.
method delay
delay: (delay: number | undefined) => Animation;
Sets when an animation starts (in milliseconds).
method destroy
destroy: (clearStyleSheets?: boolean) => void;
Destroy the animation and all child animations.
method direction
direction: (direction: AnimationDirection | undefined) => Animation;
Sets whether the animation should play forwards, backwards, or alternating back and forth.
method duration
duration: (duration: number | undefined) => Animation;
Sets the length of time the animation takes to complete one cycle.
method easing
easing: (easing: string | undefined) => Animation;
Sets how the animation progresses through the duration of each cycle.
method fill
fill: (fill: AnimationFill | undefined) => Animation;
Sets how the animation applies styles to its elements before and after the animation's execution.
method from
from: (property: string, value: string | number) => Animation;
method fromTo
fromTo: ( property: string, fromValue: string | number, toValue: string | number) => Animation;
method getDelay
getDelay: () => number;
Gets the animation's delay in milliseconds.
method getDirection
getDirection: () => AnimationDirection;
Returns the animation's direction.
method getDuration
getDuration: () => number;
Gets the animation's duration in milliseconds.
method getEasing
getEasing: () => string;
Returns the animation's easing.
method getFill
getFill: () => AnimationFill;
Returns the animation's fill mode.
method getIterations
getIterations: () => number;
Gets the number of iterations the animation will run.
method getKeyframes
getKeyframes: () => AnimationKeyFrames;
Get an array of keyframes for the animation.
method getWebAnimations
getWebAnimations: () => globalThis.Animation[];
Returns the raw Web Animations object for all elements in an Animation. This will return an empty array on browsers that do not support the Web Animations API.
method isRunning
isRunning: () => boolean;
Returns
true
if the animation is running. Returnsfalse
otherwise.
method iterations
iterations: (iterations: number) => Animation;
Sets the number of times the animation cycle should be played before stopping.
method keyframes
keyframes: (keyframes: AnimationKeyFrames) => Animation;
Set the keyframes for the animation.
method onFinish
onFinish: ( callback: AnimationLifecycle, opts?: AnimationCallbackOptions) => Animation;
Add a callback to be run upon the animation ending
method pause
pause: () => void;
Pauses the animation
method play
play: (opts?: AnimationPlayOptions) => Promise<void>;
Play the animation
If the
sync
options istrue
, the animation will play synchronously. This is the equivalent of running the animation with a duration of 0ms.
method progressEnd
progressEnd: ( playTo: 0 | 1 | undefined, step: number, dur?: number) => Animation;
method progressStart
progressStart: (forceLinearEasing?: boolean, step?: number) => Animation;
method progressStep
progressStep: (step: number) => Animation;
method stop
stop: () => void;
Stop the animation and reset all elements to their initial state
method to
to: (property: string, value: string | number) => Animation;
interface AnimationCallbackOptions
interface AnimationCallbackOptions {}
property oneTimeCallback
oneTimeCallback: boolean;
interface BackButtonEventDetail
interface BackButtonEventDetail {}
method register
register: ( priority: number, handler: (processNextHandler: () => void) => Promise<any> | void) => void;
interface BreadcrumbCollapsedClickEventDetail
interface BreadcrumbCollapsedClickEventDetail {}
property collapsedBreadcrumbs
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
property ionShadowTarget
ionShadowTarget?: HTMLElement;
interface BreadcrumbCustomEvent
interface BreadcrumbCustomEvent extends CustomEvent {}
interface CheckboxChangeEventDetail
interface CheckboxChangeEventDetail<T = any> {}
interface CheckboxCustomEvent
interface CheckboxCustomEvent<T = any> extends CustomEvent {}
interface DatetimeChangeEventDetail
interface DatetimeChangeEventDetail {}
property value
value?: string | string[] | null;
interface DatetimeCustomEvent
interface DatetimeCustomEvent extends CustomEvent {}
interface FrameworkDelegate
interface FrameworkDelegate {}
method attachViewToDom
attachViewToDom: ( container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]) => Promise<HTMLElement>;
method removeViewFromDom
removeViewFromDom: (container: any, component: any) => Promise<void>;
interface Gesture
interface Gesture {}
interface GestureConfig
interface GestureConfig {}
property blurOnStart
blurOnStart?: boolean;
property canStart
canStart?: GestureCallback;
property direction
direction?: 'x' | 'y';
property disableScroll
disableScroll?: boolean;
property el
el: Node;
property gestureName
gestureName: string;
property gesturePriority
gesturePriority?: number;
property maxAngle
maxAngle?: number;
property notCaptured
notCaptured?: GestureCallback;
property onEnd
onEnd?: GestureCallback;
property onMove
onMove?: GestureCallback;
property onStart
onStart?: GestureCallback;
property onWillStart
onWillStart?: (_: GestureDetail) => Promise<void>;
property passive
passive?: boolean;
property threshold
threshold?: number;
index signature
[index: string]: any;
interface GestureDetail
interface GestureDetail {}
property currentTime
currentTime: number;
property currentX
currentX: number;
property currentY
currentY: number;
property data
data?: any;
property deltaX
deltaX: number;
property deltaY
deltaY: number;
property event
event: UIEvent;
property startTime
startTime: number;
property startX
startX: number;
property startY
startY: number;
property type
type: string;
property velocityX
velocityX: number;
property velocityY
velocityY: number;
interface HTMLIonOverlayElement
interface HTMLIonOverlayElement extends HTMLStencilElement {}
property backdropDismiss
backdropDismiss?: boolean;
property lastFocus
lastFocus?: HTMLElement;
property overlayIndex
overlayIndex: number;
property present
present: () => Promise<void>;
method dismiss
dismiss: (data?: any, role?: string) => Promise<boolean>;
interface HTMLStencilElement
interface HTMLStencilElement extends HTMLElement {}
method componentOnReady
componentOnReady: () => Promise<this>;
interface InfiniteScrollCustomEvent
interface InfiniteScrollCustomEvent extends CustomEvent {}
property target
target: HTMLIonInfiniteScrollElement;
interface InputChangeEventDetail
interface InputChangeEventDetail {}
Values are converted to strings when emitted which is why we do not have a
number
type here even though thevalue
prop accepts anumber
type.
interface InputCustomEvent
interface InputCustomEvent<T = InputChangeEventDetail> extends CustomEvent {}
interface InputInputEventDetail
interface InputInputEventDetail {}
interface InputOtpChangeEventDetail
interface InputOtpChangeEventDetail {}
interface InputOtpCompleteEventDetail
interface InputOtpCompleteEventDetail {}
interface InputOtpCustomEvent
interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {}
interface InputOtpInputEventDetail
interface InputOtpInputEventDetail {}
Values are converted to strings when emitted which is why we do not have a
number
type here even though thevalue
prop accepts anumber
type.
interface IonAccordionGroupCustomEvent
interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {}
interface IonActionSheetCustomEvent
interface IonActionSheetCustomEvent<T> extends CustomEvent<T> {}
interface IonAlertCustomEvent
interface IonAlertCustomEvent<T> extends CustomEvent<T> {}
interface IonBackdropCustomEvent
interface IonBackdropCustomEvent<T> extends CustomEvent<T> {}
interface IonBreadcrumbCustomEvent
interface IonBreadcrumbCustomEvent<T> extends CustomEvent<T> {}
interface IonBreadcrumbsCustomEvent
interface IonBreadcrumbsCustomEvent<T> extends CustomEvent<T> {}
interface IonButtonCustomEvent
interface IonButtonCustomEvent<T> extends CustomEvent<T> {}
interface IonCheckboxCustomEvent
interface IonCheckboxCustomEvent<T> extends CustomEvent<T> {}
interface IonContentCustomEvent
interface IonContentCustomEvent<T> extends CustomEvent<T> {}
interface IonDatetimeCustomEvent
interface IonDatetimeCustomEvent<T> extends CustomEvent<T> {}
interface IonFabButtonCustomEvent
interface IonFabButtonCustomEvent<T> extends CustomEvent<T> {}
interface IonicConfig
interface IonicConfig {}
property actionSheetEnter
actionSheetEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-action-sheet
, overriding the default "animation".
property actionSheetLeave
actionSheetLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-action-sheet
, overriding the default "animation".
property alertEnter
alertEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-alert
, overriding the default "animation".
property alertLeave
alertLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-alert
, overriding the default "animation".
property animated
animated?: boolean;
When it's set to
false
, disables all animation and transition across the app. Can be useful to make ionic smoother in slow devices, when animations can't run smoothly.
property backButtonDefaultHref
backButtonDefaultHref?: string;
Overrides the default defaultHref in all
<ion-back-button>
components.
property backButtonIcon
backButtonIcon?: string;
Overrides the default icon in all
<ion-back-button>
components.
property backButtonText
backButtonText?: string;
Overrides the default text in all
<ion-back-button>
components.
property experimentalCloseWatcher
experimentalCloseWatcher?: boolean;
If
true
, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that thehardwareBackButton
config option must also betrue
.Modifiers
@experimental
property focusManagerPriority
focusManagerPriority?: FocusManagerPriority[];
When defined, Ionic will move focus to the appropriate element after each page transition. This ensures that users relying on assistive technology are informed when a page transition happens.
Modifiers
@experimental
property hardwareBackButton
hardwareBackButton?: boolean;
Wherever ionic will respond to hardware go back buttons in an Android device. Defaults to
true
when ionic runs in a mobile device.
property hideCaretOnScroll
hideCaretOnScroll?: boolean;
property infiniteLoadingSpinner
infiniteLoadingSpinner?: SpinnerTypes | null;
Overrides the default spinner type in all
<ion-infinite-scroll-content>
components.
property innerHTMLTemplatesEnabled
innerHTMLTemplatesEnabled?: boolean;
Relevant Components: ion-alert, ion-infinite-scroll-content, ion-loading, ion-refresher-content, ion-toast If
false
, allinnerHTML
usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. Iftrue
, allinnerHTML
usage will be enabled in Ionic, and custom HTML will be usable in the relevant components.innerHTML
usage is disabled by default.
property inputBlurring
inputBlurring?: boolean;
property inputShims
inputShims?: boolean;
property keyboardHeight
keyboardHeight?: number;
property loadingEnter
loadingEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-loading
, overriding the default "animation".
property loadingLeave
loadingLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-loading
, overriding the default "animation".
property loadingSpinner
loadingSpinner?: SpinnerTypes | null;
Overrides the default spinner for all
ion-loading
overlays, ie. the ones created withion-loading-controller
.
property logLevel
logLevel?: LogLevel;
Configures the logging level for Ionic Framework:
-
'OFF'
: No errors or warnings are logged. -'ERROR'
: Logs only errors. -'WARN'
: Logs errors and warnings.
property menuIcon
menuIcon?: string;
Overrides the default icon in all
<ion-menu-button>
components.
property menuType
menuType?: string;
Overrides the default menu type for all
<ion-menu>
components. By default the menu type is chosen based in the app's mode.
property modalEnter
modalEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-modal
, overriding the default "animation".
property modalLeave
modalLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-modal
, overriding the default "animation".
property mode
mode?: Mode;
The mode determines which platform styles to use for the whole application.
property navAnimation
navAnimation?: AnimationBuilder;
Overrides the default "animation" of all
ion-nav
andion-router-outlet
across the whole application. This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.
property persistConfig
persistConfig?: boolean;
property pickerEnter
pickerEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-picker-legacy
, overriding the default "animation".
property pickerLeave
pickerLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-picker-legacy
, overriding the default "animation".
property platform
platform?: PlatformConfig;
Overrides the default platform detection methods.
property popoverEnter
popoverEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-popover
, overriding the default "animation".
property popoverLeave
popoverLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-popover
, overriding the default "animation".
property refreshingIcon
refreshingIcon?: string;
Overrides the default icon in all
<ion-refresh-content>
components.
property refreshingSpinner
refreshingSpinner?: SpinnerTypes | null;
Overrides the default spinner type in all
<ion-refresh-content>
components.
property rippleEffect
rippleEffect?: boolean;
When it's set to
false
, it disables all material-design ripple-effects across the app. Defaults totrue
.
property sanitizerEnabled
sanitizerEnabled?: boolean;
If
true
, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
property scrollAssist
scrollAssist?: boolean;
property scrollPadding
scrollPadding?: boolean;
property spinner
spinner?: SpinnerTypes;
Overrides the default spinner in all
<ion-spinner>
components. By default the spinner type is chosen based in the mode (ios or md).
property statusTap
statusTap?: boolean;
Whenever clicking the top status bar should cause the scroll to top in an application. Defaults to
true
when ionic runs in a mobile device.
property swipeBackEnabled
swipeBackEnabled?: boolean;
Global switch that disables or enables "swipe-to-go-back" gesture across all
ion-nav
in your application.
property tabButtonLayout
tabButtonLayout?: TabButtonLayout;
Overrides the default "layout" of all
ion-bar-button
across the whole application.
property toastDuration
toastDuration?: number;
Overrides the default
duration
for allion-toast
components.
property toastEnter
toastEnter?: AnimationBuilder;
Provides a custom enter animation for all
ion-toast
, overriding the default "animation".
property toastLeave
toastLeave?: AnimationBuilder;
Provides a custom leave animation for all
ion-toast
, overriding the default "animation".
property toggleOnOffLabels
toggleOnOffLabels?: boolean;
Overrides the default enableOnOffLabels in all
<ion-toggle>
components.
interface IonImgCustomEvent
interface IonImgCustomEvent<T> extends CustomEvent<T> {}
interface IonInfiniteScrollCustomEvent
interface IonInfiniteScrollCustomEvent<T> extends CustomEvent<T> {}
interface IonInputCustomEvent
interface IonInputCustomEvent<T> extends CustomEvent<T> {}
interface IonInputOtpCustomEvent
interface IonInputOtpCustomEvent<T> extends CustomEvent<T> {}
interface IonItemOptionsCustomEvent
interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {}
interface IonItemSlidingCustomEvent
interface IonItemSlidingCustomEvent<T> extends CustomEvent<T> {}
interface IonLabelCustomEvent
interface IonLabelCustomEvent<T> extends CustomEvent<T> {}
interface IonLoadingCustomEvent
interface IonLoadingCustomEvent<T> extends CustomEvent<T> {}
interface IonMenuCustomEvent
interface IonMenuCustomEvent<T> extends CustomEvent<T> {}
interface IonModalCustomEvent
interface IonModalCustomEvent<T> extends CustomEvent<T> {}
interface IonNavCustomEvent
interface IonNavCustomEvent<T> extends CustomEvent<T> {}
interface IonPickerColumnCustomEvent
interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {}
interface IonPickerCustomEvent
interface IonPickerCustomEvent<T> extends CustomEvent<T> {}
interface IonPickerLegacyColumnCustomEvent
interface IonPickerLegacyColumnCustomEvent<T> extends CustomEvent<T> {}
interface IonPickerLegacyCustomEvent
interface IonPickerLegacyCustomEvent<T> extends CustomEvent<T> {}
interface IonPopoverCustomEvent
interface IonPopoverCustomEvent<T> extends CustomEvent<T> {}
interface IonRadioCustomEvent
interface IonRadioCustomEvent<T> extends CustomEvent<T> {}
interface IonRadioGroupCustomEvent
interface IonRadioGroupCustomEvent<T> extends CustomEvent<T> {}
interface IonRangeCustomEvent
interface IonRangeCustomEvent<T> extends CustomEvent<T> {}
interface IonRefresherCustomEvent
interface IonRefresherCustomEvent<T> extends CustomEvent<T> {}
interface IonReorderGroupCustomEvent
interface IonReorderGroupCustomEvent<T> extends CustomEvent<T> {}
interface IonRouteCustomEvent
interface IonRouteCustomEvent<T> extends CustomEvent<T> {}
interface IonRouterCustomEvent
interface IonRouterCustomEvent<T> extends CustomEvent<T> {}
interface IonRouteRedirectCustomEvent
interface IonRouteRedirectCustomEvent<T> extends CustomEvent<T> {}
interface IonRouterOutletCustomEvent
interface IonRouterOutletCustomEvent<T> extends CustomEvent<T> {}
interface IonSearchbarCustomEvent
interface IonSearchbarCustomEvent<T> extends CustomEvent<T> {}
interface IonSegmentCustomEvent
interface IonSegmentCustomEvent<T> extends CustomEvent<T> {}
interface IonSegmentViewCustomEvent
interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {}
interface IonSelectCustomEvent
interface IonSelectCustomEvent<T> extends CustomEvent<T> {}
interface IonSkeletonTextCustomEvent
interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {}
interface IonSplitPaneCustomEvent
interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {}
interface IonTabBarCustomEvent
interface IonTabBarCustomEvent<T> extends CustomEvent<T> {}
interface IonTabButtonCustomEvent
interface IonTabButtonCustomEvent<T> extends CustomEvent<T> {}
interface IonTabsCustomEvent
interface IonTabsCustomEvent<T> extends CustomEvent<T> {}
interface IonTextareaCustomEvent
interface IonTextareaCustomEvent<T> extends CustomEvent<T> {}
interface IonTitleCustomEvent
interface IonTitleCustomEvent<T> extends CustomEvent<T> {}
interface IonToastCustomEvent
interface IonToastCustomEvent<T> extends CustomEvent<T> {}
interface IonToggleCustomEvent
interface IonToggleCustomEvent<T> extends CustomEvent<T> {}
interface ItemReorderCustomEvent
interface ItemReorderCustomEvent extends CustomEvent {}
interface ItemReorderEventDetail
interface ItemReorderEventDetail {}
interface ItemSlidingCustomEvent
interface ItemSlidingCustomEvent extends CustomEvent {}
property target
target: HTMLIonItemSlidingElement;
interface KeyboardEventDetail
interface KeyboardEventDetail {}
property keyboardHeight
keyboardHeight: number;
interface LoadingOptions
interface LoadingOptions {}
property animated
animated?: boolean;
property backdropDismiss
backdropDismiss?: boolean;
property cssClass
cssClass?: string | string[];
property duration
duration?: number;
property enterAnimation
enterAnimation?: AnimationBuilder;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property message
message?: string | IonicSafeString;
property mode
mode?: Mode;
property showBackdrop
showBackdrop?: boolean;
property spinner
spinner?: SpinnerTypes | null;
property translucent
translucent?: boolean;
interface MenuChangeEventDetail
interface MenuChangeEventDetail {}
interface MenuCloseEventDetail
interface MenuCloseEventDetail {}
property role
role?: string;
interface MenuControllerI
interface MenuControllerI {}
method close
close: (menu?: string | null) => Promise<boolean>;
method enable
enable: ( shouldEnable: boolean, menu?: string | null) => Promise<HTMLIonMenuElement | undefined>;
method get
get: ( menu?: string | null, logOnMultipleSideMenus?: boolean) => Promise<HTMLIonMenuElement | undefined>;
method getMenus
getMenus: () => Promise<HTMLIonMenuElement[]>;
method getOpen
getOpen: () => Promise<HTMLIonMenuElement | undefined>;
method isAnimating
isAnimating: () => Promise<boolean>;
method isEnabled
isEnabled: (menu?: string | null) => Promise<boolean>;
method isOpen
isOpen: (menu?: string | null) => Promise<boolean>;
method open
open: (menu?: string | null) => Promise<boolean>;
method registerAnimation
registerAnimation: (name: string, animation: AnimationBuilder) => void;
method swipeGesture
swipeGesture: ( shouldEnable: boolean, menu?: string | null) => Promise<HTMLIonMenuElement | undefined>;
method toggle
toggle: (menu?: string | null) => Promise<boolean>;
interface MenuCustomEvent
interface MenuCustomEvent<T = any> extends CustomEvent {}
interface MenuI
interface MenuI {}
property backdropEl
backdropEl?: HTMLElement;
property contentEl
contentEl?: HTMLElement;
property disabled
disabled: boolean;
property el
el: HTMLIonMenuElement;
property isAnimating
isAnimating: boolean;
property isEndSide
isEndSide: boolean;
property menuCtrl
menuCtrl?: MenuControllerI;
property menuId
menuId?: string;
property menuInnerEl
menuInnerEl?: HTMLElement;
property side
side: Side;
property width
width: number;
method close
close: (animated?: boolean) => Promise<boolean>;
method isActive
isActive: () => Promise<boolean>;
method open
open: (animated?: boolean) => Promise<boolean>;
method setOpen
setOpen: (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
method toggle
toggle: (animated?: boolean) => Promise<boolean>;
interface ModalBreakpointChangeEventDetail
interface ModalBreakpointChangeEventDetail {}
property breakpoint
breakpoint: number;
interface ModalCustomEvent
interface ModalCustomEvent extends CustomEvent {}
property target
target: HTMLIonModalElement;
interface ModalOptions
interface ModalOptions<T extends ComponentRef = ComponentRef> {}
property animated
animated?: boolean;
property backdropBreakpoint
backdropBreakpoint?: number;
property backdropDismiss
backdropDismiss?: boolean;
property breakpoints
breakpoints?: number[];
property canDismiss
canDismiss?: boolean | ((data?: any, role?: string) => Promise<boolean>);
property component
component: T;
property componentProps
componentProps?: ComponentProps<T>;
property cssClass
cssClass?: string | string[];
property delegate
delegate?: FrameworkDelegate;
property enterAnimation
enterAnimation?: AnimationBuilder;
property expandToScroll
expandToScroll?: boolean;
property focusTrap
focusTrap?: boolean;
property handle
handle?: boolean;
property handleBehavior
handleBehavior?: ModalHandleBehavior;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property initialBreakpoint
initialBreakpoint?: number;
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property mode
mode?: Mode;
property presentingElement
presentingElement?: HTMLElement;
property showBackdrop
showBackdrop?: boolean;
interface NavComponentWithProps
interface NavComponentWithProps<T = any> {}
property component
component: NavComponent;
property componentProps
componentProps?: ComponentProps<T> | null;
interface NavCustomEvent
interface NavCustomEvent extends CustomEvent {}
property target
target: HTMLIonNavElement;
interface NavOptions
interface NavOptions extends RouterOutletOptions {}
property delegate
delegate?: FrameworkDelegate;
property progressAnimation
progressAnimation?: boolean;
property updateURL
updateURL?: boolean;
property viewIsReady
viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
interface OverlayController
interface OverlayController {}
interface OverlayEventDetail
interface OverlayEventDetail<T = any> {}
interface OverlayInterface
interface OverlayInterface {}
property animated
animated: boolean;
property didDismiss
didDismiss: EventEmitter<OverlayEventDetail>;
property didDismissShorthand
didDismissShorthand?: EventEmitter<OverlayEventDetail>;
property didPresent
didPresent: EventEmitter<void>;
property didPresentShorthand
didPresentShorthand?: EventEmitter<void>;
property el
el: HTMLIonOverlayElement;
property enterAnimation
enterAnimation?: AnimationBuilder;
property keyboardClose
keyboardClose: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property overlayIndex
overlayIndex: number;
property presented
presented: boolean;
property willDismiss
willDismiss: EventEmitter<OverlayEventDetail>;
property willDismissShorthand
willDismissShorthand?: EventEmitter<OverlayEventDetail>;
property willPresent
willPresent: EventEmitter<void>;
property willPresentShorthand
willPresentShorthand?: EventEmitter<void>;
method dismiss
dismiss: (data?: any, role?: string) => Promise<boolean>;
method present
present: () => Promise<void>;
interface PickerButton
interface PickerButton {}
interface PickerChangeEventDetail
interface PickerChangeEventDetail {}
property inputModeColumn
inputModeColumn?: HTMLIonPickerColumnElement;
property useInputMode
useInputMode: boolean;
interface PickerColumn
interface PickerColumn {}
property align
align?: string;
property columnWidth
columnWidth?: string;
property cssClass
cssClass?: string | string[];
property name
name: string;
property options
options: PickerColumnOption[];
property optionsWidth
optionsWidth?: string;
property prefix
prefix?: string;
property prefixWidth
prefixWidth?: string;
property prevSelected
prevSelected?: number;
property selectedIndex
selectedIndex?: number;
Changing this value allows the initial value of a picker column to be set.
property suffix
suffix?: string;
property suffixWidth
suffixWidth?: string;
interface PickerColumnChangeEventDetail
interface PickerColumnChangeEventDetail {}
property value
value: PickerColumnValue;
interface PickerColumnOption
interface PickerColumnOption {}
property ariaLabel
ariaLabel?: string;
The optional text to assign as the aria-label on the picker column option.
property disabled
disabled?: boolean;
property duration
duration?: number;
property selected
selected?: boolean;
property text
text?: string;
property transform
transform?: string;
property value
value?: any;
interface PickerOptions
interface PickerOptions {}
property animated
animated?: boolean;
property backdropDismiss
backdropDismiss?: boolean;
property buttons
buttons?: PickerButton[];
property columns
columns: PickerColumn[];
property cssClass
cssClass?: string | string[];
property enterAnimation
enterAnimation?: AnimationBuilder;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property mode
mode?: Mode;
property showBackdrop
showBackdrop?: boolean;
interface PopoverOptions
interface PopoverOptions<T extends ComponentRef = ComponentRef> {}
property alignment
alignment?: PositionAlign;
property animated
animated?: boolean;
property arrow
arrow?: boolean;
property backdropDismiss
backdropDismiss?: boolean;
property component
component: T;
property componentProps
componentProps?: ComponentProps<T>;
property cssClass
cssClass?: string | string[];
property delegate
delegate?: FrameworkDelegate;
property dismissOnSelect
dismissOnSelect?: boolean;
property enterAnimation
enterAnimation?: AnimationBuilder;
property event
event?: Event;
property focusTrap
focusTrap?: boolean;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property id
id?: string;
property keyboardClose
keyboardClose?: boolean;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property mode
mode?: Mode;
property reference
reference?: PositionReference;
property showBackdrop
showBackdrop?: boolean;
property side
side?: PositionSide;
property size
size?: PopoverSize;
property translucent
translucent?: boolean;
property trigger
trigger?: string;
property triggerAction
triggerAction?: string;
interface RadioGroupChangeEventDetail
interface RadioGroupChangeEventDetail<T = any> {}
interface RadioGroupCustomEvent
interface RadioGroupCustomEvent<T = any> extends CustomEvent {}
interface RangeChangeEventDetail
interface RangeChangeEventDetail {}
property value
value: RangeValue;
interface RangeCustomEvent
interface RangeCustomEvent extends CustomEvent {}
interface RangeKnobMoveEndEventDetail
interface RangeKnobMoveEndEventDetail {}
property value
value: RangeValue;
interface RangeKnobMoveStartEventDetail
interface RangeKnobMoveStartEventDetail {}
property value
value: RangeValue;
interface RefresherCustomEvent
interface RefresherCustomEvent extends CustomEvent {}
interface RefresherEventDetail
interface RefresherEventDetail {}
method complete
complete: () => void;
interface RouteID
interface RouteID {}
interface RouterCustomEvent
interface RouterCustomEvent extends CustomEvent {}
interface RouterEventDetail
interface RouterEventDetail {}
property from
from: string | null;
property redirectedFrom
redirectedFrom: string | null;
property to
to: string;
interface RouterOutletOptions
interface RouterOutletOptions {}
property animated
animated?: boolean;
property animationBuilder
animationBuilder?: AnimationBuilder;
property deepWait
deepWait?: boolean;
property direction
direction?: NavDirection;
property duration
duration?: number;
property easing
easing?: string;
property keyboardClose
keyboardClose?: boolean;
property mode
mode?: Mode;
property progressAnimation
progressAnimation?: boolean;
property showGoBack
showGoBack?: boolean;
property skipIfBusy
skipIfBusy?: boolean;
interface RouteWrite
interface RouteWrite {}
property changed
changed: boolean;
property element
element: HTMLElement | undefined;
property markVisible
markVisible?: () => void | Promise<void>;
interface ScrollBaseCustomEvent
interface ScrollBaseCustomEvent extends CustomEvent {}
interface ScrollBaseDetail
interface ScrollBaseDetail {}
property isScrolling
isScrolling: boolean;
interface ScrollCustomEvent
interface ScrollCustomEvent extends ScrollBaseCustomEvent {}
property detail
detail: ScrollDetail;
interface ScrollDetail
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {}
property scrollLeft
scrollLeft: number;
property scrollTop
scrollTop: number;
interface SearchbarChangeEventDetail
interface SearchbarChangeEventDetail {}
interface SearchbarCustomEvent
interface SearchbarCustomEvent extends CustomEvent {}
interface SearchbarInputEventDetail
interface SearchbarInputEventDetail {}
interface SegmentChangeEventDetail
interface SegmentChangeEventDetail {}
property value
value?: SegmentValue;
interface SegmentCustomEvent
interface SegmentCustomEvent extends CustomEvent {}
interface SegmentViewScrollEvent
interface SegmentViewScrollEvent {}
property isManualScroll
isManualScroll: boolean;
property scrollRatio
scrollRatio: number;
interface SelectChangeEventDetail
interface SelectChangeEventDetail<T = any> {}
property value
value: T;
interface SelectCustomEvent
interface SelectCustomEvent<T = any> extends CustomEvent {}
interface SelectModalOption
interface SelectModalOption {}
interface SelectPopoverOption
interface SelectPopoverOption {}
interface StyleEventDetail
interface StyleEventDetail {}
index signature
[styleName: string]: boolean;
interface SwipeGestureHandler
interface SwipeGestureHandler {}
interface TabBarChangedEventDetail
interface TabBarChangedEventDetail {}
property tab
tab?: string;
interface TabButtonClickEventDetail
interface TabButtonClickEventDetail {}
interface TabsCustomEvent
interface TabsCustomEvent extends CustomEvent {}
interface TextareaChangeEventDetail
interface TextareaChangeEventDetail {}
interface TextareaCustomEvent
interface TextareaCustomEvent<T = TextareaChangeEventDetail> extends CustomEvent {}
interface TextareaInputEventDetail
interface TextareaInputEventDetail {}
interface ToastButton
interface ToastButton {}
interface ToastOptions
interface ToastOptions {}
property animated
animated?: boolean;
property buttons
buttons?: (ToastButton | string)[];
property color
color?: Color;
property cssClass
cssClass?: string | string[];
property duration
duration?: number;
property enterAnimation
enterAnimation?: AnimationBuilder;
property header
header?: string;
property htmlAttributes
htmlAttributes?: { [key: string]: any;};
property icon
icon?: string;
property id
id?: string;
property keyboardClose
keyboardClose?: boolean;
property layout
layout?: ToastLayout;
property leaveAnimation
leaveAnimation?: AnimationBuilder;
property message
message?: string | IonicSafeString;
property mode
mode?: Mode;
property position
position?: 'top' | 'bottom' | 'middle';
property positionAnchor
positionAnchor?: HTMLElement | string;
property swipeGesture
swipeGesture?: ToastSwipeGestureDirection;
property translucent
translucent?: boolean;
interface ToggleChangeEventDetail
interface ToggleChangeEventDetail<T = any> {}
interface ToggleCustomEvent
interface ToggleCustomEvent<T = any> extends CustomEvent {}
interface TransitionInstruction
interface TransitionInstruction {}
property done
done?: TransitionDoneFn;
property enteringRequiresTransition
enteringRequiresTransition?: boolean;
property insertStart
insertStart?: number;
The index where to insert views. A negative number means at the end
property insertViews
insertViews?: any[];
property leavingRequiresTransition
leavingRequiresTransition?: boolean;
property opts
opts: NavOptions | undefined | null;
property reject
reject?: (rejectReason: string) => void;
property removeCount
removeCount?: number;
The number of view to remove. A negative number means all views from removeStart
property removeStart
removeStart?: number;
The index of the first view to remove. A negative number means the last view
property removeView
removeView?: ViewController;
property resolve
resolve?: (hasCompleted: boolean) => void;
interface TransitionOptions
interface TransitionOptions extends NavOptions {}
property baseEl
baseEl: any;
property enteringEl
enteringEl: HTMLElement;
property leavingEl
leavingEl: HTMLElement | undefined;
property progressCallback
progressCallback?: (ani: Animation | undefined) => void;
Enums
Type Aliases
type AnimationBuilder
type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
type AnimationDirection
type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
type AnimationFill
type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
type AnimationKeyFrames
type AnimationKeyFrames = | [AnimationKeyFrameEdge, AnimationKeyFrameEdge] | AnimationKeyFrame[];
type AnimationLifecycle
type AnimationLifecycle = (currentStep: 0 | 1, animation: Animation) => void;
type AutocompleteTypes
type AutocompleteTypes = | 'on' | 'off' | '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-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';
type BackButtonEvent
type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
type Color
type Color = LiteralUnion<PredefinedColors, string>;
type ComponentProps
type ComponentProps<T = null> = { [key: string]: any };
type ComponentRef
type ComponentRef = Function | HTMLElement | string | null;
type ComponentTags
type ComponentTags = string;
type CounterFormatter
type CounterFormatter = (inputLength: number, maxLength: number) => string;
type CssClassMap
type CssClassMap = { [className: string]: boolean };
type DatetimeHighlight
type DatetimeHighlight = { date: string;} & DatetimeHighlightStyle;
type DatetimeHighlightCallback
type DatetimeHighlightCallback = ( dateIsoString: string) => DatetimeHighlightStyle | undefined;
type DatetimeHighlightStyle
type DatetimeHighlightStyle = | { textColor: string; backgroundColor?: string; } | { textColor?: string; backgroundColor: string; };
type DatetimeHourCycle
type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';
type DatetimePresentation
type DatetimePresentation = | 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
type FormatOptions
type FormatOptions = | { date: Intl.DateTimeFormatOptions; time?: Intl.DateTimeFormatOptions; } | { date?: Intl.DateTimeFormatOptions; time: Intl.DateTimeFormatOptions; };
FormatOptions must include date and/or time; it cannot be an empty object
type LiteralUnion
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
type MenuType
type MenuType = 'overlay' | 'reveal' | 'push';
type ModalHandleBehavior
type ModalHandleBehavior = 'none' | 'cycle';
The behavior setting for modals when the handle is pressed.
type Mode
type Mode = 'ios' | 'md';
type NavComponent
type NavComponent = ComponentRef | ViewController;
type NavDirection
type NavDirection = 'back' | 'forward';
type NavigationHookCallback
type NavigationHookCallback = () => | NavigationHookResult | Promise<NavigationHookResult>;
type PickerColumnValue
type PickerColumnValue = string | number | undefined;
type PinFormatter
type PinFormatter = (value: number) => number | string;
type PlatformConfig
type PlatformConfig = Partial<typeof PLATFORMS_MAP>;
type Platforms
type Platforms = keyof typeof PLATFORMS_MAP;
type PopoverSize
type PopoverSize = 'cover' | 'auto';
type PositionAlign
type PositionAlign = 'start' | 'center' | 'end';
type PositionReference
type PositionReference = 'trigger' | 'event';
type PositionSide
type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
type PredefinedColors
type PredefinedColors = | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
type RadioGroupCompareFn
type RadioGroupCompareFn = (currentValue: any, compareValue: any) => boolean;
type RangeValue
type RangeValue = | number | { lower: number; upper: number; };
type RouterDirection
type RouterDirection = 'forward' | 'back' | 'root';
type ScrollCallback
type ScrollCallback = (detail?: ScrollDetail) => boolean | void;
type SegmentButtonLayout
type SegmentButtonLayout = | 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
type SegmentValue
type SegmentValue = string | number;
type SelectCompareFn
type SelectCompareFn = (currentValue: any, compareValue: any) => boolean;
type SelectInterface
type SelectInterface = 'action-sheet' | 'popover' | 'alert' | 'modal';
type Side
type Side = 'start' | 'end';
type SpinnerTypes
type SpinnerTypes = keyof typeof spinners;
type TabButtonLayout
type TabButtonLayout = | 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
type TextFieldTypes
type TextFieldTypes = | 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';
type TitleSelectedDatesFormatter
type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
type ToastDismissOptions
type ToastDismissOptions = ToastPositionAlias & ToastAnimationPosition;
type ToastLayout
type ToastLayout = 'baseline' | 'stacked';
type ToastPosition
type ToastPosition = 'top' | 'bottom' | 'middle';
type ToastPresentOptions
type ToastPresentOptions = ToastPositionAlias & ToastAnimationPosition;
type ToastSwipeGestureDirection
type ToastSwipeGestureDirection = 'vertical';
type TransitionDoneFn
type TransitionDoneFn = ( hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController, leavingView?: ViewController, direction?: string) => void;
type TriggerAction
type TriggerAction = 'click' | 'hover' | 'context-menu';
Namespaces
namespace Components
namespace Components {}
interface IonAccordion
interface IonAccordion {}
property "disabled"
disabled: boolean;
If
true
, the accordion cannot be interacted with. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "readonly"
readonly: boolean;
If
true
, the accordion cannot be interacted with, but does not alter the opacity. false
property "toggleIcon"
toggleIcon: string;
The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. chevronDown
property "toggleIconSlot"
toggleIconSlot: 'start' | 'end';
The slot inside of
ion-item
to place the toggle icon. Defaults to"end"
. 'end'
property "value"
value: string;
The value of the accordion. Defaults to an autogenerated value.
ion-accordion-${accordionIds++}
interface IonAccordionGroup
interface IonAccordionGroup {}
property "animated"
animated: boolean;
If
true
, all accordions inside of the accordion group will animate when expanding or collapsing. true
property "disabled"
disabled: boolean;
If
true
, the accordion group cannot be interacted with. false
property "expand"
expand: 'compact' | 'inset';
Describes the expansion behavior for each accordion. Possible values are
"compact"
and"inset"
. Defaults to"compact"
. 'compact'
property "getAccordions"
getAccordions: () => Promise<HTMLIonAccordionElement[]>;
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple?: boolean;
If
true
, the accordion group can have multiple accordion components expanded at the same time.
property "readonly"
readonly: boolean;
If
true
, the accordion group cannot be interacted with, but does not alter the opacity. false
property "requestAccordionToggle"
requestAccordionToggle: ( accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
property "value"
value?: string | string[] | null;
The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when
multiple="true"
interface IonActionSheet
interface IonActionSheet {}
property "animated"
animated: boolean;
If
true
, the action sheet will animate. true
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the action sheet will be dismissed when the backdrop is clicked. true
property "buttons"
buttons: (ActionSheetButton | string)[];
An array of buttons for the action sheet. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the action sheet overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"
,
"destructive", "selected"
, and"backdrop"
. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the action sheet is presented.
property "hasController"
hasController: boolean;
false
property "header"
header?: string;
Title for the action sheet.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the action sheet.
property "isOpen"
isOpen: boolean;
If
true
, the action sheet will open. Iffalse
, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the action sheet dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the action sheet is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the action sheet did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the action sheet will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: () => Promise<void>;
Present the action sheet overlay after it has been created.
property "subHeader"
subHeader?: string;
Subtitle for the action sheet.
property "translucent"
translucent: boolean;
If
true
, the action sheet will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the action sheet to open when clicked.
interface IonAlert
interface IonAlert {}
property "animated"
animated: boolean;
If
true
, the alert will animate. true
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the alert will be dismissed when the backdrop is clicked. true
property "buttons"
buttons: (AlertButton | string)[];
Array of buttons to be added to the alert. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the alert overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"
,
"destructive", "selected"
, and"backdrop"
. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the alert is presented.
property "hasController"
hasController: boolean;
false
property "header"
header?: string;
The main title in the heading of the alert.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the alert.
property "inputs"
inputs: AlertInput[];
Array of input to show in the alert. []
property "isOpen"
isOpen: boolean;
If
true
, the alert will open. Iffalse
, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the alert dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the alert is dismissed.
property "message"
message?: string | IonicSafeString;
The main message to be displayed in the alert.
message
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) This property accepts custom HTML as a string. Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the alert did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the alert will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: () => Promise<void>;
Present the alert overlay after it has been created.
property "subHeader"
subHeader?: string;
The subtitle in the heading of the alert. Displayed under the title.
property "translucent"
translucent: boolean;
If
true
, the alert will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the alert to open when clicked.
interface IonApp
interface IonApp {}
property "setFocus"
setFocus: (elements: HTMLElement[]) => Promise<void>;
Used to set focus on an element that uses
ion-focusable
. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
interface IonAvatar
interface IonAvatar {}
interface IonBackButton
interface IonBackButton {}
property "color"
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).
property "defaultHref"
defaultHref?: string;
The url to navigate back to by default when there is no history.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the button. false
property "icon"
icon?: string | null;
The built-in named SVG icon name or the exact
src
of an SVG file to use for the back button.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page.
property "text"
text?: string | null;
The text to display in the back button.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonBackdrop
interface IonBackdrop {}
property "stopPropagation"
stopPropagation: boolean;
If
true
, the backdrop will stop propagation on tap. true
property "tappable"
tappable: boolean;
If
true
, the backdrop will can be clicked and will emit theionBackdropTap
event. true
property "visible"
visible: boolean;
If
true
, the backdrop will be visible. true
interface IonBadge
interface IonBadge {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonBreadcrumb
interface IonBreadcrumb {}
property "active"
active: boolean;
If
true
, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults totrue
for the last breadcrumb if it is not set on any. false
property "collapsed"
collapsed: boolean;
false
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the breadcrumb. false
property "download"
download: string | undefined;
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "last"
last: boolean;
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "separator"
separator?: boolean | undefined;
If true, show a separator between this breadcrumb and the next. Defaults to
true
for all breadcrumbs except the last.
property "showCollapsedIndicator"
showCollapsedIndicator: boolean;
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonBreadcrumbs
interface IonBreadcrumbs {}
property "color"
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).
property "itemsAfterCollapse"
itemsAfterCollapse: number;
The number of breadcrumbs to show after the collapsed indicator. If
itemsBeforeCollapse
+itemsAfterCollapse
is greater thanmaxItems
, the breadcrumbs will not be collapsed. 1
property "itemsBeforeCollapse"
itemsBeforeCollapse: number;
The number of breadcrumbs to show before the collapsed indicator. If
itemsBeforeCollapse
+itemsAfterCollapse
is greater thanmaxItems
, the breadcrumbs will not be collapsed. 1
property "maxItems"
maxItems?: number;
The maximum number of breadcrumbs to show before collapsing.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonButton
interface IonButton {}
property "buttonType"
buttonType: string;
The type of button. 'button'
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the button. false
property "download"
download: string | undefined;
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).
property "expand"
expand?: 'full' | 'block';
Set to
"block"
for a full-width button or to"full"
for a full-width button with square corners and no left or right borders.
property "fill"
fill?: 'clear' | 'outline' | 'solid' | 'default';
Set to
"clear"
for a transparent button that resembles a flat button, to"outline"
for a transparent button with a border, or to"solid"
for a button with a filled background. The default fill is"solid"
except inside of a toolbar, where the default is"clear"
.
property "form"
form?: string | HTMLFormElement;
The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "shape"
shape?: 'round';
Set to
"round"
for a button with more rounded corners.
property "size"
size?: 'small' | 'default' | 'large';
Set to
"small"
for a button with less height and padding, to"default"
for a button with the default height and padding, or to"large"
for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is"small"
by default. Set the size to"default"
inside of an item to make it a standard size button.
property "strong"
strong: boolean;
If
true
, activates a button with a heavier font weight. false
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonButtons
interface IonButtons {}
property "collapse"
collapse: boolean;
If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in
ios
mode withcollapse
set totrue
onion-header
. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) false
interface IonCard
interface IonCard {}
property "button"
button: boolean;
If
true
, a button tag will be rendered and the card will be tappable. false
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the card. false
property "download"
download: string | undefined;
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. Only used when an
onclick
orbutton
property is present. 'button'
interface IonCardContent
interface IonCardContent {}
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCardHeader
interface IonCardHeader {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent: boolean;
If
true
, the card header will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
interface IonCardSubtitle
interface IonCardSubtitle {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCardTitle
interface IonCardTitle {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCheckbox
interface IonCheckbox {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the checkbox and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkboxdisplay
toblock
.
property "checked"
checked: boolean;
If
true
, the checkbox is selected. false
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the checkbox. false
property "errorText"
errorText?: string;
Text that is placed under the checkbox label and displayed when an error is detected.
property "helperText"
helperText?: string;
Text that is placed under the checkbox label and displayed when no error is detected.
property "indeterminate"
indeterminate: boolean;
If
true
, the checkbox will visually appear as indeterminate. false
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and checkbox within a line.
"start"
: The label and checkbox will appear on the left in LTR and on the right in RTL."end"
: The label and checkbox will appear on the right in LTR and on the left in RTL."space-between"
: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkboxdisplay
toblock
.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the checkbox.
"start"
: The label will appear to the left of the checkbox in LTR and to the right in RTL."end"
: The label will appear to the right of the checkbox in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "required"
required: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "setFocus"
setFocus: () => Promise<void>;
property "value"
value: any | null;
The value of the checkbox does not mean if it's checked or not, use the
checked
property for that. The value of a checkbox is analogous to the value of an<input type="checkbox">
, it's only used when the checkbox participates in a native<form>
. 'on'
interface IonChip
interface IonChip {}
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the chip. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "outline"
outline: boolean;
Display an outline style button. false
interface IonCol
interface IonCol {}
property "offset"
offset?: string;
The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
property "offsetLg"
offsetLg?: string;
The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
property "offsetMd"
offsetMd?: string;
The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
property "offsetSm"
offsetSm?: string;
The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
property "offsetXl"
offsetXl?: string;
The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
property "offsetXs"
offsetXs?: string;
The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
property "pull"
pull?: string;
The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
property "pullLg"
pullLg?: string;
The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
property "pullMd"
pullMd?: string;
The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
property "pullSm"
pullSm?: string;
The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
property "pullXl"
pullXl?: string;
The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
property "pullXs"
pullXs?: string;
The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
property "push"
push?: string;
The amount to push the column, in terms of how many columns it should shift to the end of the total available.
property "pushLg"
pushLg?: string;
The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
property "pushMd"
pushMd?: string;
The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
property "pushSm"
pushSm?: string;
The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
property "pushXl"
pushXl?: string;
The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
property "pushXs"
pushXs?: string;
The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
property "size"
size?: string;
The size of the column, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeLg"
sizeLg?: string;
The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeMd"
sizeMd?: string;
The size of the column for md screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeSm"
sizeSm?: string;
The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeXl"
sizeXl?: string;
The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeXs"
sizeXs?: string;
The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
interface IonContent
interface IonContent {}
property "color"
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).
property "fixedSlotPlacement"
fixedSlotPlacement: 'after' | 'before';
Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to
'before'
. 'after'
property "forceOverscroll"
forceOverscroll?: boolean;
If
true
and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
property "fullscreen"
fullscreen: boolean;
If
true
, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. false
property "getBackgroundElement"
getBackgroundElement: () => Promise<HTMLElement>;
Returns the background content element.
property "getScrollElement"
getScrollElement: () => Promise<HTMLElement>;
Get the element where the actual scrolling takes place. This element can be used to subscribe to
scroll
events or manually modifyscrollTop
. However, it's recommended to use the API provided byion-content
: i.e. UsingionScroll
,ionScrollStart
,ionScrollEnd
for scrolling events andscrollToPoint()
to scroll the content into a certain point.
property "scrollByPoint"
scrollByPoint: (x: number, y: number, duration: number) => Promise<void>;
Scroll by a specified X/Y distance in the component.
Parameter x
The amount to scroll by on the horizontal axis.
Parameter y
The amount to scroll by on the vertical axis.
Parameter duration
The amount of time to take scrolling by that amount.
property "scrollEvents"
scrollEvents: boolean;
Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to
true
. false
property "scrollToBottom"
scrollToBottom: (duration?: number) => Promise<void>;
Scroll to the bottom of the component.
Parameter duration
The amount of time to take scrolling to the bottom. Defaults to
0
.
property "scrollToPoint"
scrollToPoint: ( x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>;
Scroll to a specified X/Y location in the component.
Parameter x
The point to scroll to on the horizontal axis.
Parameter y
The point to scroll to on the vertical axis.
Parameter duration
The amount of time to take scrolling to that point. Defaults to
0
.
property "scrollToTop"
scrollToTop: (duration?: number) => Promise<void>;
Scroll to the top of the component.
Parameter duration
The amount of time to take scrolling to the top. Defaults to
0
.
property "scrollX"
scrollX: boolean;
If you want to enable the content scrolling in the X axis, set this property to
true
. false
property "scrollY"
scrollY: boolean;
If you want to disable the content scrolling in the Y axis, set this property to
false
. true
interface IonDatetime
interface IonDatetime {}
property "cancel"
cancel: (closeOverlay?: boolean) => Promise<void>;
Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
property "cancelText"
cancelText: string;
The text to display on the picker's cancel button. 'Cancel'
property "clearText"
clearText: string;
The text to display on the picker's "Clear" button. 'Clear'
property "color"
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). 'primary'
property "confirm"
confirm: (closeOverlay?: boolean) => Promise<void>;
Confirms the selected datetime value, updates the
value
property, and optionally closes the popover or modal that the datetime was presented in.
property "dayValues"
dayValues?: number[] | number | string;
Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the
dayValues
input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like31
in February, it will correctly not show days which are not valid for the selected month.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the datetime. false
property "doneText"
doneText: string;
The text to display on the picker's "Done" button. 'Done'
property "firstDayOfWeek"
firstDayOfWeek: number;
The first day of the week to use for
ion-datetime
. The default value is0
and represents Sunday. 0
property "formatOptions"
formatOptions?: FormatOptions;
Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
property "highlightedDates"
highlightedDates?: DatetimeHighlight[] | DatetimeHighlightCallback;
Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the
date
,date-time
, andtime-date
presentations, withpreferWheel="false"
.
property "hourCycle"
hourCycle?: DatetimeHourCycle;
The hour cycle of the
ion-datetime
. If no value is set, this is specified by the current locale.
property "hourValues"
hourValues?: number[] | number | string;
Values used to create the list of selectable hours. By default the hour values range from
0
to23
for 24-hour, or1
to12
for 12-hour. However, to control exactly which hours to display, thehourValues
input can take a number, an array of numbers, or a string of comma separated numbers.
property "isDateEnabled"
isDateEnabled?: (dateIsoString: string) => boolean;
Returns if an individual date (calendar day) is enabled or disabled. If
true
, the day will be enabled/interactive. Iffalse
, the day will be disabled/non-interactive. The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
property "locale"
locale: string;
The locale to use for
ion-datetime
. This impacts month and day name formatting. The"default"
value refers to the default locale set by your device. 'default'
property "max"
max?: string;
The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
1996-12-19
. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as1994
. Defaults to the end of this year.
property "min"
min?: string;
The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as
1996-12-19
. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as1994
. Defaults to the beginning of the year, 100 years ago from today.
property "minuteValues"
minuteValues?: number[] | number | string;
Values used to create the list of selectable minutes. By default the minutes range from
0
to59
. However, to control exactly which minutes to display, theminuteValues
input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would beminuteValues="0,15,30,45"
.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "monthValues"
monthValues?: number[] | number | string;
Values used to create the list of selectable months. By default the month values range from
1
to12
. However, to control exactly which months to display, themonthValues
input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would bemonthValues="6,7,8"
. Note that month numbers do *not* have a zero-based index, meaning January's value is1
, and December's is12
.
property "multiple"
multiple: boolean;
If
true
, multiple dates can be selected at once. Only applies topresentation="date"
andpreferWheel="false"
. false
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "preferWheel"
preferWheel: boolean;
If
true
, a wheel picker will be rendered instead of a calendar grid where possible. Iffalse
, a calendar grid will be rendered instead of a wheel picker where possible. A wheel picker can be rendered instead of a grid whenpresentation
is one of the following values:"date"
,"date-time"
, or"time-date"
. A wheel picker will always be rendered regardless of thepreferWheel
value whenpresentation
is one of the following values:"time"
,"month"
,"month-year"
, or"year"
. false
property "presentation"
presentation: DatetimePresentation;
Which values you want to select.
"date"
will show a calendar picker to select the month, day, and year."time"
will show a time picker to select the hour, minute, and (optionally) AM/PM."date-time"
will show the date picker first and time picker second."time-date"
will show the time picker first and date picker second. 'date-time'
property "readonly"
readonly: boolean;
If
true
, the datetime appears normal but the selected date cannot be changed. false
property "reset"
reset: (startDate?: string) => Promise<void>;
Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
property "showAdjacentDays"
showAdjacentDays: boolean;
If
true
, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled. false
property "showClearButton"
showClearButton: boolean;
If
true
, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of theion-datetime
component. Developers can also use thebutton
slot if they want to customize these buttons. If custom buttons are set in thebutton
slot then the default buttons will not be rendered. false
property "showDefaultButtons"
showDefaultButtons: boolean;
If
true
, the default "Cancel" and "OK" buttons will be rendered at the bottom of theion-datetime
component. Developers can also use thebutton
slot if they want to customize these buttons. If custom buttons are set in thebutton
slot then the default buttons will not be rendered. false
property "showDefaultTimeLabel"
showDefaultTimeLabel: boolean;
If
true
, the default "Time" label will be rendered for the time selector of theion-datetime
component. Developers can also use thetime-label
slot if they want to customize this label. If a custom label is set in thetime-label
slot then the default label will not be rendered. true
property "showDefaultTitle"
showDefaultTitle: boolean;
If
true
, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date. false
property "size"
size: 'cover' | 'fixed';
If
cover
, theion-datetime
will expand to cover the full width of its container. Iffixed
, theion-datetime
will have a fixed width. 'fixed'
property "titleSelectedDatesFormatter"
titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "value"
value?: string | string[] | null;
The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when
multiple="true"
.
property "yearValues"
yearValues?: number[] | number | string;
Values used to create the list of selectable years. By default the year values range between the
min
andmax
datetime inputs. However, to control exactly which years to display, theyearValues
input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would beyearValues="2008,2012,2016,2020,2024"
.
interface IonDatetimeButton
interface IonDatetimeButton {}
property "color"
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). 'primary'
property "datetime"
datetime?: string;
The ID of the
ion-datetime
instance associated with the datetime button.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the button. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonFab
interface IonFab {}
property "activated"
activated: boolean;
If
true
, both theion-fab-button
and allion-fab-list
insideion-fab
will become active. That meansion-fab-button
will become aclose
icon andion-fab-list
will become visible. false
property "close"
close: () => Promise<void>;
Close an active FAB list container.
property "edge"
edge: boolean;
If
true
, the fab will display on the edge of the header ifvertical
is"top"
, and on the edge of the footer if it is"bottom"
. Should be used with afixed
slot. false
property "horizontal"
horizontal?: 'start' | 'end' | 'center';
Where to align the fab horizontally in the viewport.
property "toggle"
toggle: () => Promise<void>;
Opens/Closes the FAB list container.
property "vertical"
vertical?: 'top' | 'bottom' | 'center';
Where to align the fab vertically in the viewport.
interface IonFabButton
interface IonFabButton {}
property "activated"
activated: boolean;
If
true
, the fab button will be show a close icon. false
property "closeIcon"
closeIcon: string;
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. close
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the fab button. false
property "download"
download: string | undefined;
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "show"
show: boolean;
If
true
, the fab button will show when in a fab-list. false
property "size"
size?: 'small';
The size of the button. Set this to
small
in order to have a mini fab button.
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "translucent"
translucent: boolean;
If
true
, the fab button will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonFabList
interface IonFabList {}
property "activated"
activated: boolean;
If
true
, the fab list will show all fab buttons in the list. false
property "side"
side: 'start' | 'end' | 'top' | 'bottom';
The side the fab list will show on relative to the main fab button. 'bottom'
interface IonFooter
interface IonFooter {}
property "collapse"
collapse?: 'fade';
Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent: boolean;
If
true
, the footer will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, thefullscreen
attribute needs to be set on the content. false
interface IonGrid
interface IonGrid {}
property "fixed"
fixed: boolean;
If
true
, the grid will have a fixed width based on the screen size. false
interface IonHeader
interface IonHeader {}
property "collapse"
collapse?: 'condense' | 'fade';
Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent: boolean;
If
true
, the header will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, thefullscreen
attribute needs to be set on the content. false
interface IonImg
interface IonImg {}
property "alt"
alt?: string;
This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
property "src"
src?: string;
The image URL. This attribute is mandatory for the
<img>
element.
interface IonInfiniteScroll
interface IonInfiniteScroll {}
property "complete"
complete: () => Promise<void>;
Call
complete()
within theionInfinite
output event handler when your async operation has completed. For example, theloading
state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state fromloading
toenabled
.
property "disabled"
disabled: boolean;
If
true
, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. false
property "position"
position: 'top' | 'bottom';
The position of the infinite scroll element. The value can be either
top
orbottom
. 'bottom'
property "threshold"
threshold: string;
The threshold distance from the bottom of the content to call the
infinite
output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of10%
for theinfinite
output event to get called when the user has scrolled 10% from the bottom of the page. Use the value100px
when the scroll is within 100 pixels from the bottom of the page. '15%'
interface IonInfiniteScrollContent
interface IonInfiniteScrollContent {}
property "loadingSpinner"
loadingSpinner?: SpinnerTypes | null;
An animated SVG spinner that shows while loading.
property "loadingText"
loadingText?: string | IonicSafeString;
Optional text to display while loading.
loadingText
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) This property accepts custom HTML as a string. Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
interface IonInput
interface IonInput {}
property "autocapitalize"
autocapitalize: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "autocomplete"
autocomplete: AutocompleteTypes;
Indicates whether the value of the control can be automatically completed by the browser. 'off'
property "autocorrect"
autocorrect: 'on' | 'off';
Whether auto correction should be enabled when the user is entering/editing the text value. 'off'
property "autofocus"
autofocus: boolean;
Sets the [
autofocus
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information. false
property "clearInput"
clearInput: boolean;
If
true
, a clear icon will appear in the input when there is a value. Clicking it clears the input. false
property "clearInputIcon"
clearInputIcon?: string;
The icon to use for the clear button. Only applies when
clearInput
is set totrue
.
property "clearOnEdit"
clearOnEdit?: boolean;
If
true
, the value will be cleared after focus upon edit. Defaults totrue
whentype
is"password"
,false
for all other types.
property "color"
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).
property "counter"
counter: boolean;
If
true
, a character counter will display the ratio of characters used and the total character limit. Developers must also set themaxlength
property for the counter to be calculated correctly. false
property "counterFormatter"
counterFormatter?: (inputLength: number, maxLength: number) => string;
A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the input. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "errorText"
errorText?: string;
Text that is placed under the input and displayed when an error is detected.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "getInputElement"
getInputElement: () => Promise<HTMLInputElement>;
Returns the native
<input>
element used under the hood.
property "helperText"
helperText?: string;
Text that is placed under the input and displayed when no error is detected.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "label"
label?: string;
The visible label associated with the input. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the input.
"start"
: The label will appear to the left of the input in LTR and to the right in RTL."end"
: The label will appear to the right of the input in LTR and to the left in RTL."floating"
: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input."stacked"
: The label will appear smaller and above the input regardless even when the input is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). 'start'
property "max"
max?: string | number;
The maximum value, which must not be less than its minimum (min attribute) value.
property "maxlength"
maxlength?: number;
If the value of the type attribute is
text
,email
,search
,password
,tel
, orurl
, this attribute specifies the maximum number of characters that the user can enter.
property "min"
min?: string | number;
The minimum value, which must not be greater than its maximum (max attribute) value.
property "minlength"
minlength?: number;
If the value of the type attribute is
text
,email
,search
,password
,tel
, orurl
, this attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple?: boolean;
If
true
, the user can enter more than one value. This attribute applies when the type attribute is set to"email"
, otherwise it is ignored.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "pattern"
pattern?: string;
A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is
"text"
,"search"
,"tel"
,"url"
,"email"
,"date"
, or"password"
, otherwise it is ignored. When the type attribute is"date"
,pattern
will only be used in browsers that do not support the"date"
input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
property "placeholder"
placeholder?: string;
Instructional text that shows before the input has a value. This property applies only when the
type
property is set to"email"
,"number"
,"password"
,"search"
,"tel"
,"text"
, or"url"
, otherwise it is ignored.
property "readonly"
readonly: boolean;
If
true
, the user cannot modify the value. false
property "required"
required: boolean;
If
true
, the user must fill in a value before submitting a form. false
property "setFocus"
setFocus: () => Promise<void>;
Sets focus on the native
input
inion-input
. Use this method instead of the globalinput.focus()
. Developers who wish to focus an input when a page enters should callsetFocus()
in theionViewDidEnter()
lifecycle method. Developers who wish to focus an input when an overlay is presented should callsetFocus
afterdidPresent
has resolved. See [managing focus](/docs/developing/managing-focus) for more information.
property "shape"
shape?: 'round';
The shape of the input. If "round" it will have an increased border radius.
property "spellcheck"
spellcheck: boolean;
If
true
, the element will have its spelling and grammar checked. false
property "step"
step?: string;
Works with the min and max attributes to limit the increments at which a value can be set. Possible values are:
"any"
or a positive floating point number.
property "type"
type: TextFieldTypes;
The type of control to display. The default type is text. 'text'
property "value"
value?: string | number | null;
The value of the input. ''
interface IonInputOtp
interface IonInputOtp {}
property "autocapitalize"
autocapitalize: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the input. false
property "fill"
fill?: 'outline' | 'solid';
The fill for the input boxes. If
"solid"
the input boxes will have a background. If"outline"
the input boxes will be transparent with a border. 'outline'
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
. For numbers (type="number"): "numeric" For text (type="text"): "text"
property "length"
length: number;
The number of input boxes to display. 4
property "pattern"
pattern?: string;
A regex pattern string for allowed characters. Defaults based on type. For numbers (
type="number"
):"[\p{N}]"
For text (type="text"
):"[\p{L}\p{N}]"
property "readonly"
readonly: boolean;
If
true
, the user cannot modify the value. false
property "separators"
separators?: 'all' | string | number[];
Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example:
"3"
will show a separator after the 3rd input box.[1,4]
will show a separator after the 1st and 4th input boxes."all"
will show a separator between every input box.
property "setFocus"
setFocus: (index?: number) => Promise<void>;
Sets focus to an input box.
Parameter index
The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
property "shape"
shape: 'round' | 'rectangular' | 'soft';
The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius. 'round'
property "size"
size: 'small' | 'medium' | 'large';
The size of the input boxes. 'medium'
property "type"
type: 'text' | 'number';
The type of input allowed in the input boxes. 'number'
property "value"
value?: string | number | null;
The value of the input group. ''
interface IonInputPasswordToggle
interface IonInputPasswordToggle {}
property "color"
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).
property "hideIcon"
hideIcon?: string;
The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "showIcon"
showIcon?: string;
The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
property "type"
type: TextFieldTypes;
'password'
interface IonItem
interface IonItem {}
property "button"
button: boolean;
If
true
, a button tag will be rendered and the item will be tappable. false
property "color"
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).
property "detail"
detail?: boolean;
If
true
, a detail arrow will appear on the item. Defaults tofalse
unless themode
isios
and anhref
orbutton
property is present.
property "detailIcon"
detailIcon: string;
The icon to use when
detail
is set totrue
. chevronForward
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the item. false
property "download"
download: string | undefined;
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "lines"
lines?: 'full' | 'inset' | 'none';
How the bottom border should be displayed on the item.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. Only used when an
onclick
orbutton
property is present. 'button'
interface IonItemDivider
interface IonItemDivider {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "sticky"
sticky: boolean;
When it's set to
true
, the item-divider will stay visible when it reaches the top of the viewport until the nextion-item-divider
replaces it. This feature relies inposition:sticky
: https://caniuse.com/#feat=css-sticky false
interface IonItemGroup
interface IonItemGroup {}
interface IonItemOption
interface IonItemOption {}
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the item option. false
property "download"
download: string | undefined;
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).
property "expandable"
expandable: boolean;
If
true
, the option will expand to take up the available width and cover any other options. false
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonItemOptions
interface IonItemOptions {}
property "fireSwipeEvent"
fireSwipeEvent: () => Promise<void>;
property "side"
side: Side;
The side the option button should be on. Possible values:
"start"
and"end"
. If you have multipleion-item-options
, a side must be provided for each. 'end'
interface IonItemSliding
interface IonItemSliding {}
property "close"
close: () => Promise<void>;
Close the sliding item. Items can also be closed from the [List](./list).
property "closeOpened"
closeOpened: () => Promise<boolean>;
Close all of the sliding items in the list. Items can also be closed from the [List](./list).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the sliding item. false
property "getOpenAmount"
getOpenAmount: () => Promise<number>;
Get the amount the item is open in pixels.
property "getSlidingRatio"
getSlidingRatio: () => Promise<number>;
Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.
property "open"
open: (side: Side | undefined) => Promise<void>;
Open the sliding item.
Parameter side
The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
interface IonLabel
interface IonLabel {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "position"
position?: 'fixed' | 'stacked' | 'floating';
The position determines where and how the label behaves inside an item.
interface IonList
interface IonList {}
property "closeSlidingItems"
closeSlidingItems: () => Promise<boolean>;
If
ion-item-sliding
are used inside the list, this method closes any open sliding item. Returnstrue
if an actualion-item-sliding
is closed.
property "inset"
inset: boolean;
If
true
, the list will have margin around it and rounded corners. false
property "lines"
lines?: 'full' | 'inset' | 'none';
How the bottom border should be displayed on all items.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonListHeader
interface IonListHeader {}
property "color"
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).
property "lines"
lines?: 'full' | 'inset' | 'none';
How the bottom border should be displayed on the list header.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonLoading
interface IonLoading {}
property "animated"
animated: boolean;
If
true
, the loading indicator will animate. true
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the loading indicator will be dismissed when the backdrop is clicked. false
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the loading overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"
,
"destructive", "selected"
, and"backdrop"
. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "duration"
duration: number;
Number of milliseconds to wait before dismissing the loading indicator. 0
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the loading indicator is presented.
property "hasController"
hasController: boolean;
false
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the loader.
property "isOpen"
isOpen: boolean;
If
true
, the loading indicator will open. Iffalse
, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the loading indicator dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the loading indicator is dismissed.
property "message"
message?: string | IonicSafeString;
Optional text content to display in the loading indicator. This property accepts custom HTML as a string. Content is parsed as plaintext by default.
innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the loading did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the loading will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: () => Promise<void>;
Present the loading overlay after it has been created.
property "showBackdrop"
showBackdrop: boolean;
If
true
, a backdrop will be displayed behind the loading indicator. true
property "spinner"
spinner?: SpinnerTypes | null;
The name of the spinner to display.
property "translucent"
translucent: boolean;
If
true
, the loading indicator will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
interface IonMenu
interface IonMenu {}
property "close"
close: (animated?: boolean, role?: string) => Promise<boolean>;
Closes the menu. If the menu is already closed or it can't be closed, it returns
false
.
property "contentId"
contentId?: string;
The
id
of the main content. When using a router this is typicallyion-router-outlet
. When not using a router, this is typically your main view'sion-content
. This is not the id of theion-content
inside of yourion-menu
.
property "disabled"
disabled: boolean;
If
true
, the menu is disabled. false
property "isActive"
isActive: () => Promise<boolean>;
Returns
true
is the menu is active. A menu is active when it can be opened or closed, meaning it's enabled and it's not part of aion-split-pane
.
property "isOpen"
isOpen: () => Promise<boolean>;
Returns
true
is the menu is open.
property "maxEdgeStart"
maxEdgeStart: number;
The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. 50
property "menuId"
menuId?: string;
An id for the menu.
property "open"
open: (animated?: boolean) => Promise<boolean>;
Opens the menu. If the menu is already open or it can't be opened, it returns
false
.
property "setOpen"
setOpen: ( shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
Opens or closes the button. If the operation can't be completed successfully, it returns
false
.
property "side"
side: Side;
Which side of the view the menu should be placed. 'start'
property "swipeGesture"
swipeGesture: boolean;
If
true
, swiping the menu is enabled. true
property "toggle"
toggle: (animated?: boolean) => Promise<boolean>;
Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns
false
.
property "type"
type?: MenuType;
The display type of the menu. Available options:
"overlay"
,"reveal"
,"push"
.
interface IonMenuButton
interface IonMenuButton {}
property "autoHide"
autoHide: boolean;
Automatically hides the menu button when the corresponding menu is not active true
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the menu button. false
property "menu"
menu?: string;
Optional property that maps to a Menu's
menuId
prop. Can also bestart
orend
for the menu side. This is used to find the correct menu to toggle
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonMenuToggle
interface IonMenuToggle {}
property "autoHide"
autoHide: boolean;
Automatically hides the content when the corresponding menu is not active. By default, it's
true
. Change it tofalse
in order to keepion-menu-toggle
always visible regardless the state of the menu. true
property "menu"
menu?: string;
Optional property that maps to a Menu's
menuId
prop. Can also bestart
orend
for the menu side. This is used to find the correct menu to toggle. If this property is not used,ion-menu-toggle
will toggle the first menu that is active.
interface IonModal
interface IonModal {}
property "animated"
animated: boolean;
If
true
, the modal will animate. true
property "backdropBreakpoint"
backdropBreakpoint: number;
A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. 0
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the modal will be dismissed when the backdrop is clicked. true
property "breakpoints"
breakpoints?: number[];
The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the
initialBreakpoint
property. For example: [0, .25, .5, 1]
property "canDismiss"
canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>);
Determines whether or not a modal can dismiss when calling the
dismiss
method. If the value istrue
or the value's function returnstrue
, the modal will close when trying to dismiss. If the value isfalse
or the value's function returnsfalse
, the modal will not close when trying to dismiss. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to accessthis
from within the callback. true
property "component"
component?: ComponentRef;
The component to display inside of the modal.
property "componentProps"
componentProps?: ComponentProps;
The data to pass to the modal component.
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the modal overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the modal is presented.
property "expandToScroll"
expandToScroll: boolean;
Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when
breakpoints
andinitialBreakpoint
are set. Iftrue
, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. Iffalse
, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top. true
property "focusTrap"
focusTrap: boolean;
If
true
, focus will not be allowed to move outside of this overlay. Iffalse
, focus will be allowed to move outside of the overlay. In most scenarios this property should remain set totrue
. Setting this property tofalse
can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this tofalse
when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay. true
property "getCurrentBreakpoint"
getCurrentBreakpoint: () => Promise<number | undefined>;
Returns the current breakpoint of a sheet style modal
property "handle"
handle?: boolean;
The horizontal line that displays at the top of a sheet modal. It is
true
by default when setting thebreakpoints
andinitialBreakpoint
properties.
property "handleBehavior"
handleBehavior?: ModalHandleBehavior;
The interaction behavior for the sheet modal when the handle is pressed. Defaults to
"none"
, which means the modal will not change size or position when the handle is pressed. Set to"cycle"
to let the modal cycle between available breakpoints when pressed. Handle behavior is unavailable when thehandle
property is set tofalse
or when thebreakpoints
property is not set (using a fullscreen or card modal). 'none'
property "hasController"
hasController: boolean;
false
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the modal.
property "initialBreakpoint"
initialBreakpoint?: number;
A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the
breakpoints
array.
property "isOpen"
isOpen: boolean;
If
true
, the modal will open. Iffalse
, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the modal dismisses. You will need to do that in your code. false
property "keepContentsMounted"
keepContentsMounted: boolean;
If
true
, the component passed intoion-modal
will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal. Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the modal is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the modal did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the modal will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: () => Promise<void>;
Present the modal overlay after it has been created.
property "presentingElement"
presentingElement?: HTMLElement;
The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
property "setCurrentBreakpoint"
setCurrentBreakpoint: (breakpoint: number) => Promise<void>;
Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your
breakpoints
array.
property "showBackdrop"
showBackdrop: boolean;
If
true
, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM. true
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the modal to open when clicked.
interface IonNav
interface IonNav {}
property "animated"
animated: boolean;
If
true
, the nav should animate the transition of components. true
property "animation"
animation?: AnimationBuilder;
By default
ion-nav
animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition usingAnimationBuilder
functions.
property "canGoBack"
canGoBack: (view?: ViewController) => Promise<boolean>;
Returns
true
if the current view can go back.Parameter view
The view to check.
property "delegate"
delegate?: FrameworkDelegate;
property "getActive"
getActive: () => Promise<ViewController | undefined>;
Get the active view.
property "getByIndex"
getByIndex: (index: number) => Promise<ViewController | undefined>;
Get the view at the specified index.
Parameter index
The index of the view.
property "getLength"
getLength: () => Promise<number>;
Returns the number of views in the stack.
property "getPrevious"
getPrevious: (view?: ViewController) => Promise<ViewController | undefined>;
Get the previous view.
Parameter view
The view to get.
property "getRouteId"
getRouteId: () => Promise<RouteID | undefined>;
Called by to retrieve the current component.
property "insert"
insert: <T extends NavComponent>( insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
Parameter insertIndex
The index to insert the component at in the stack.
Parameter component
The component to insert into the navigation stack.
Parameter componentProps
Any properties of the component.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "insertPages"
insertPages: ( insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
Parameter insertIndex
The index to insert the components at in the stack.
Parameter insertComponents
The components to insert into the navigation stack.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "pop"
pop: (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Pop a component off of the navigation stack. Navigates back from the current component.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "popTo"
popTo: ( indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Pop to a specific index in the navigation stack.
Parameter indexOrViewCtrl
The index or view controller to pop to.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "popToRoot"
popToRoot: ( opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Navigate back to the root of the stack, no matter how far back that is.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "push"
push: <T extends NavComponent>( component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
Parameter component
The component to push onto the navigation stack.
Parameter componentProps
Any properties of the component.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "removeIndex"
removeIndex: ( startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Removes a component from the navigation stack at the specified index.
Parameter startIndex
The number to begin removal at.
Parameter removeCount
The number of components to remove.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "root"
root?: NavComponent;
Root NavComponent to load
property "rootParams"
rootParams?: ComponentProps;
Any parameters for the root component
property "setPages"
setPages: ( views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.
Parameter views
The list of views to set as the navigation stack.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "setRoot"
setRoot: <T extends NavComponent>( component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
Set the root for the current navigation stack to a component.
Parameter component
The component to set as the root of the navigation stack.
Parameter componentProps
Any properties of the component.
Parameter opts
The navigation options.
Parameter done
The transition complete function.
property "setRouteId"
setRouteId: ( id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
Called by the router to update the view.
Parameter id
The component tag.
Parameter params
The component params.
Parameter direction
A direction hint.
Parameter animation
an AnimationBuilder. the status.
property "swipeGesture"
swipeGesture?: boolean;
If the nav component should allow for swipe-to-go-back.
interface IonNavLink
interface IonNavLink {}
property "component"
component?: NavComponent;
Component to navigate to. Only used if the
routerDirection
is"forward"
or"root"
.
property "componentProps"
componentProps?: ComponentProps;
Data you want to pass to the component as props. Only used if the
"routerDirection"
is"forward"
or"root"
.
property "routerAnimation"
routerAnimation?: AnimationBuilder;
The transition animation when navigating to another page.
property "routerDirection"
routerDirection: RouterDirection;
The transition direction when navigating to another page. 'forward'
interface IonNote
interface IonNote {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonPicker
interface IonPicker {}
property "exitInputMode"
exitInputMode: () => Promise<void>;
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonPickerColumn
interface IonPickerColumn {}
property "color"
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). 'primary'
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the picker. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "numericInput"
numericInput: boolean;
If
true
, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers. false
property "scrollActiveItemIntoView"
scrollActiveItemIntoView: (smooth?: boolean) => Promise<void>;
property "setFocus"
setFocus: () => Promise<void>;
Sets focus on the scrollable container within the picker column. Use this method instead of the global
pickerColumn.focus()
.
property "setValue"
setValue: (value: PickerColumnValue) => Promise<void>;
Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
property "value"
value?: string | number;
The selected option in the picker.
interface IonPickerColumnOption
interface IonPickerColumnOption {}
property "color"
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). 'primary'
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the picker column option. false
property "value"
value?: any | null;
The text value of the option.
interface IonPickerLegacy
interface IonPickerLegacy {}
property "animated"
animated: boolean;
If
true
, the picker will animate. true
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the picker will be dismissed when the backdrop is clicked. true
property "buttons"
buttons: PickerButton[];
Array of buttons to be displayed at the top of the picker. []
property "columns"
columns: PickerColumn[];
Array of columns to be displayed in the picker. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the picker overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"
,
"destructive", "selected"
, and"backdrop"
.
property "duration"
duration: number;
Number of milliseconds to wait before dismissing the picker. 0
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the picker is presented.
property "getColumn"
getColumn: (name: string) => Promise<PickerColumn | undefined>;
Get the column that matches the specified name.
Parameter name
The name of the column.
property "hasController"
hasController: boolean;
false
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the picker.
property "isOpen"
isOpen: boolean;
If
true
, the picker will open. Iffalse
, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the picker dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the picker is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the picker did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the picker will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: () => Promise<void>;
Present the picker overlay after it has been created.
property "showBackdrop"
showBackdrop: boolean;
If
true
, a backdrop will be displayed behind the picker. true
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the picker to open when clicked.
interface IonPickerLegacyColumn
interface IonPickerLegacyColumn {}
property "col"
col: PickerColumn;
Picker column data
interface IonPopover
interface IonPopover {}
property "alignment"
alignment?: PositionAlign;
Describes how to align the popover content with the
reference
point. Defaults to"center"
forios
mode, and"start"
formd
mode.
property "animated"
animated: boolean;
If
true
, the popover will animate. true
property "arrow"
arrow: boolean;
If
true
, the popover will display an arrow that points at thereference
when running inios
mode. Does not apply inmd
mode. true
property "backdropDismiss"
backdropDismiss: boolean;
If
true
, the popover will be dismissed when the backdrop is clicked. true
property "component"
component?: ComponentRef;
The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of
ion-popover
.
property "componentProps"
componentProps?: ComponentProps;
The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: ( data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
Dismiss the popover overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
Parameter dismissParentPopover
If
true
, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults totrue
. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "dismissOnSelect"
dismissOnSelect: boolean;
If
true
, the popover will be automatically dismissed when the content has been clicked. false
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the popover is presented.
property "event"
event: any;
The event to pass to the popover animation.
property "focusTrap"
focusTrap: boolean;
If
true
, focus will not be allowed to move outside of this overlay. Iffalse
, focus will be allowed to move outside of the overlay. In most scenarios this property should remain set totrue
. Setting this property tofalse
can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this tofalse
when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay. true
property "getParentPopover"
getParentPopover: () => Promise<HTMLIonPopoverElement | null>;
property "hasController"
hasController: boolean;
false
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the popover.
property "isOpen"
isOpen: boolean;
If
true
, the popover will open. Iffalse
, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the popover dismisses. You will need to do that in your code. false
property "keepContentsMounted"
keepContentsMounted: boolean;
If
true
, the component passed intoion-popover
will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover. Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "keyboardEvents"
keyboardEvents: boolean;
false
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the popover is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the popover did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the popover will dismiss.
property "overlayIndex"
overlayIndex: number;
property "present"
present: ( event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>;
Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.
property "presentFromTrigger"
presentFromTrigger: (event?: any, focusDescendant?: boolean) => Promise<void>;
When opening a popover from a trigger, we should not be modifying the
event
prop from inside the component. Additionally, when pressing the "Right" arrow key, we need to shift focus to the first descendant in the newly presented popover.
property "reference"
reference: PositionReference;
Describes what to position the popover relative to. If
"trigger"
, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If"event"
, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY. 'trigger'
property "showBackdrop"
showBackdrop: boolean;
If
true
, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM. true
property "side"
side: PositionSide;
Describes which side of the
reference
point to position the popover on. The"start"
and"end"
values are RTL-aware, and the"left"
and"right"
values are not. 'bottom'
property "size"
size: PopoverSize;
Describes how to calculate the popover width. If
"cover"
, the popover width will match the width of the trigger. If"auto"
, the popover width will be set to a static default value. 'auto'
property "translucent"
translucent: boolean;
If
true
, the popover will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the popover to open. Use the
trigger-action
property to customize the interaction that results in the popover opening.
property "triggerAction"
triggerAction: TriggerAction;
Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the
trigger
property isundefined
. If"click"
, the popover will be presented when the trigger is left clicked. If"hover"
, the popover will be presented when a pointer hovers over the trigger. If"context-menu"
, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. 'click'
interface IonProgressBar
interface IonProgressBar {}
property "buffer"
buffer: number;
If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. 1
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "reversed"
reversed: boolean;
If true, reverse the progress bar direction. false
property "type"
type: 'determinate' | 'indeterminate';
The state of the progress bar, based on if the time the process takes is known or not. Default options are:
"determinate"
(no animation),"indeterminate"
(animate from left to right). 'determinate'
property "value"
value: number;
The value determines how much of the active bar should display when the
type
is"determinate"
. The value should be between [0, 1]. 0
interface IonRadio
interface IonRadio {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the radio and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radiodisplay
toblock
.
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the radio. false
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and radio within a line.
"start"
: The label and radio will appear on the left in LTR and on the right in RTL."end"
: The label and radio will appear on the right in LTR and on the left in RTL."space-between"
: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radiodisplay
toblock
.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the radio.
"start"
: The label will appear to the left of the radio in LTR and to the right in RTL."end"
: The label will appear to the right of the radio in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "setButtonTabindex"
setButtonTabindex: (value: number) => Promise<void>;
property "setFocus"
setFocus: (ev?: globalThis.Event) => Promise<void>;
property "value"
value?: any | null;
the value of the radio.
interface IonRadioGroup
interface IonRadioGroup {}
property "allowEmptySelection"
allowEmptySelection: boolean;
If
true
, the radios can be deselected. false
property "compareWith"
compareWith?: string | RadioGroupCompareFn | null;
This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
property "errorText"
errorText?: string;
The error text to display at the top of the radio group.
property "helperText"
helperText?: string;
The helper text to display at the top of the radio group.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "setFocus"
setFocus: () => Promise<void>;
property "value"
value?: any | null;
the value of the radio group.
interface IonRange
interface IonRange {}
property "activeBarStart"
activeBarStart?: number;
The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
property "color"
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).
property "debounce"
debounce?: number;
How long, in milliseconds, to wait to trigger the
ionInput
event after each change in the range value.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the range. false
property "dualKnobs"
dualKnobs: boolean;
Show two knobs. false
property "label"
label?: string;
The text to display as the control's label. Use this over the
label
slot if you only need plain text. Thelabel
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the range.
"start"
: The label will appear to the left of the range in LTR and to the right in RTL."end"
: The label will appear to the right of the range in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the range regardless of the direction. 'start'
property "max"
max: number;
Maximum integer value of the range. 100
property "min"
min: number;
Minimum integer value of the range. 0
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.rangeId
property "pin"
pin: boolean;
If
true
, a pin with integer value is shown when the knob is pressed. false
property "pinFormatter"
pinFormatter: PinFormatter;
A callback used to format the pin text. By default the pin text is set to
Math.round(value)
. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to accessthis
from within the callback. (value: number): number => Math.round(value)
property "snaps"
snaps: boolean;
If
true
, the knob snaps to tick marks evenly spaced based on the step property value. false
property "step"
step: number;
Specifies the value granularity. 1
property "ticks"
ticks: boolean;
If
true
, tick marks are displayed based on the step value. Only applies whensnaps
istrue
. true
property "value"
value: RangeValue;
the value of the range. 0
interface IonRefresher
interface IonRefresher {}
property "cancel"
cancel: () => Promise<void>;
Changes the refresher's state from
refreshing
tocancelling
.
property "closeDuration"
closeDuration: string;
Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher. '280ms'
property "complete"
complete: () => Promise<void>;
Call
complete()
when your async operation has completed. For example, therefreshing
state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state fromrefreshing
tocompleting
.
property "disabled"
disabled: boolean;
If
true
, the refresher will be hidden. false
property "getProgress"
getProgress: () => Promise<number>;
A number representing how far down the user has pulled. The number
0
represents the user hasn't pulled down at all. The number1
, and anything greater than1
, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than1
, then the refresh will not happen, and the content will return to it's original position.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "pullFactor"
pullFactor: number;
How much to multiply the pull speed by. To slow the pull animation down, pass a number less than
1
. To speed up the pull, pass a number greater than1
. The default value is1
which is equal to the speed of the cursor. If a negative value is passed in, the factor will be1
instead. For example: If the value passed is1.2
and the content is dragged by10
pixels, instead of10
pixels the content will be pulled by12
pixels (an increase of 20 percent). If the value passed is0.8
, the dragged amount will be8
pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher. 1
property "pullMax"
pullMax: number;
The maximum distance of the pull until the refresher will automatically go into the
refreshing
state. Defaults to the result ofpullMin + 60
. Does not apply when the refresher content uses a spinner, enabling the native refresher. this.pullMin + 60
property "pullMin"
pullMin: number;
The minimum distance the user must pull down until the refresher will go into the
refreshing
state. Does not apply when the refresher content uses a spinner, enabling the native refresher. 60
property "snapbackDuration"
snapbackDuration: string;
Time it takes the refresher to snap back to the
refreshing
state. Does not apply when the refresher content uses a spinner, enabling the native refresher. '280ms'
interface IonRefresherContent
interface IonRefresherContent {}
property "pullingIcon"
pullingIcon?: SpinnerTypes | string | null;
A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
property "pullingText"
pullingText?: string | IonicSafeString;
The text you want to display when you begin to pull down.
pullingText
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) Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "refreshingSpinner"
refreshingSpinner?: SpinnerTypes | null;
An animated SVG spinner that shows when refreshing begins
property "refreshingText"
refreshingText?: string | IonicSafeString;
The text you want to display when performing a refresh.
refreshingText
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) Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
interface IonReorder
interface IonReorder {}
interface IonReorderGroup
interface IonReorderGroup {}
property "complete"
complete: (listOrReorder?: boolean | any[]) => Promise<any>;
Completes the reorder operation. Must be called by the
ionItemReorder
event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or iftrue
is passed in, the reorder will complete and the item will remain in the position it was dragged to. Iffalse
is passed, the reorder will complete and the item will bounce back to its original position.Parameter listOrReorder
A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
property "disabled"
disabled: boolean;
If
true
, the reorder will be hidden. true
interface IonRippleEffect
interface IonRippleEffect {}
property "addRipple"
addRipple: (x: number, y: number) => Promise<() => void>;
Adds the ripple effect to the parent element.
Parameter x
The horizontal coordinate of where the ripple should start.
Parameter y
The vertical coordinate of where the ripple should start.
property "type"
type: 'bounded' | 'unbounded';
Sets the type of ripple-effect: -
bounded
: the ripple effect expands from the user's click position -unbounded
: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. 'bounded'
interface IonRoute
interface IonRoute {}
property "beforeEnter"
beforeEnter?: NavigationHookCallback;
A navigation hook that is fired when the route tries to enter. Returning
true
allows the navigation to proceed, while returningfalse
causes it to be cancelled. Returning aNavigationHookOptions
object causes the router to redirect to the path specified.
property "beforeLeave"
beforeLeave?: NavigationHookCallback;
A navigation hook that is fired when the route tries to leave. Returning
true
allows the navigation to proceed, while returningfalse
causes it to be cancelled. Returning aNavigationHookOptions
object causes the router to redirect to the path specified.
property "component"
component: string;
Name of the component to load/select in the navigation outlet (
ion-tabs
,ion-nav
) when the route matches. The value of this property is not always the tagname of the component to load, inion-tabs
it actually refers to the name of theion-tab
to select.
property "componentProps"
componentProps?: { [key: string]: any };
A key value
{ 'red': true, 'blue': 'white'}
containing props that should be passed to the defined component when rendered.
property "url"
url: string;
Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. ''
interface IonRouter
interface IonRouter {}
property "back"
back: () => Promise<void>;
Go back to previous page in the window.history.
property "canTransition"
canTransition: () => Promise<string | boolean>;
property "navChanged"
navChanged: (direction: RouterDirection) => Promise<boolean>;
property "printDebug"
printDebug: () => Promise<void>;
property "push"
push: ( path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
Navigate to the specified path.
Parameter path
The path to navigate to.
Parameter direction
The direction of the animation. Defaults to
"forward"
.
property "root"
root: string;
The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. '/'
property "useHash"
useHash: boolean;
The router can work in two "modes": - With hash:
/index.html#/path/to/page
- Without hash:/path/to/page
Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the other side hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property istrue
, change tofalse
to allow hash-less URLs. true
interface IonRouteRedirect
interface IonRouteRedirect {}
property "from"
from: string;
A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial
/
slash is not specified.
property "to"
to: string | undefined | null;
A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined
ion-route-redirect
rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined inion-router
it can't be used with another router or to perform a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value isundefined
the whole redirect route is noop, even if the "from" value matches.
interface IonRouterLink
interface IonRouterLink {}
property "color"
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "rel"
rel: string | undefined;
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).
property "routerAnimation"
routerAnimation: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonRouterOutlet
interface IonRouterOutlet {}
property "animated"
animated: boolean;
If
true
, the router-outlet should animate the transition of components. true
property "animation"
animation?: AnimationBuilder;
This property allows to create custom transition using AnimationBuilder functions.
property "commit"
commit: ( enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions) => Promise<boolean>;
property "delegate"
delegate?: FrameworkDelegate;
property "getRouteId"
getRouteId: () => Promise<RouteID | undefined>;
property "mode"
mode: 'ios' | 'md';
The mode determines which platform styles to use. getIonMode(this)
property "setRouteId"
setRouteId: ( id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
property "swipeHandler"
swipeHandler?: SwipeGestureHandler;
interface IonRow
interface IonRow {}
interface IonSearchbar
interface IonSearchbar {}
property "animated"
animated: boolean;
If
true
, enable searchbar animation. false
property "autocapitalize"
autocapitalize: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "autocomplete"
autocomplete: AutocompleteTypes;
Set the input's autocomplete property. 'off'
property "autocorrect"
autocorrect: 'on' | 'off';
Set the input's autocorrect property. 'off'
property "cancelButtonIcon"
cancelButtonIcon: string;
Set the cancel button icon. Only applies to
md
mode. Defaults toarrow-back-sharp
. config.get('backButtonIcon', arrowBackSharp) as string
property "cancelButtonText"
cancelButtonText: string;
Set the cancel button text. Only applies to
ios
mode. 'Cancel'
property "clearIcon"
clearIcon?: string;
Set the clear icon. Defaults to
close-circle
forios
andclose-sharp
formd
.
property "color"
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).
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the input. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "getInputElement"
getInputElement: () => Promise<HTMLInputElement>;
Returns the native
<input>
element used under the hood.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "maxlength"
maxlength?: number;
This attribute specifies the maximum number of characters that the user can enter.
property "minlength"
minlength?: number;
This attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
If used in a form, set the name of the control, which is submitted with the form data. this.inputId
property "placeholder"
placeholder: string;
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) 'Search'
property "searchIcon"
searchIcon?: string;
The icon to use as the search icon. Defaults to
search-outline
inios
mode andsearch-sharp
inmd
mode.
property "setFocus"
setFocus: () => Promise<void>;
Sets focus on the native
input
inion-searchbar
. Use this method instead of the globalinput.focus()
. Developers who wish to focus an input when a page enters should callsetFocus()
in theionViewDidEnter()
lifecycle method. Developers who wish to focus an input when an overlay is presented should callsetFocus
afterdidPresent
has resolved. See [managing focus](/docs/developing/managing-focus) for more information.
property "showCancelButton"
showCancelButton: 'never' | 'focus' | 'always';
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. 'never'
property "showClearButton"
showClearButton: 'never' | 'focus' | 'always';
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'
property "spellcheck"
spellcheck: boolean;
If
true
, enable spellcheck on the input. false
property "type"
type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
Set the type of the input. 'search'
property "value"
value?: string | null;
the value of the searchbar. ''
interface IonSegment
interface IonSegment {}
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the segment. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "scrollable"
scrollable: boolean;
If
true
, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. false
property "selectOnFocus"
selectOnFocus: boolean;
If
true
, navigating to anion-segment-button
with the keyboard will focus and select the element. Iffalse
, keyboard navigation will only focus theion-segment-button
element. false
property "swipeGesture"
swipeGesture: boolean;
If
true
, users will be able to swipe between segment buttons to activate them. true
property "value"
value?: SegmentValue;
the value of the segment.
interface IonSegmentButton
interface IonSegmentButton {}
property "contentId"
contentId?: string;
The
id
of the segment content.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the segment button. false
property "layout"
layout?: SegmentButtonLayout;
Set the layout of the text and icon in the segment. 'icon-top'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "setFocus"
setFocus: () => Promise<void>;
property "type"
type: 'submit' | 'reset' | 'button';
The type of the button. 'button'
property "value"
value: SegmentValue;
The value of the segment button. 'ion-sb-' + ids++
interface IonSegmentContent
interface IonSegmentContent {}
interface IonSegmentView
interface IonSegmentView {}
property "disabled"
disabled: boolean;
If
true
, the segment view cannot be interacted with. false
property "setContent"
setContent: (id: string, smoothScroll?: boolean) => Promise<void>;
Parameter id
: The id of the segment content to display.
Parameter smoothScroll
: Whether to animate the scroll transition.
interface IonSelect
interface IonSelect {}
property "cancelText"
cancelText: string;
The text to display on the cancel button. 'Cancel'
property "color"
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). This property is only available when using the modern select syntax.
property "compareWith"
compareWith?: string | SelectCompareFn | null;
This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the select. false
property "errorText"
errorText?: string;
Text that is placed under the select and displayed when an error is detected.
property "expandedIcon"
expandedIcon?: string;
The toggle icon to show when the select is open. If defined, the icon rotation behavior in
md
mode will be disabled. If undefined,toggleIcon
will be used for when the select is both open and closed.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "helperText"
helperText?: string;
Text that is placed under the select and displayed when no error is detected.
property "interface"
interface: SelectInterface;
The interface the select should use:
action-sheet
,popover
,alert
, ormodal
. 'alert'
property "interfaceOptions"
interfaceOptions: any;
Any additional options that the
alert
,action-sheet
orpopover
interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface. Note:interfaceOptions
will not overrideinputs
orbuttons
with thealert
interface. {}
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and select within a line.
justify
does not apply when the label and select are on different lines whenlabelPlacement
is set to"floating"
or"stacked"
."start"
: The label and select will appear on the left in LTR and on the right in RTL."end"
: The label and select will appear on the right in LTR and on the left in RTL."space-between"
: The label and select will appear on opposite ends of the line with space between the two elements.
property "label"
label?: string;
The visible label associated with the select. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the select.
"start"
: The label will appear to the left of the select in LTR and to the right in RTL."end"
: The label will appear to the right of the select in LTR and to the left in RTL."floating"
: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select."stacked"
: The label will appear smaller and above the select regardless even when the select is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using"floating"
or"stacked"
we recommend initializing the select with either avalue
or aplaceholder
. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple: boolean;
If
true
, the select can accept multiple values. false
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "okText"
okText: string;
The text to display on the ok button. 'OK'
property "open"
open: (event?: UIEvent) => Promise<any>;
Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the
interface
property on theion-select
.Parameter event
The user interface event that called the open.
property "placeholder"
placeholder?: string;
The text to display when the select is empty.
property "required"
required: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "selectedText"
selectedText?: string | null;
The text to display instead of the selected option's value.
property "shape"
shape?: 'round';
The shape of the select. If "round" it will have an increased border radius.
property "toggleIcon"
toggleIcon?: string;
The toggle icon to use. Defaults to
chevronExpand
forios
mode, orcaretDownSharp
formd
mode.
property "value"
value?: any | null;
The value of the select.
interface IonSelectModal
interface IonSelectModal {}
property "header"
header?: string;
property "multiple"
multiple?: boolean;
property "options"
options: SelectModalOption[];
[]
interface IonSelectOption
interface IonSelectOption {}
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the select option. This property does not apply wheninterface="action-sheet"
asion-action-sheet
does not allow for disabled buttons. false
property "value"
value?: any | null;
The text value of the option.
interface IonSelectPopover
interface IonSelectPopover {}
property "header"
header?: string;
The header text of the popover
property "message"
message?: string;
The text content of the popover body
property "multiple"
multiple?: boolean;
If true, the select accepts multiple values
property "options"
options: SelectPopoverOption[];
An array of options for the popover []
property "subHeader"
subHeader?: string;
The subheader text of the popover
interface IonSkeletonText
interface IonSkeletonText {}
property "animated"
animated: boolean;
If
true
, the skeleton text will animate. false
interface IonSpinner
interface IonSpinner {}
property "color"
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).
property "duration"
duration?: number;
Duration of the spinner animation in milliseconds. The default varies based on the spinner.
property "name"
name?: SpinnerTypes;
The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
property "paused"
paused: boolean;
If
true
, the spinner's animation will be paused. false
interface IonSplitPane
interface IonSplitPane {}
property "contentId"
contentId?: string;
The
id
of the main content. When using a router this is typicallyion-router-outlet
. When not using a router, this is typically your main view'sion-content
. This is not the id of theion-content
inside of yourion-menu
.
property "disabled"
disabled: boolean;
If
true
, the split pane will be hidden. false
property "isVisible"
isVisible: () => Promise<boolean>;
property "when"
when: string | boolean;
When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. QUERY['lg']
interface IonTab
interface IonTab {}
property "active"
active: boolean;
false
property "component"
component?: ComponentRef;
The component to display inside of the tab.
property "delegate"
delegate?: FrameworkDelegate;
property "setActive"
setActive: () => Promise<void>;
Set the active component for the tab
property "tab"
tab: string;
A tab id must be provided for each
ion-tab
. It's used internally to reference the selected tab or by the router to switch between them.
interface IonTabBar
interface IonTabBar {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "selectedTab"
selectedTab?: string;
The selected tab component
property "translucent"
translucent: boolean;
If
true
, the tab bar will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
interface IonTabButton
interface IonTabButton {}
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the tab button. false
property "download"
download: string | undefined;
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).
property "href"
href: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "layout"
layout?: TabButtonLayout;
Set the layout of the text and icon in the tab bar. It defaults to
"icon-top"
.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel: string | undefined;
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).
property "selected"
selected: boolean;
The selected tab component false
property "tab"
tab?: string;
A tab id must be provided for each
ion-tab
. It's used internally to reference the selected tab or by the router to switch between them.
property "target"
target: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonTabs
interface IonTabs {}
property "getRouteId"
getRouteId: () => Promise<RouteID | undefined>;
property "getSelected"
getSelected: () => Promise<string | undefined>;
Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
property "getTab"
getTab: ( tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
Get a specific tab by the value of its
tab
property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.Parameter tab
The tab instance to select. If passed a string, it should be the value of the tab's
tab
property.
property "select"
select: (tab: string | HTMLIonTabElement) => Promise<boolean>;
Select a tab by the value of its
tab
property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.Parameter tab
The tab instance to select. If passed a string, it should be the value of the tab's
tab
property.
property "setRouteId"
setRouteId: (id: string) => Promise<RouteWrite>;
property "useRouter"
useRouter: boolean;
false
interface IonText
interface IonText {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonTextarea
interface IonTextarea {}
property "autocapitalize"
autocapitalize: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'none'
property "autofocus"
autofocus: boolean;
Sets the [
autofocus
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information. false
property "autoGrow"
autoGrow: boolean;
If
true
, the textarea container will grow and shrink based on the contents of the textarea. false
property "clearOnEdit"
clearOnEdit: boolean;
If
true
, the value will be cleared after focus upon edit. false
property "color"
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).
property "cols"
cols?: number;
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
property "counter"
counter: boolean;
If
true
, a character counter will display the ratio of characters used and the total character limit. Developers must also set themaxlength
property for the counter to be calculated correctly. false
property "counterFormatter"
counterFormatter?: (inputLength: number, maxLength: number) => string;
A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the textarea. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "errorText"
errorText?: string;
Text that is placed under the textarea and displayed when an error is detected.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "getInputElement"
getInputElement: () => Promise<HTMLTextAreaElement>;
Returns the native
<textarea>
element used under the hood.
property "helperText"
helperText?: string;
Text that is placed under the textarea and displayed when no error is detected.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "label"
label?: string;
The visible label associated with the textarea. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the textarea.
"start"
: The label will appear to the left of the textarea in LTR and to the right in RTL."end"
: The label will appear to the right of the textarea in LTR and to the left in RTL."floating"
: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea."stacked"
: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). 'start'
property "maxlength"
maxlength?: number;
This attribute specifies the maximum number of characters that the user can enter.
property "minlength"
minlength?: number;
This attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "placeholder"
placeholder?: string;
Instructional text that shows before the input has a value.
property "readonly"
readonly: boolean;
If
true
, the user cannot modify the value. false
property "required"
required: boolean;
If
true
, the user must fill in a value before submitting a form. false
property "rows"
rows?: number;
The number of visible text lines for the control.
property "setFocus"
setFocus: () => Promise<void>;
Sets focus on the native
textarea
inion-textarea
. Use this method instead of the globaltextarea.focus()
. See [managing focus](/docs/developing/managing-focus) for more information.
property "shape"
shape?: 'round';
The shape of the textarea. If "round" it will have an increased border radius.
property "spellcheck"
spellcheck: boolean;
If
true
, the element will have its spelling and grammar checked. false
property "value"
value?: string | null;
The value of the textarea. ''
property "wrap"
wrap?: 'hard' | 'soft' | 'off';
Indicates how the control wraps text.
interface IonThumbnail
interface IonThumbnail {}
interface IonTitle
interface IonTitle {}
property "color"
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).
property "size"
size?: 'large' | 'small';
The size of the toolbar title.
interface IonToast
interface IonToast {}
property "animated"
animated: boolean;
If
true
, the toast will animate. true
property "buttons"
buttons?: (ToastButton | string)[];
An array of buttons for the toast.
property "color"
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).
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "delegate"
delegate?: FrameworkDelegate;
property "dismiss"
dismiss: (data?: any, role?: string) => Promise<boolean>;
Dismiss the toast overlay after it has been presented.
Parameter data
Any data to emit in the dismiss events.
Parameter role
The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"
,
"destructive", "selected"
, and"backdrop"
. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
property "duration"
duration: number;
How many milliseconds to wait before hiding the toast. By default, it will show until
dismiss()
is called. config.getNumber('toastDuration', 0)
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the toast is presented.
property "hasController"
hasController: boolean;
false
property "header"
header?: string;
Header to be shown in the toast.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the toast.
property "icon"
icon?: string;
The name of the icon to display, or the path to a valid SVG file. See
ion-icon
. https://ionic.io/ionicons
property "isOpen"
isOpen: boolean;
If
true
, the toast will open. Iffalse
, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the toast dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. false
property "layout"
layout: ToastLayout;
Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. 'baseline'
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the toast is dismissed.
property "message"
message?: string | IonicSafeString;
Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default.
innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the toast did dismiss.
property "onWillDismiss"
onWillDismiss: <T = any>() => Promise<OverlayEventDetail<T>>;
Returns a promise that resolves when the toast will dismiss.
property "overlayIndex"
overlayIndex: number;
property "position"
position: ToastPosition;
The starting position of the toast on the screen. Can be tweaked further using the
positionAnchor
property. 'bottom'
property "positionAnchor"
positionAnchor?: HTMLElement | string;
The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With
position="bottom"
, the toast will sit above the chosen element. Withposition="top"
, the toast will sit below the chosen element. Withposition="middle"
, the value ofpositionAnchor
is ignored.
property "present"
present: () => Promise<void>;
Present the toast overlay after it has been created.
property "swipeGesture"
swipeGesture?: ToastSwipeGestureDirection;
If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the
position
property:top
: The Toast can be swiped up to dismiss.bottom
: The Toast can be swiped down to dismiss.middle
: The Toast can be swiped up or down to dismiss.
property "translucent"
translucent: boolean;
If
true
, the toast will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger: string | undefined;
An ID corresponding to the trigger element that causes the toast to open when clicked.
interface IonToggle
interface IonToggle {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the toggle and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggledisplay
toblock
.
property "checked"
checked: boolean;
If
true
, the toggle is selected. false
property "color"
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).
property "disabled"
disabled: boolean;
If
true
, the user cannot interact with the toggle. false
property "enableOnOffLabels"
enableOnOffLabels: boolean | undefined;
Enables the on/off accessibility switch labels within the toggle. config.get('toggleOnOffLabels')
property "errorText"
errorText?: string;
Text that is placed under the toggle label and displayed when an error is detected.
property "helperText"
helperText?: string;
Text that is placed under the toggle label and displayed when no error is detected.
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and toggle within a line.
"start"
: The label and toggle will appear on the left in LTR and on the right in RTL."end"
: The label and toggle will appear on the right in LTR and on the left in RTL."space-between"
: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggledisplay
toblock
.
property "labelPlacement"
labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the input.
"start"
: The label will appear to the left of the toggle in LTR and to the right in RTL."end"
: The label will appear to the right of the toggle in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name: string;
The name of the control, which is submitted with the form data. this.inputId
property "required"
required: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "value"
value?: string | null;
The value of the toggle does not mean if it's checked or not, use the
checked
property for that. The value of a toggle is analogous to the value of a<input type="checkbox">
, it's only used when the toggle participates in a native<form>
. 'on'
interface IonToolbar
interface IonToolbar {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
namespace LocalJSX
namespace LocalJSX {}
interface IntrinsicElements
interface IntrinsicElements {}
property "ion-accordion-group"
'ion-accordion-group': IonAccordionGroup;
property "ion-accordion"
'ion-accordion': IonAccordion;
property "ion-action-sheet"
'ion-action-sheet': IonActionSheet;
property "ion-alert"
'ion-alert': IonAlert;
property "ion-app"
'ion-app': IonApp;
property "ion-avatar"
'ion-avatar': IonAvatar;
property "ion-back-button"
'ion-back-button': IonBackButton;
property "ion-backdrop"
'ion-backdrop': IonBackdrop;
property "ion-badge"
'ion-badge': IonBadge;
property "ion-breadcrumb"
'ion-breadcrumb': IonBreadcrumb;
property "ion-breadcrumbs"
'ion-breadcrumbs': IonBreadcrumbs;
property "ion-button"
'ion-button': IonButton;
property "ion-buttons"
'ion-buttons': IonButtons;
property "ion-card-content"
'ion-card-content': IonCardContent;
property "ion-card-header"
'ion-card-header': IonCardHeader;
property "ion-card-subtitle"
'ion-card-subtitle': IonCardSubtitle;
property "ion-card-title"
'ion-card-title': IonCardTitle;
property "ion-card"
'ion-card': IonCard;
property "ion-checkbox"
'ion-checkbox': IonCheckbox;
property "ion-chip"
'ion-chip': IonChip;
property "ion-col"
'ion-col': IonCol;
property "ion-content"
'ion-content': IonContent;
property "ion-datetime-button"
'ion-datetime-button': IonDatetimeButton;
property "ion-datetime"
'ion-datetime': IonDatetime;
property "ion-fab-button"
'ion-fab-button': IonFabButton;
property "ion-fab-list"
'ion-fab-list': IonFabList;
property "ion-fab"
'ion-fab': IonFab;
property "ion-footer"
'ion-footer': IonFooter;
property "ion-grid"
'ion-grid': IonGrid;
property "ion-header"
'ion-header': IonHeader;
property "ion-img"
'ion-img': IonImg;
property "ion-infinite-scroll-content"
'ion-infinite-scroll-content': IonInfiniteScrollContent;
property "ion-infinite-scroll"
'ion-infinite-scroll': IonInfiniteScroll;
property "ion-input-otp"
'ion-input-otp': IonInputOtp;
property "ion-input-password-toggle"
'ion-input-password-toggle': IonInputPasswordToggle;
property "ion-input"
'ion-input': IonInput;
property "ion-item-divider"
'ion-item-divider': IonItemDivider;
property "ion-item-group"
'ion-item-group': IonItemGroup;
property "ion-item-option"
'ion-item-option': IonItemOption;
property "ion-item-options"
'ion-item-options': IonItemOptions;
property "ion-item-sliding"
'ion-item-sliding': IonItemSliding;
property "ion-item"
'ion-item': IonItem;
property "ion-label"
'ion-label': IonLabel;
property "ion-list-header"
'ion-list-header': IonListHeader;
property "ion-list"
'ion-list': IonList;
property "ion-loading"
'ion-loading': IonLoading;
property "ion-menu-button"
'ion-menu-button': IonMenuButton;
property "ion-menu-toggle"
'ion-menu-toggle': IonMenuToggle;
property "ion-menu"
'ion-menu': IonMenu;
property "ion-modal"
'ion-modal': IonModal;
property "ion-nav-link"
'ion-nav-link': IonNavLink;
property "ion-nav"
'ion-nav': IonNav;
property "ion-note"
'ion-note': IonNote;
property "ion-picker-column-option"
'ion-picker-column-option': IonPickerColumnOption;
property "ion-picker-column"
'ion-picker-column': IonPickerColumn;
property "ion-picker-legacy-column"
'ion-picker-legacy-column': IonPickerLegacyColumn;
property "ion-picker-legacy"
'ion-picker-legacy': IonPickerLegacy;
property "ion-picker"
'ion-picker': IonPicker;
property "ion-popover"
'ion-popover': IonPopover;
property "ion-progress-bar"
'ion-progress-bar': IonProgressBar;
property "ion-radio-group"
'ion-radio-group': IonRadioGroup;
property "ion-radio"
'ion-radio': IonRadio;
property "ion-range"
'ion-range': IonRange;
property "ion-refresher-content"
'ion-refresher-content': IonRefresherContent;
property "ion-refresher"
'ion-refresher': IonRefresher;
property "ion-reorder-group"
'ion-reorder-group': IonReorderGroup;
property "ion-reorder"
'ion-reorder': IonReorder;
property "ion-ripple-effect"
'ion-ripple-effect': IonRippleEffect;
property "ion-route-redirect"
'ion-route-redirect': IonRouteRedirect;
property "ion-route"
'ion-route': IonRoute;
property "ion-router-link"
'ion-router-link': IonRouterLink;
property "ion-router-outlet"
'ion-router-outlet': IonRouterOutlet;
property "ion-router"
'ion-router': IonRouter;
property "ion-row"
'ion-row': IonRow;
property "ion-searchbar"
'ion-searchbar': IonSearchbar;
property "ion-segment-button"
'ion-segment-button': IonSegmentButton;
property "ion-segment-content"
'ion-segment-content': IonSegmentContent;
property "ion-segment-view"
'ion-segment-view': IonSegmentView;
property "ion-segment"
'ion-segment': IonSegment;
property "ion-select-modal"
'ion-select-modal': IonSelectModal;
property "ion-select-option"
'ion-select-option': IonSelectOption;
property "ion-select-popover"
'ion-select-popover': IonSelectPopover;
property "ion-select"
'ion-select': IonSelect;
property "ion-skeleton-text"
'ion-skeleton-text': IonSkeletonText;
property "ion-spinner"
'ion-spinner': IonSpinner;
property "ion-split-pane"
'ion-split-pane': IonSplitPane;
property "ion-tab-bar"
'ion-tab-bar': IonTabBar;
property "ion-tab-button"
'ion-tab-button': IonTabButton;
property "ion-tab"
'ion-tab': IonTab;
property "ion-tabs"
'ion-tabs': IonTabs;
property "ion-text"
'ion-text': IonText;
property "ion-textarea"
'ion-textarea': IonTextarea;
property "ion-thumbnail"
'ion-thumbnail': IonThumbnail;
property "ion-title"
'ion-title': IonTitle;
property "ion-toast"
'ion-toast': IonToast;
property "ion-toggle"
'ion-toggle': IonToggle;
property "ion-toolbar"
'ion-toolbar': IonToolbar;
interface IonAccordion
interface IonAccordion {}
property "disabled"
disabled?: boolean;
If
true
, the accordion cannot be interacted with. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "readonly"
readonly?: boolean;
If
true
, the accordion cannot be interacted with, but does not alter the opacity. false
property "toggleIcon"
toggleIcon?: string;
The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. chevronDown
property "toggleIconSlot"
toggleIconSlot?: 'start' | 'end';
The slot inside of
ion-item
to place the toggle icon. Defaults to"end"
. 'end'
property "value"
value?: string;
The value of the accordion. Defaults to an autogenerated value.
ion-accordion-${accordionIds++}
interface IonAccordionGroup
interface IonAccordionGroup {}
property "animated"
animated?: boolean;
If
true
, all accordions inside of the accordion group will animate when expanding or collapsing. true
property "disabled"
disabled?: boolean;
If
true
, the accordion group cannot be interacted with. false
property "expand"
expand?: 'compact' | 'inset';
Describes the expansion behavior for each accordion. Possible values are
"compact"
and"inset"
. Defaults to"compact"
. 'compact'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple?: boolean;
If
true
, the accordion group can have multiple accordion components expanded at the same time.
property "onIonChange"
onIonChange?: ( event: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
Emitted when the value property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the
value
property.
property "readonly"
readonly?: boolean;
If
true
, the accordion group cannot be interacted with, but does not alter the opacity. false
property "value"
value?: string | string[] | null;
The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when
multiple="true"
interface IonActionSheet
interface IonActionSheet {}
property "animated"
animated?: boolean;
If
true
, the action sheet will animate. true
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the action sheet will be dismissed when the backdrop is clicked. true
property "buttons"
buttons?: (ActionSheetButton | string)[];
An array of buttons for the action sheet. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the action sheet is presented.
property "header"
header?: string;
Title for the action sheet.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the action sheet.
property "isOpen"
isOpen?: boolean;
If
true
, the action sheet will open. Iffalse
, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the action sheet dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the action sheet is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonActionSheetCustomEvent<void>) => void;
Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
property "onIonActionSheetDidDismiss"
onIonActionSheetDidDismiss?: ( event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
Emitted after the action sheet has dismissed.
property "onIonActionSheetDidPresent"
onIonActionSheetDidPresent?: (event: IonActionSheetCustomEvent<void>) => void;
Emitted after the action sheet has presented.
property "onIonActionSheetWillDismiss"
onIonActionSheetWillDismiss?: ( event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
Emitted before the action sheet has dismissed.
property "onIonActionSheetWillPresent"
onIonActionSheetWillPresent?: (event: IonActionSheetCustomEvent<void>) => void;
Emitted before the action sheet has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonActionSheetCustomEvent<void>) => void;
Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.
property "subHeader"
subHeader?: string;
Subtitle for the action sheet.
property "translucent"
translucent?: boolean;
If
true
, the action sheet will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the action sheet to open when clicked.
interface IonAlert
interface IonAlert {}
property "animated"
animated?: boolean;
If
true
, the alert will animate. true
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the alert will be dismissed when the backdrop is clicked. true
property "buttons"
buttons?: (AlertButton | string)[];
Array of buttons to be added to the alert. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the alert is presented.
property "header"
header?: string;
The main title in the heading of the alert.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the alert.
property "inputs"
inputs?: AlertInput[];
Array of input to show in the alert. []
property "isOpen"
isOpen?: boolean;
If
true
, the alert will open. Iffalse
, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the alert dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the alert is dismissed.
property "message"
message?: string | IonicSafeString;
The main message to be displayed in the alert.
message
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) This property accepts custom HTML as a string. Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonAlertCustomEvent<void>) => void;
Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.
property "onIonAlertDidDismiss"
onIonAlertDidDismiss?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
Emitted after the alert has dismissed.
property "onIonAlertDidPresent"
onIonAlertDidPresent?: (event: IonAlertCustomEvent<void>) => void;
Emitted after the alert has presented.
property "onIonAlertWillDismiss"
onIonAlertWillDismiss?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
Emitted before the alert has dismissed.
property "onIonAlertWillPresent"
onIonAlertWillPresent?: (event: IonAlertCustomEvent<void>) => void;
Emitted before the alert has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonAlertCustomEvent<void>) => void;
Emitted before the alert has presented. Shorthand for ionAlertWillPresent.
property "subHeader"
subHeader?: string;
The subtitle in the heading of the alert. Displayed under the title.
property "translucent"
translucent?: boolean;
If
true
, the alert will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the alert to open when clicked.
interface IonApp
interface IonApp {}
interface IonAvatar
interface IonAvatar {}
interface IonBackButton
interface IonBackButton {}
property "color"
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).
property "defaultHref"
defaultHref?: string;
The url to navigate back to by default when there is no history.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the button. false
property "icon"
icon?: string | null;
The built-in named SVG icon name or the exact
src
of an SVG file to use for the back button.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page.
property "text"
text?: string | null;
The text to display in the back button.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonBackdrop
interface IonBackdrop {}
property "onIonBackdropTap"
onIonBackdropTap?: (event: IonBackdropCustomEvent<void>) => void;
Emitted when the backdrop is tapped.
property "stopPropagation"
stopPropagation?: boolean;
If
true
, the backdrop will stop propagation on tap. true
property "tappable"
tappable?: boolean;
If
true
, the backdrop will can be clicked and will emit theionBackdropTap
event. true
property "visible"
visible?: boolean;
If
true
, the backdrop will be visible. true
interface IonBadge
interface IonBadge {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonBreadcrumb
interface IonBreadcrumb {}
property "active"
active?: boolean;
If
true
, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults totrue
for the last breadcrumb if it is not set on any. false
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the breadcrumb. false
property "download"
download?: string | undefined;
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonBlur"
onIonBlur?: (event: IonBreadcrumbCustomEvent<void>) => void;
Emitted when the breadcrumb loses focus.
property "onIonFocus"
onIonFocus?: (event: IonBreadcrumbCustomEvent<void>) => void;
Emitted when the breadcrumb has focus.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "separator"
separator?: boolean | undefined;
If true, show a separator between this breadcrumb and the next. Defaults to
true
for all breadcrumbs except the last.
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonBreadcrumbs
interface IonBreadcrumbs {}
property "color"
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).
property "itemsAfterCollapse"
itemsAfterCollapse?: number;
The number of breadcrumbs to show after the collapsed indicator. If
itemsBeforeCollapse
+itemsAfterCollapse
is greater thanmaxItems
, the breadcrumbs will not be collapsed. 1
property "itemsBeforeCollapse"
itemsBeforeCollapse?: number;
The number of breadcrumbs to show before the collapsed indicator. If
itemsBeforeCollapse
+itemsAfterCollapse
is greater thanmaxItems
, the breadcrumbs will not be collapsed. 1
property "maxItems"
maxItems?: number;
The maximum number of breadcrumbs to show before collapsing.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonCollapsedClick"
onIonCollapsedClick?: ( event: IonBreadcrumbsCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
Emitted when the collapsed indicator is clicked on.
interface IonButton
interface IonButton {}
property "buttonType"
buttonType?: string;
The type of button. 'button'
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the button. false
property "download"
download?: string | undefined;
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).
property "expand"
expand?: 'full' | 'block';
Set to
"block"
for a full-width button or to"full"
for a full-width button with square corners and no left or right borders.
property "fill"
fill?: 'clear' | 'outline' | 'solid' | 'default';
Set to
"clear"
for a transparent button that resembles a flat button, to"outline"
for a transparent button with a border, or to"solid"
for a button with a filled background. The default fill is"solid"
except inside of a toolbar, where the default is"clear"
.
property "form"
form?: string | HTMLFormElement;
The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonBlur"
onIonBlur?: (event: IonButtonCustomEvent<void>) => void;
Emitted when the button loses focus.
property "onIonFocus"
onIonFocus?: (event: IonButtonCustomEvent<void>) => void;
Emitted when the button has focus.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "shape"
shape?: 'round';
Set to
"round"
for a button with more rounded corners.
property "size"
size?: 'small' | 'default' | 'large';
Set to
"small"
for a button with less height and padding, to"default"
for a button with the default height and padding, or to"large"
for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is"small"
by default. Set the size to"default"
inside of an item to make it a standard size button.
property "strong"
strong?: boolean;
If
true
, activates a button with a heavier font weight. false
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonButtons
interface IonButtons {}
property "collapse"
collapse?: boolean;
If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in
ios
mode withcollapse
set totrue
onion-header
. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) false
interface IonCard
interface IonCard {}
property "button"
button?: boolean;
If
true
, a button tag will be rendered and the card will be tappable. false
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the card. false
property "download"
download?: string | undefined;
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. Only used when an
onclick
orbutton
property is present. 'button'
interface IonCardContent
interface IonCardContent {}
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCardHeader
interface IonCardHeader {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent?: boolean;
If
true
, the card header will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
interface IonCardSubtitle
interface IonCardSubtitle {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCardTitle
interface IonCardTitle {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonCheckbox
interface IonCheckbox {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the checkbox and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkboxdisplay
toblock
.
property "checked"
checked?: boolean;
If
true
, the checkbox is selected. false
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the checkbox. false
property "errorText"
errorText?: string;
Text that is placed under the checkbox label and displayed when an error is detected.
property "helperText"
helperText?: string;
Text that is placed under the checkbox label and displayed when no error is detected.
property "indeterminate"
indeterminate?: boolean;
If
true
, the checkbox will visually appear as indeterminate. false
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and checkbox within a line.
"start"
: The label and checkbox will appear on the left in LTR and on the right in RTL."end"
: The label and checkbox will appear on the right in LTR and on the left in RTL."space-between"
: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkboxdisplay
toblock
.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the checkbox.
"start"
: The label will appear to the left of the checkbox in LTR and to the right in RTL."end"
: The label will appear to the right of the checkbox in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonCheckboxCustomEvent<void>) => void;
Emitted when the checkbox loses focus.
property "onIonChange"
onIonChange?: (event: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the
checked
property.
property "onIonFocus"
onIonFocus?: (event: IonCheckboxCustomEvent<void>) => void;
Emitted when the checkbox has focus.
property "required"
required?: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "value"
value?: any | null;
The value of the checkbox does not mean if it's checked or not, use the
checked
property for that. The value of a checkbox is analogous to the value of an<input type="checkbox">
, it's only used when the checkbox participates in a native<form>
. 'on'
interface IonChip
interface IonChip {}
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the chip. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "outline"
outline?: boolean;
Display an outline style button. false
interface IonCol
interface IonCol {}
property "offset"
offset?: string;
The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
property "offsetLg"
offsetLg?: string;
The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
property "offsetMd"
offsetMd?: string;
The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
property "offsetSm"
offsetSm?: string;
The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
property "offsetXl"
offsetXl?: string;
The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
property "offsetXs"
offsetXs?: string;
The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
property "pull"
pull?: string;
The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
property "pullLg"
pullLg?: string;
The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
property "pullMd"
pullMd?: string;
The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
property "pullSm"
pullSm?: string;
The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
property "pullXl"
pullXl?: string;
The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
property "pullXs"
pullXs?: string;
The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
property "push"
push?: string;
The amount to push the column, in terms of how many columns it should shift to the end of the total available.
property "pushLg"
pushLg?: string;
The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
property "pushMd"
pushMd?: string;
The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
property "pushSm"
pushSm?: string;
The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
property "pushXl"
pushXl?: string;
The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
property "pushXs"
pushXs?: string;
The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
property "size"
size?: string;
The size of the column, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeLg"
sizeLg?: string;
The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeMd"
sizeMd?: string;
The size of the column for md screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeSm"
sizeSm?: string;
The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeXl"
sizeXl?: string;
The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
property "sizeXs"
sizeXs?: string;
The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If
"auto"
is passed, the column will be the size of its content.
interface IonContent
interface IonContent {}
property "color"
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).
property "fixedSlotPlacement"
fixedSlotPlacement?: 'after' | 'before';
Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to
'before'
. 'after'
property "forceOverscroll"
forceOverscroll?: boolean;
If
true
and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
property "fullscreen"
fullscreen?: boolean;
If
true
, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. false
property "onIonScroll"
onIonScroll?: (event: IonContentCustomEvent<ScrollDetail>) => void;
Emitted while scrolling. This event is disabled by default. Set
scrollEvents
totrue
to enable.
property "onIonScrollEnd"
onIonScrollEnd?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
Emitted when the scroll has ended. This event is disabled by default. Set
scrollEvents
totrue
to enable.
property "onIonScrollStart"
onIonScrollStart?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
Emitted when the scroll has started. This event is disabled by default. Set
scrollEvents
totrue
to enable.
property "scrollEvents"
scrollEvents?: boolean;
Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to
true
. false
property "scrollX"
scrollX?: boolean;
If you want to enable the content scrolling in the X axis, set this property to
true
. false
property "scrollY"
scrollY?: boolean;
If you want to disable the content scrolling in the Y axis, set this property to
false
. true
interface IonDatetime
interface IonDatetime {}
property "cancelText"
cancelText?: string;
The text to display on the picker's cancel button. 'Cancel'
property "clearText"
clearText?: string;
The text to display on the picker's "Clear" button. 'Clear'
property "color"
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). 'primary'
property "dayValues"
dayValues?: number[] | number | string;
Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the
dayValues
input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like31
in February, it will correctly not show days which are not valid for the selected month.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the datetime. false
property "doneText"
doneText?: string;
The text to display on the picker's "Done" button. 'Done'
property "firstDayOfWeek"
firstDayOfWeek?: number;
The first day of the week to use for
ion-datetime
. The default value is0
and represents Sunday. 0
property "formatOptions"
formatOptions?: FormatOptions;
Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
property "highlightedDates"
highlightedDates?: DatetimeHighlight[] | DatetimeHighlightCallback;
Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the
date
,date-time
, andtime-date
presentations, withpreferWheel="false"
.
property "hourCycle"
hourCycle?: DatetimeHourCycle;
The hour cycle of the
ion-datetime
. If no value is set, this is specified by the current locale.
property "hourValues"
hourValues?: number[] | number | string;
Values used to create the list of selectable hours. By default the hour values range from
0
to23
for 24-hour, or1
to12
for 12-hour. However, to control exactly which hours to display, thehourValues
input can take a number, an array of numbers, or a string of comma separated numbers.
property "isDateEnabled"
isDateEnabled?: (dateIsoString: string) => boolean;
Returns if an individual date (calendar day) is enabled or disabled. If
true
, the day will be enabled/interactive. Iffalse
, the day will be disabled/non-interactive. The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
property "locale"
locale?: string;
The locale to use for
ion-datetime
. This impacts month and day name formatting. The"default"
value refers to the default locale set by your device. 'default'
property "max"
max?: string;
The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
1996-12-19
. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as1994
. Defaults to the end of this year.
property "min"
min?: string;
The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as
1996-12-19
. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as1994
. Defaults to the beginning of the year, 100 years ago from today.
property "minuteValues"
minuteValues?: number[] | number | string;
Values used to create the list of selectable minutes. By default the minutes range from
0
to59
. However, to control exactly which minutes to display, theminuteValues
input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would beminuteValues="0,15,30,45"
.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "monthValues"
monthValues?: number[] | number | string;
Values used to create the list of selectable months. By default the month values range from
1
to12
. However, to control exactly which months to display, themonthValues
input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would bemonthValues="6,7,8"
. Note that month numbers do *not* have a zero-based index, meaning January's value is1
, and December's is12
.
property "multiple"
multiple?: boolean;
If
true
, multiple dates can be selected at once. Only applies topresentation="date"
andpreferWheel="false"
. false
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonDatetimeCustomEvent<void>) => void;
Emitted when the datetime loses focus.
property "onIonCancel"
onIonCancel?: (event: IonDatetimeCustomEvent<void>) => void;
Emitted when the datetime selection was cancelled.
property "onIonChange"
onIonChange?: (event: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => void;
Emitted when the value (selected date) has changed. This event will not emit when programmatically setting the
value
property.
property "onIonFocus"
onIonFocus?: (event: IonDatetimeCustomEvent<void>) => void;
Emitted when the datetime has focus.
property "preferWheel"
preferWheel?: boolean;
If
true
, a wheel picker will be rendered instead of a calendar grid where possible. Iffalse
, a calendar grid will be rendered instead of a wheel picker where possible. A wheel picker can be rendered instead of a grid whenpresentation
is one of the following values:"date"
,"date-time"
, or"time-date"
. A wheel picker will always be rendered regardless of thepreferWheel
value whenpresentation
is one of the following values:"time"
,"month"
,"month-year"
, or"year"
. false
property "presentation"
presentation?: DatetimePresentation;
Which values you want to select.
"date"
will show a calendar picker to select the month, day, and year."time"
will show a time picker to select the hour, minute, and (optionally) AM/PM."date-time"
will show the date picker first and time picker second."time-date"
will show the time picker first and date picker second. 'date-time'
property "readonly"
readonly?: boolean;
If
true
, the datetime appears normal but the selected date cannot be changed. false
property "showAdjacentDays"
showAdjacentDays?: boolean;
If
true
, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled. false
property "showClearButton"
showClearButton?: boolean;
If
true
, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of theion-datetime
component. Developers can also use thebutton
slot if they want to customize these buttons. If custom buttons are set in thebutton
slot then the default buttons will not be rendered. false
property "showDefaultButtons"
showDefaultButtons?: boolean;
If
true
, the default "Cancel" and "OK" buttons will be rendered at the bottom of theion-datetime
component. Developers can also use thebutton
slot if they want to customize these buttons. If custom buttons are set in thebutton
slot then the default buttons will not be rendered. false
property "showDefaultTimeLabel"
showDefaultTimeLabel?: boolean;
If
true
, the default "Time" label will be rendered for the time selector of theion-datetime
component. Developers can also use thetime-label
slot if they want to customize this label. If a custom label is set in thetime-label
slot then the default label will not be rendered. true
property "showDefaultTitle"
showDefaultTitle?: boolean;
If
true
, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date. false
property "size"
size?: 'cover' | 'fixed';
If
cover
, theion-datetime
will expand to cover the full width of its container. Iffixed
, theion-datetime
will have a fixed width. 'fixed'
property "titleSelectedDatesFormatter"
titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "value"
value?: string | string[] | null;
The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when
multiple="true"
.
property "yearValues"
yearValues?: number[] | number | string;
Values used to create the list of selectable years. By default the year values range between the
min
andmax
datetime inputs. However, to control exactly which years to display, theyearValues
input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would beyearValues="2008,2012,2016,2020,2024"
.
interface IonDatetimeButton
interface IonDatetimeButton {}
property "color"
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). 'primary'
property "datetime"
datetime?: string;
The ID of the
ion-datetime
instance associated with the datetime button.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the button. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonFab
interface IonFab {}
property "activated"
activated?: boolean;
If
true
, both theion-fab-button
and allion-fab-list
insideion-fab
will become active. That meansion-fab-button
will become aclose
icon andion-fab-list
will become visible. false
property "edge"
edge?: boolean;
If
true
, the fab will display on the edge of the header ifvertical
is"top"
, and on the edge of the footer if it is"bottom"
. Should be used with afixed
slot. false
property "horizontal"
horizontal?: 'start' | 'end' | 'center';
Where to align the fab horizontally in the viewport.
property "vertical"
vertical?: 'top' | 'bottom' | 'center';
Where to align the fab vertically in the viewport.
interface IonFabButton
interface IonFabButton {}
property "activated"
activated?: boolean;
If
true
, the fab button will be show a close icon. false
property "closeIcon"
closeIcon?: string;
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. close
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the fab button. false
property "download"
download?: string | undefined;
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonBlur"
onIonBlur?: (event: IonFabButtonCustomEvent<void>) => void;
Emitted when the button loses focus.
property "onIonFocus"
onIonFocus?: (event: IonFabButtonCustomEvent<void>) => void;
Emitted when the button has focus.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "show"
show?: boolean;
If
true
, the fab button will show when in a fab-list. false
property "size"
size?: 'small';
The size of the button. Set this to
small
in order to have a mini fab button.
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "translucent"
translucent?: boolean;
If
true
, the fab button will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonFabList
interface IonFabList {}
property "activated"
activated?: boolean;
If
true
, the fab list will show all fab buttons in the list. false
property "side"
side?: 'start' | 'end' | 'top' | 'bottom';
The side the fab list will show on relative to the main fab button. 'bottom'
interface IonFooter
interface IonFooter {}
property "collapse"
collapse?: 'fade';
Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent?: boolean;
If
true
, the footer will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, thefullscreen
attribute needs to be set on the content. false
interface IonGrid
interface IonGrid {}
property "fixed"
fixed?: boolean;
If
true
, the grid will have a fixed width based on the screen size. false
interface IonHeader
interface IonHeader {}
property "collapse"
collapse?: 'condense' | 'fade';
Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "translucent"
translucent?: boolean;
If
true
, the header will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, thefullscreen
attribute needs to be set on the content. false
interface IonImg
interface IonImg {}
property "alt"
alt?: string;
This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
property "onIonError"
onIonError?: (event: IonImgCustomEvent<void>) => void;
Emitted when the img fails to load
property "onIonImgDidLoad"
onIonImgDidLoad?: (event: IonImgCustomEvent<void>) => void;
Emitted when the image has finished loading
property "onIonImgWillLoad"
onIonImgWillLoad?: (event: IonImgCustomEvent<void>) => void;
Emitted when the img src has been set
property "src"
src?: string;
The image URL. This attribute is mandatory for the
<img>
element.
interface IonInfiniteScroll
interface IonInfiniteScroll {}
property "disabled"
disabled?: boolean;
If
true
, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. false
property "onIonInfinite"
onIonInfinite?: (event: IonInfiniteScrollCustomEvent<void>) => void;
Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's
complete()
method when your async operation has completed.
property "position"
position?: 'top' | 'bottom';
The position of the infinite scroll element. The value can be either
top
orbottom
. 'bottom'
property "threshold"
threshold?: string;
The threshold distance from the bottom of the content to call the
infinite
output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of10%
for theinfinite
output event to get called when the user has scrolled 10% from the bottom of the page. Use the value100px
when the scroll is within 100 pixels from the bottom of the page. '15%'
interface IonInfiniteScrollContent
interface IonInfiniteScrollContent {}
property "loadingSpinner"
loadingSpinner?: SpinnerTypes | null;
An animated SVG spinner that shows while loading.
property "loadingText"
loadingText?: string | IonicSafeString;
Optional text to display while loading.
loadingText
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) This property accepts custom HTML as a string. Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
interface IonInput
interface IonInput {}
property "autocapitalize"
autocapitalize?: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "autocomplete"
autocomplete?: AutocompleteTypes;
Indicates whether the value of the control can be automatically completed by the browser. 'off'
property "autocorrect"
autocorrect?: 'on' | 'off';
Whether auto correction should be enabled when the user is entering/editing the text value. 'off'
property "autofocus"
autofocus?: boolean;
Sets the [
autofocus
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information. false
property "clearInput"
clearInput?: boolean;
If
true
, a clear icon will appear in the input when there is a value. Clicking it clears the input. false
property "clearInputIcon"
clearInputIcon?: string;
The icon to use for the clear button. Only applies when
clearInput
is set totrue
.
property "clearOnEdit"
clearOnEdit?: boolean;
If
true
, the value will be cleared after focus upon edit. Defaults totrue
whentype
is"password"
,false
for all other types.
property "color"
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).
property "counter"
counter?: boolean;
If
true
, a character counter will display the ratio of characters used and the total character limit. Developers must also set themaxlength
property for the counter to be calculated correctly. false
property "counterFormatter"
counterFormatter?: (inputLength: number, maxLength: number) => string;
A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the input. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "errorText"
errorText?: string;
Text that is placed under the input and displayed when an error is detected.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "helperText"
helperText?: string;
Text that is placed under the input and displayed when no error is detected.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "label"
label?: string;
The visible label associated with the input. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the input.
"start"
: The label will appear to the left of the input in LTR and to the right in RTL."end"
: The label will appear to the right of the input in LTR and to the left in RTL."floating"
: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input."stacked"
: The label will appear smaller and above the input regardless even when the input is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). 'start'
property "max"
max?: string | number;
The maximum value, which must not be less than its minimum (min attribute) value.
property "maxlength"
maxlength?: number;
If the value of the type attribute is
text
,email
,search
,password
,tel
, orurl
, this attribute specifies the maximum number of characters that the user can enter.
property "min"
min?: string | number;
The minimum value, which must not be greater than its maximum (max attribute) value.
property "minlength"
minlength?: number;
If the value of the type attribute is
text
,email
,search
,password
,tel
, orurl
, this attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple?: boolean;
If
true
, the user can enter more than one value. This attribute applies when the type attribute is set to"email"
, otherwise it is ignored.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonInputCustomEvent<FocusEvent>) => void;
Emitted when the input loses focus.
property "onIonChange"
onIonChange?: (event: IonInputCustomEvent<InputChangeEventDetail>) => void;
The
ionChange
event is fired when the user modifies the input's value. Unlike theionInput
event, theionChange
event is only fired when changes are committed, not as the user types. Depending on the way the users interacts with the element, theionChange
event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for<ion-input type="date">
, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing. This event will not emit when programmatically setting thevalue
property.
property "onIonFocus"
onIonFocus?: (event: IonInputCustomEvent<FocusEvent>) => void;
Emitted when the input has focus.
property "onIonInput"
onIonInput?: (event: IonInputCustomEvent<InputInputEventDetail>) => void;
The
ionInput
event is fired each time the user modifies the input's value. Unlike theionChange
event, theionInput
event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types. For elements that accept text input (type=text
,type=tel
, etc.), the interface is [InputEvent
](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [Event
](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type isnull
.
property "pattern"
pattern?: string;
A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is
"text"
,"search"
,"tel"
,"url"
,"email"
,"date"
, or"password"
, otherwise it is ignored. When the type attribute is"date"
,pattern
will only be used in browsers that do not support the"date"
input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
property "placeholder"
placeholder?: string;
Instructional text that shows before the input has a value. This property applies only when the
type
property is set to"email"
,"number"
,"password"
,"search"
,"tel"
,"text"
, or"url"
, otherwise it is ignored.
property "readonly"
readonly?: boolean;
If
true
, the user cannot modify the value. false
property "required"
required?: boolean;
If
true
, the user must fill in a value before submitting a form. false
property "shape"
shape?: 'round';
The shape of the input. If "round" it will have an increased border radius.
property "spellcheck"
spellcheck?: boolean;
If
true
, the element will have its spelling and grammar checked. false
property "step"
step?: string;
Works with the min and max attributes to limit the increments at which a value can be set. Possible values are:
"any"
or a positive floating point number.
property "type"
type?: TextFieldTypes;
The type of control to display. The default type is text. 'text'
property "value"
value?: string | number | null;
The value of the input. ''
interface IonInputOtp
interface IonInputOtp {}
property "autocapitalize"
autocapitalize?: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the input. false
property "fill"
fill?: 'outline' | 'solid';
The fill for the input boxes. If
"solid"
the input boxes will have a background. If"outline"
the input boxes will be transparent with a border. 'outline'
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
. For numbers (type="number"): "numeric" For text (type="text"): "text"
property "length"
length?: number;
The number of input boxes to display. 4
property "onIonBlur"
onIonBlur?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
Emitted when the input group loses focus.
property "onIonChange"
onIonChange?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
The
ionChange
event is fired when the user modifies the input's value. Unlike theionInput
event, theionChange
event is only fired when changes are committed, not as the user types. TheionChange
event fires when the<ion-input-otp>
component loses focus after its value has changed. This event will not emit when programmatically setting thevalue
property.
property "onIonComplete"
onIonComplete?: ( event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
Emitted when all input boxes have been filled with valid values.
property "onIonFocus"
onIonFocus?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
Emitted when the input group has focus.
property "onIonInput"
onIonInput?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
The
ionInput
event is fired each time the user modifies the input's value. Unlike theionChange
event, theionInput
event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types. For elements that accept text input (type=text
,type=tel
, etc.), the interface is [InputEvent
](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [Event
](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type isnull
.
property "pattern"
pattern?: string;
A regex pattern string for allowed characters. Defaults based on type. For numbers (
type="number"
):"[\p{N}]"
For text (type="text"
):"[\p{L}\p{N}]"
property "readonly"
readonly?: boolean;
If
true
, the user cannot modify the value. false
property "separators"
separators?: 'all' | string | number[];
Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example:
"3"
will show a separator after the 3rd input box.[1,4]
will show a separator after the 1st and 4th input boxes."all"
will show a separator between every input box.
property "shape"
shape?: 'round' | 'rectangular' | 'soft';
The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius. 'round'
property "size"
size?: 'small' | 'medium' | 'large';
The size of the input boxes. 'medium'
property "type"
type?: 'text' | 'number';
The type of input allowed in the input boxes. 'number'
property "value"
value?: string | number | null;
The value of the input group. ''
interface IonInputPasswordToggle
interface IonInputPasswordToggle {}
property "color"
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).
property "hideIcon"
hideIcon?: string;
The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "showIcon"
showIcon?: string;
The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
interface IonItem
interface IonItem {}
property "button"
button?: boolean;
If
true
, a button tag will be rendered and the item will be tappable. false
property "color"
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).
property "detail"
detail?: boolean;
If
true
, a detail arrow will appear on the item. Defaults tofalse
unless themode
isios
and anhref
orbutton
property is present.
property "detailIcon"
detailIcon?: string;
The icon to use when
detail
is set totrue
. chevronForward
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the item. false
property "download"
download?: string | undefined;
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "lines"
lines?: 'full' | 'inset' | 'none';
How the bottom border should be displayed on the item.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. Only used when an
onclick
orbutton
property is present. 'button'
interface IonItemDivider
interface IonItemDivider {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "sticky"
sticky?: boolean;
When it's set to
true
, the item-divider will stay visible when it reaches the top of the viewport until the nextion-item-divider
replaces it. This feature relies inposition:sticky
: https://caniuse.com/#feat=css-sticky false
interface IonItemGroup
interface IonItemGroup {}
interface IonItemOption
interface IonItemOption {}
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the item option. false
property "download"
download?: string | undefined;
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).
property "expandable"
expandable?: boolean;
If
true
, the option will expand to take up the available width and cover any other options. false
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel?: string | undefined;
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).
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonItemOptions
interface IonItemOptions {}
property "onIonSwipe"
onIonSwipe?: (event: IonItemOptionsCustomEvent<any>) => void;
Emitted when the item has been fully swiped.
property "side"
side?: Side;
The side the option button should be on. Possible values:
"start"
and"end"
. If you have multipleion-item-options
, a side must be provided for each. 'end'
interface IonItemSliding
interface IonItemSliding {}
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the sliding item. false
property "onIonDrag"
onIonDrag?: (event: IonItemSlidingCustomEvent<any>) => void;
Emitted when the sliding position changes.
interface IonLabel
interface IonLabel {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "position"
position?: 'fixed' | 'stacked' | 'floating';
The position determines where and how the label behaves inside an item.
interface IonList
interface IonList {}
interface IonListHeader
interface IonListHeader {}
property "color"
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).
property "lines"
lines?: 'full' | 'inset' | 'none';
How the bottom border should be displayed on the list header.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonLoading
interface IonLoading {}
property "animated"
animated?: boolean;
If
true
, the loading indicator will animate. true
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the loading indicator will be dismissed when the backdrop is clicked. false
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "duration"
duration?: number;
Number of milliseconds to wait before dismissing the loading indicator. 0
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the loading indicator is presented.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the loader.
property "isOpen"
isOpen?: boolean;
If
true
, the loading indicator will open. Iffalse
, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the loading indicator dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the loading indicator is dismissed.
property "message"
message?: string | IonicSafeString;
Optional text content to display in the loading indicator. This property accepts custom HTML as a string. Content is parsed as plaintext by default.
innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonLoadingCustomEvent<void>) => void;
Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.
property "onIonLoadingDidDismiss"
onIonLoadingDidDismiss?: ( event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
Emitted after the loading has dismissed.
property "onIonLoadingDidPresent"
onIonLoadingDidPresent?: (event: IonLoadingCustomEvent<void>) => void;
Emitted after the loading has presented.
property "onIonLoadingWillDismiss"
onIonLoadingWillDismiss?: ( event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
Emitted before the loading has dismissed.
property "onIonLoadingWillPresent"
onIonLoadingWillPresent?: (event: IonLoadingCustomEvent<void>) => void;
Emitted before the loading has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonLoadingCustomEvent<void>) => void;
Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.
property "showBackdrop"
showBackdrop?: boolean;
If
true
, a backdrop will be displayed behind the loading indicator. true
property "spinner"
spinner?: SpinnerTypes | null;
The name of the spinner to display.
property "translucent"
translucent?: boolean;
If
true
, the loading indicator will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
interface IonMenu
interface IonMenu {}
property "contentId"
contentId?: string;
The
id
of the main content. When using a router this is typicallyion-router-outlet
. When not using a router, this is typically your main view'sion-content
. This is not the id of theion-content
inside of yourion-menu
.
property "disabled"
disabled?: boolean;
If
true
, the menu is disabled. false
property "maxEdgeStart"
maxEdgeStart?: number;
The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. 50
property "menuId"
menuId?: string;
An id for the menu.
property "onIonDidClose"
onIonDidClose?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
Emitted when the menu is closed.
property "onIonDidOpen"
onIonDidOpen?: (event: IonMenuCustomEvent<void>) => void;
Emitted when the menu is open.
property "onIonWillClose"
onIonWillClose?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
Emitted when the menu is about to be closed.
property "onIonWillOpen"
onIonWillOpen?: (event: IonMenuCustomEvent<void>) => void;
Emitted when the menu is about to be opened.
property "side"
side?: Side;
Which side of the view the menu should be placed. 'start'
property "swipeGesture"
swipeGesture?: boolean;
If
true
, swiping the menu is enabled. true
property "type"
type?: MenuType;
The display type of the menu. Available options:
"overlay"
,"reveal"
,"push"
.
interface IonMenuButton
interface IonMenuButton {}
property "autoHide"
autoHide?: boolean;
Automatically hides the menu button when the corresponding menu is not active true
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the menu button. false
property "menu"
menu?: string;
Optional property that maps to a Menu's
menuId
prop. Can also bestart
orend
for the menu side. This is used to find the correct menu to toggle
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
interface IonMenuToggle
interface IonMenuToggle {}
property "autoHide"
autoHide?: boolean;
Automatically hides the content when the corresponding menu is not active. By default, it's
true
. Change it tofalse
in order to keepion-menu-toggle
always visible regardless the state of the menu. true
property "menu"
menu?: string;
Optional property that maps to a Menu's
menuId
prop. Can also bestart
orend
for the menu side. This is used to find the correct menu to toggle. If this property is not used,ion-menu-toggle
will toggle the first menu that is active.
interface IonModal
interface IonModal {}
property "animated"
animated?: boolean;
If
true
, the modal will animate. true
property "backdropBreakpoint"
backdropBreakpoint?: number;
A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. 0
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the modal will be dismissed when the backdrop is clicked. true
property "breakpoints"
breakpoints?: number[];
The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the
initialBreakpoint
property. For example: [0, .25, .5, 1]
property "canDismiss"
canDismiss?: boolean | ((data?: any, role?: string) => Promise<boolean>);
Determines whether or not a modal can dismiss when calling the
dismiss
method. If the value istrue
or the value's function returnstrue
, the modal will close when trying to dismiss. If the value isfalse
or the value's function returnsfalse
, the modal will not close when trying to dismiss. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to accessthis
from within the callback. true
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the modal is presented.
property "expandToScroll"
expandToScroll?: boolean;
Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when
breakpoints
andinitialBreakpoint
are set. Iftrue
, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. Iffalse
, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top. true
property "focusTrap"
focusTrap?: boolean;
If
true
, focus will not be allowed to move outside of this overlay. Iffalse
, focus will be allowed to move outside of the overlay. In most scenarios this property should remain set totrue
. Setting this property tofalse
can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this tofalse
when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay. true
property "handle"
handle?: boolean;
The horizontal line that displays at the top of a sheet modal. It is
true
by default when setting thebreakpoints
andinitialBreakpoint
properties.
property "handleBehavior"
handleBehavior?: ModalHandleBehavior;
The interaction behavior for the sheet modal when the handle is pressed. Defaults to
"none"
, which means the modal will not change size or position when the handle is pressed. Set to"cycle"
to let the modal cycle between available breakpoints when pressed. Handle behavior is unavailable when thehandle
property is set tofalse
or when thebreakpoints
property is not set (using a fullscreen or card modal). 'none'
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the modal.
property "initialBreakpoint"
initialBreakpoint?: number;
A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the
breakpoints
array.
property "isOpen"
isOpen?: boolean;
If
true
, the modal will open. Iffalse
, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the modal dismisses. You will need to do that in your code. false
property "keepContentsMounted"
keepContentsMounted?: boolean;
If
true
, the component passed intoion-modal
will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal. Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the modal is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonModalCustomEvent<void>) => void;
Emitted after the modal has presented. Shorthand for ionModalDidPresent.
property "onIonBreakpointDidChange"
onIonBreakpointDidChange?: ( event: IonModalCustomEvent<ModalBreakpointChangeEventDetail>) => void;
Emitted after the modal breakpoint has changed.
property "onIonModalDidDismiss"
onIonModalDidDismiss?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
Emitted after the modal has dismissed.
property "onIonModalDidPresent"
onIonModalDidPresent?: (event: IonModalCustomEvent<void>) => void;
Emitted after the modal has presented.
property "onIonModalWillDismiss"
onIonModalWillDismiss?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
Emitted before the modal has dismissed.
property "onIonModalWillPresent"
onIonModalWillPresent?: (event: IonModalCustomEvent<void>) => void;
Emitted before the modal has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonModalCustomEvent<void>) => void;
Emitted before the modal has presented. Shorthand for ionModalWillPresent.
property "presentingElement"
presentingElement?: HTMLElement;
The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
property "showBackdrop"
showBackdrop?: boolean;
If
true
, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM. true
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the modal to open when clicked.
interface IonNav
interface IonNav {}
property "animated"
animated?: boolean;
If
true
, the nav should animate the transition of components. true
property "animation"
animation?: AnimationBuilder;
By default
ion-nav
animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition usingAnimationBuilder
functions.
property "onIonNavDidChange"
onIonNavDidChange?: (event: IonNavCustomEvent<void>) => void;
Event fired when the nav has changed components
property "onIonNavWillChange"
onIonNavWillChange?: (event: IonNavCustomEvent<void>) => void;
Event fired when the nav will change components
property "root"
root?: NavComponent;
Root NavComponent to load
property "rootParams"
rootParams?: ComponentProps;
Any parameters for the root component
property "swipeGesture"
swipeGesture?: boolean;
If the nav component should allow for swipe-to-go-back.
interface IonNavLink
interface IonNavLink {}
property "component"
component?: NavComponent;
Component to navigate to. Only used if the
routerDirection
is"forward"
or"root"
.
property "componentProps"
componentProps?: ComponentProps;
Data you want to pass to the component as props. Only used if the
"routerDirection"
is"forward"
or"root"
.
property "routerAnimation"
routerAnimation?: AnimationBuilder;
The transition animation when navigating to another page.
property "routerDirection"
routerDirection?: RouterDirection;
The transition direction when navigating to another page. 'forward'
interface IonNote
interface IonNote {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonPicker
interface IonPicker {}
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonPickerColumn
interface IonPickerColumn {}
property "color"
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). 'primary'
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the picker. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonChange"
onIonChange?: ( event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
Emitted when the value has changed. This event will not emit when programmatically setting the
value
property.
property "value"
value?: string | number;
The selected option in the picker.
interface IonPickerColumnOption
interface IonPickerColumnOption {}
property "color"
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). 'primary'
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the picker column option. false
property "value"
value?: any | null;
The text value of the option.
interface IonPickerLegacy
interface IonPickerLegacy {}
property "animated"
animated?: boolean;
If
true
, the picker will animate. true
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the picker will be dismissed when the backdrop is clicked. true
property "buttons"
buttons?: PickerButton[];
Array of buttons to be displayed at the top of the picker. []
property "columns"
columns?: PickerColumn[];
Array of columns to be displayed in the picker. []
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "duration"
duration?: number;
Number of milliseconds to wait before dismissing the picker. 0
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the picker is presented.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the picker.
property "isOpen"
isOpen?: boolean;
If
true
, the picker will open. Iffalse
, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the picker dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the picker is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonPickerLegacyCustomEvent<void>) => void;
Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
property "onIonPickerDidDismiss"
onIonPickerDidDismiss?: ( event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
Emitted after the picker has dismissed.
property "onIonPickerDidPresent"
onIonPickerDidPresent?: (event: IonPickerLegacyCustomEvent<void>) => void;
Emitted after the picker has presented.
property "onIonPickerWillDismiss"
onIonPickerWillDismiss?: ( event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
Emitted before the picker has dismissed.
property "onIonPickerWillPresent"
onIonPickerWillPresent?: (event: IonPickerLegacyCustomEvent<void>) => void;
Emitted before the picker has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonPickerLegacyCustomEvent<void>) => void;
Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
property "showBackdrop"
showBackdrop?: boolean;
If
true
, a backdrop will be displayed behind the picker. true
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the picker to open when clicked.
interface IonPickerLegacyColumn
interface IonPickerLegacyColumn {}
property "col"
col: PickerColumn;
Picker column data
interface IonPopover
interface IonPopover {}
property "alignment"
alignment?: PositionAlign;
Describes how to align the popover content with the
reference
point. Defaults to"center"
forios
mode, and"start"
formd
mode.
property "animated"
animated?: boolean;
If
true
, the popover will animate. true
property "arrow"
arrow?: boolean;
If
true
, the popover will display an arrow that points at thereference
when running inios
mode. Does not apply inmd
mode. true
property "backdropDismiss"
backdropDismiss?: boolean;
If
true
, the popover will be dismissed when the backdrop is clicked. true
property "component"
component?: ComponentRef;
The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of
ion-popover
.
property "componentProps"
componentProps?: ComponentProps;
The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
property "dismissOnSelect"
dismissOnSelect?: boolean;
If
true
, the popover will be automatically dismissed when the content has been clicked. false
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the popover is presented.
property "event"
event?: any;
The event to pass to the popover animation.
property "focusTrap"
focusTrap?: boolean;
If
true
, focus will not be allowed to move outside of this overlay. Iffalse
, focus will be allowed to move outside of the overlay. In most scenarios this property should remain set totrue
. Setting this property tofalse
can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this tofalse
when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay. true
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the popover.
property "isOpen"
isOpen?: boolean;
If
true
, the popover will open. Iffalse
, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the popover dismisses. You will need to do that in your code. false
property "keepContentsMounted"
keepContentsMounted?: boolean;
If
true
, the component passed intoion-popover
will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover. Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. true
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the popover is dismissed.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonPopoverCustomEvent<void>) => void;
Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
property "onIonPopoverDidDismiss"
onIonPopoverDidDismiss?: ( event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
Emitted after the popover has dismissed.
property "onIonPopoverDidPresent"
onIonPopoverDidPresent?: (event: IonPopoverCustomEvent<void>) => void;
Emitted after the popover has presented.
property "onIonPopoverWillDismiss"
onIonPopoverWillDismiss?: ( event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
Emitted before the popover has dismissed.
property "onIonPopoverWillPresent"
onIonPopoverWillPresent?: (event: IonPopoverCustomEvent<void>) => void;
Emitted before the popover has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonPopoverCustomEvent<void>) => void;
Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
property "reference"
reference?: PositionReference;
Describes what to position the popover relative to. If
"trigger"
, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If"event"
, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY. 'trigger'
property "showBackdrop"
showBackdrop?: boolean;
If
true
, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM. true
property "side"
side?: PositionSide;
Describes which side of the
reference
point to position the popover on. The"start"
and"end"
values are RTL-aware, and the"left"
and"right"
values are not. 'bottom'
property "size"
size?: PopoverSize;
Describes how to calculate the popover width. If
"cover"
, the popover width will match the width of the trigger. If"auto"
, the popover width will be set to a static default value. 'auto'
property "translucent"
translucent?: boolean;
If
true
, the popover will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the popover to open. Use the
trigger-action
property to customize the interaction that results in the popover opening.
property "triggerAction"
triggerAction?: TriggerAction;
Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the
trigger
property isundefined
. If"click"
, the popover will be presented when the trigger is left clicked. If"hover"
, the popover will be presented when a pointer hovers over the trigger. If"context-menu"
, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. 'click'
interface IonProgressBar
interface IonProgressBar {}
property "buffer"
buffer?: number;
If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. 1
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "reversed"
reversed?: boolean;
If true, reverse the progress bar direction. false
property "type"
type?: 'determinate' | 'indeterminate';
The state of the progress bar, based on if the time the process takes is known or not. Default options are:
"determinate"
(no animation),"indeterminate"
(animate from left to right). 'determinate'
property "value"
value?: number;
The value determines how much of the active bar should display when the
type
is"determinate"
. The value should be between [0, 1]. 0
interface IonRadio
interface IonRadio {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the radio and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radiodisplay
toblock
.
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the radio. false
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and radio within a line.
"start"
: The label and radio will appear on the left in LTR and on the right in RTL."end"
: The label and radio will appear on the right in LTR and on the left in RTL."space-between"
: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radiodisplay
toblock
.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the radio.
"start"
: The label will appear to the left of the radio in LTR and to the right in RTL."end"
: The label will appear to the right of the radio in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonRadioCustomEvent<void>) => void;
Emitted when the radio button loses focus.
property "onIonFocus"
onIonFocus?: (event: IonRadioCustomEvent<void>) => void;
Emitted when the radio button has focus.
property "value"
value?: any | null;
the value of the radio.
interface IonRadioGroup
interface IonRadioGroup {}
property "allowEmptySelection"
allowEmptySelection?: boolean;
If
true
, the radios can be deselected. false
property "compareWith"
compareWith?: string | RadioGroupCompareFn | null;
This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
property "errorText"
errorText?: string;
The error text to display at the top of the radio group.
property "helperText"
helperText?: string;
The helper text to display at the top of the radio group.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonChange"
onIonChange?: ( event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
Emitted when the value has changed. This event will not emit when programmatically setting the
value
property.
property "value"
value?: any | null;
the value of the radio group.
interface IonRange
interface IonRange {}
property "activeBarStart"
activeBarStart?: number;
The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
property "color"
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).
property "debounce"
debounce?: number;
How long, in milliseconds, to wait to trigger the
ionInput
event after each change in the range value.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the range. false
property "dualKnobs"
dualKnobs?: boolean;
Show two knobs. false
property "label"
label?: string;
The text to display as the control's label. Use this over the
label
slot if you only need plain text. Thelabel
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the range.
"start"
: The label will appear to the left of the range in LTR and to the right in RTL."end"
: The label will appear to the right of the range in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the range regardless of the direction. 'start'
property "max"
max?: number;
Maximum integer value of the range. 100
property "min"
min?: number;
Minimum integer value of the range. 0
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.rangeId
property "onIonBlur"
onIonBlur?: (event: IonRangeCustomEvent<void>) => void;
Emitted when the range loses focus.
property "onIonChange"
onIonChange?: (event: IonRangeCustomEvent<RangeChangeEventDetail>) => void;
The
ionChange
event is fired for<ion-range>
elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows This event will not emit when programmatically setting thevalue
property.
property "onIonFocus"
onIonFocus?: (event: IonRangeCustomEvent<void>) => void;
Emitted when the range has focus.
property "onIonInput"
onIonInput?: (event: IonRangeCustomEvent<RangeChangeEventDetail>) => void;
The
ionInput
event is fired for<ion-range>
elements when the value is modified. UnlikeionChange
,ionInput
is fired continuously while the user is dragging the knob.
property "onIonKnobMoveEnd"
onIonKnobMoveEnd?: ( event: IonRangeCustomEvent<RangeKnobMoveEndEventDetail>) => void;
Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
property "onIonKnobMoveStart"
onIonKnobMoveStart?: ( event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
property "pin"
pin?: boolean;
If
true
, a pin with integer value is shown when the knob is pressed. false
property "pinFormatter"
pinFormatter?: PinFormatter;
A callback used to format the pin text. By default the pin text is set to
Math.round(value)
. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to accessthis
from within the callback. (value: number): number => Math.round(value)
property "snaps"
snaps?: boolean;
If
true
, the knob snaps to tick marks evenly spaced based on the step property value. false
property "step"
step?: number;
Specifies the value granularity. 1
property "ticks"
ticks?: boolean;
If
true
, tick marks are displayed based on the step value. Only applies whensnaps
istrue
. true
property "value"
value?: RangeValue;
the value of the range. 0
interface IonRefresher
interface IonRefresher {}
property "closeDuration"
closeDuration?: string;
Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher. '280ms'
property "disabled"
disabled?: boolean;
If
true
, the refresher will be hidden. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonPull"
onIonPull?: (event: IonRefresherCustomEvent<void>) => void;
Emitted while the user is pulling down the content and exposing the refresher.
property "onIonRefresh"
onIonRefresh?: (event: IonRefresherCustomEvent<RefresherEventDetail>) => void;
Emitted when the user lets go of the content and has pulled down further than the
pullMin
or pulls the content down and exceeds the pullMax. Updates the refresher state torefreshing
. Thecomplete()
method should be called when the async operation has completed.
property "onIonStart"
onIonStart?: (event: IonRefresherCustomEvent<void>) => void;
Emitted when the user begins to start pulling down.
property "pullFactor"
pullFactor?: number;
How much to multiply the pull speed by. To slow the pull animation down, pass a number less than
1
. To speed up the pull, pass a number greater than1
. The default value is1
which is equal to the speed of the cursor. If a negative value is passed in, the factor will be1
instead. For example: If the value passed is1.2
and the content is dragged by10
pixels, instead of10
pixels the content will be pulled by12
pixels (an increase of 20 percent). If the value passed is0.8
, the dragged amount will be8
pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher. 1
property "pullMax"
pullMax?: number;
The maximum distance of the pull until the refresher will automatically go into the
refreshing
state. Defaults to the result ofpullMin + 60
. Does not apply when the refresher content uses a spinner, enabling the native refresher. this.pullMin + 60
property "pullMin"
pullMin?: number;
The minimum distance the user must pull down until the refresher will go into the
refreshing
state. Does not apply when the refresher content uses a spinner, enabling the native refresher. 60
property "snapbackDuration"
snapbackDuration?: string;
Time it takes the refresher to snap back to the
refreshing
state. Does not apply when the refresher content uses a spinner, enabling the native refresher. '280ms'
interface IonRefresherContent
interface IonRefresherContent {}
property "pullingIcon"
pullingIcon?: SpinnerTypes | string | null;
A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
property "pullingText"
pullingText?: string | IonicSafeString;
The text you want to display when you begin to pull down.
pullingText
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) Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "refreshingSpinner"
refreshingSpinner?: SpinnerTypes | null;
An animated SVG spinner that shows when refreshing begins
property "refreshingText"
refreshingText?: string | IonicSafeString;
The text you want to display when performing a refresh.
refreshingText
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) Content is parsed as plaintext by default.innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
interface IonReorder
interface IonReorder {}
interface IonReorderGroup
interface IonReorderGroup {}
property "disabled"
disabled?: boolean;
If
true
, the reorder will be hidden. true
property "onIonItemReorder"
onIonItemReorder?: ( event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the
complete()
method then needs to be called in order to finalize the reorder action.
interface IonRippleEffect
interface IonRippleEffect {}
property "type"
type?: 'bounded' | 'unbounded';
Sets the type of ripple-effect: -
bounded
: the ripple effect expands from the user's click position -unbounded
: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. 'bounded'
interface IonRoute
interface IonRoute {}
property "beforeEnter"
beforeEnter?: NavigationHookCallback;
A navigation hook that is fired when the route tries to enter. Returning
true
allows the navigation to proceed, while returningfalse
causes it to be cancelled. Returning aNavigationHookOptions
object causes the router to redirect to the path specified.
property "beforeLeave"
beforeLeave?: NavigationHookCallback;
A navigation hook that is fired when the route tries to leave. Returning
true
allows the navigation to proceed, while returningfalse
causes it to be cancelled. Returning aNavigationHookOptions
object causes the router to redirect to the path specified.
property "component"
component: string;
Name of the component to load/select in the navigation outlet (
ion-tabs
,ion-nav
) when the route matches. The value of this property is not always the tagname of the component to load, inion-tabs
it actually refers to the name of theion-tab
to select.
property "componentProps"
componentProps?: { [key: string]: any };
A key value
{ 'red': true, 'blue': 'white'}
containing props that should be passed to the defined component when rendered.
property "onIonRouteDataChanged"
onIonRouteDataChanged?: (event: IonRouteCustomEvent<any>) => void;
Used internally by
ion-router
to know when this route did change.
property "url"
url?: string;
Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. ''
interface IonRouter
interface IonRouter {}
property "onIonRouteDidChange"
onIonRouteDidChange?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
Emitted when the route had changed
property "onIonRouteWillChange"
onIonRouteWillChange?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
Event emitted when the route is about to change
property "root"
root?: string;
The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. '/'
property "useHash"
useHash?: boolean;
The router can work in two "modes": - With hash:
/index.html#/path/to/page
- Without hash:/path/to/page
Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the other side hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property istrue
, change tofalse
to allow hash-less URLs. true
interface IonRouteRedirect
interface IonRouteRedirect {}
property "from"
from: string;
A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial
/
slash is not specified.
property "onIonRouteRedirectChanged"
onIonRouteRedirectChanged?: (event: IonRouteRedirectCustomEvent<any>) => void;
Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.
ion-router
captures this event in order to update his internal registry of router rules.
property "to"
to: string | undefined | null;
A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined
ion-route-redirect
rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined inion-router
it can't be used with another router or to perform a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value isundefined
the whole redirect route is noop, even if the "from" value matches.
interface IonRouterLink
interface IonRouterLink {}
property "color"
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "rel"
rel?: string | undefined;
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).
property "routerAnimation"
routerAnimation?: AnimationBuilder | undefined;
When using a router, it specifies the transition animation when navigating to another page using
href
.
property "routerDirection"
routerDirection?: RouterDirection;
When using a router, it specifies the transition direction when navigating to another page using
href
. 'forward'
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonRouterOutlet
interface IonRouterOutlet {}
property "animated"
animated?: boolean;
If
true
, the router-outlet should animate the transition of components. true
property "animation"
animation?: AnimationBuilder;
This property allows to create custom transition using AnimationBuilder functions.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use. getIonMode(this)
interface IonRow
interface IonRow {}
interface IonSearchbar
interface IonSearchbar {}
property "animated"
animated?: boolean;
If
true
, enable searchbar animation. false
property "autocapitalize"
autocapitalize?: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'off'
property "autocomplete"
autocomplete?: AutocompleteTypes;
Set the input's autocomplete property. 'off'
property "autocorrect"
autocorrect?: 'on' | 'off';
Set the input's autocorrect property. 'off'
property "cancelButtonIcon"
cancelButtonIcon?: string;
Set the cancel button icon. Only applies to
md
mode. Defaults toarrow-back-sharp
. config.get('backButtonIcon', arrowBackSharp) as string
property "cancelButtonText"
cancelButtonText?: string;
Set the cancel button text. Only applies to
ios
mode. 'Cancel'
property "clearIcon"
clearIcon?: string;
Set the clear icon. Defaults to
close-circle
forios
andclose-sharp
formd
.
property "color"
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).
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the input. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "maxlength"
maxlength?: number;
This attribute specifies the maximum number of characters that the user can enter.
property "minlength"
minlength?: number;
This attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
If used in a form, set the name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonSearchbarCustomEvent<void>) => void;
Emitted when the input loses focus.
property "onIonCancel"
onIonCancel?: (event: IonSearchbarCustomEvent<void>) => void;
Emitted when the cancel button is clicked.
property "onIonChange"
onIonChange?: ( event: IonSearchbarCustomEvent<SearchbarChangeEventDetail>) => void;
The
ionChange
event is fired for<ion-searchbar>
elements when the user modifies the element's value. Unlike theionInput
event, theionChange
event is not necessarily fired for each alteration to an element's value. TheionChange
event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed.ionChange
can also fire when clicking the clear or cancel buttons. This event will not emit when programmatically setting thevalue
property.
property "onIonClear"
onIonClear?: (event: IonSearchbarCustomEvent<void>) => void;
Emitted when the clear input button is clicked.
property "onIonFocus"
onIonFocus?: (event: IonSearchbarCustomEvent<void>) => void;
Emitted when the input has focus.
property "onIonInput"
onIonInput?: (event: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => void;
Emitted when the
value
of theion-searchbar
element has changed.
property "placeholder"
placeholder?: string;
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) 'Search'
property "searchIcon"
searchIcon?: string;
The icon to use as the search icon. Defaults to
search-outline
inios
mode andsearch-sharp
inmd
mode.
property "showCancelButton"
showCancelButton?: 'never' | 'focus' | 'always';
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. 'never'
property "showClearButton"
showClearButton?: 'never' | 'focus' | 'always';
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'
property "spellcheck"
spellcheck?: boolean;
If
true
, enable spellcheck on the input. false
property "type"
type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
Set the type of the input. 'search'
property "value"
value?: string | null;
the value of the searchbar. ''
interface IonSegment
interface IonSegment {}
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the segment. false
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onIonChange"
onIonChange?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
Emitted when the value property has changed and any dragging pointer has been released from
ion-segment
. This event will not emit when programmatically setting thevalue
property.
property "scrollable"
scrollable?: boolean;
If
true
, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. false
property "selectOnFocus"
selectOnFocus?: boolean;
If
true
, navigating to anion-segment-button
with the keyboard will focus and select the element. Iffalse
, keyboard navigation will only focus theion-segment-button
element. false
property "swipeGesture"
swipeGesture?: boolean;
If
true
, users will be able to swipe between segment buttons to activate them. true
property "value"
value?: SegmentValue;
the value of the segment.
interface IonSegmentButton
interface IonSegmentButton {}
property "contentId"
contentId?: string;
The
id
of the segment content.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the segment button. false
property "layout"
layout?: SegmentButtonLayout;
Set the layout of the text and icon in the segment. 'icon-top'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "type"
type?: 'submit' | 'reset' | 'button';
The type of the button. 'button'
property "value"
value?: SegmentValue;
The value of the segment button. 'ion-sb-' + ids++
interface IonSegmentContent
interface IonSegmentContent {}
interface IonSegmentView
interface IonSegmentView {}
property "disabled"
disabled?: boolean;
If
true
, the segment view cannot be interacted with. false
property "onIonSegmentViewScroll"
onIonSegmentViewScroll?: ( event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
Emitted when the segment view is scrolled.
interface IonSelect
interface IonSelect {}
property "cancelText"
cancelText?: string;
The text to display on the cancel button. 'Cancel'
property "color"
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). This property is only available when using the modern select syntax.
property "compareWith"
compareWith?: string | SelectCompareFn | null;
This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the select. false
property "errorText"
errorText?: string;
Text that is placed under the select and displayed when an error is detected.
property "expandedIcon"
expandedIcon?: string;
The toggle icon to show when the select is open. If defined, the icon rotation behavior in
md
mode will be disabled. If undefined,toggleIcon
will be used for when the select is both open and closed.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "helperText"
helperText?: string;
Text that is placed under the select and displayed when no error is detected.
property "interface"
interface?: SelectInterface;
The interface the select should use:
action-sheet
,popover
,alert
, ormodal
. 'alert'
property "interfaceOptions"
interfaceOptions?: any;
Any additional options that the
alert
,action-sheet
orpopover
interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface. Note:interfaceOptions
will not overrideinputs
orbuttons
with thealert
interface. {}
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and select within a line.
justify
does not apply when the label and select are on different lines whenlabelPlacement
is set to"floating"
or"stacked"
."start"
: The label and select will appear on the left in LTR and on the right in RTL."end"
: The label and select will appear on the right in LTR and on the left in RTL."space-between"
: The label and select will appear on opposite ends of the line with space between the two elements.
property "label"
label?: string;
The visible label associated with the select. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the select.
"start"
: The label will appear to the left of the select in LTR and to the right in RTL."end"
: The label will appear to the right of the select in LTR and to the left in RTL."floating"
: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select."stacked"
: The label will appear smaller and above the select regardless even when the select is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using"floating"
or"stacked"
we recommend initializing the select with either avalue
or aplaceholder
. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "multiple"
multiple?: boolean;
If
true
, the select can accept multiple values. false
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "okText"
okText?: string;
The text to display on the ok button. 'OK'
property "onIonBlur"
onIonBlur?: (event: IonSelectCustomEvent<void>) => void;
Emitted when the select loses focus.
property "onIonCancel"
onIonCancel?: (event: IonSelectCustomEvent<void>) => void;
Emitted when the selection is cancelled.
property "onIonChange"
onIonChange?: (event: IonSelectCustomEvent<SelectChangeEventDetail>) => void;
Emitted when the value has changed. This event will not emit when programmatically setting the
value
property.
property "onIonDismiss"
onIonDismiss?: (event: IonSelectCustomEvent<void>) => void;
Emitted when the overlay is dismissed.
property "onIonFocus"
onIonFocus?: (event: IonSelectCustomEvent<void>) => void;
Emitted when the select has focus.
property "placeholder"
placeholder?: string;
The text to display when the select is empty.
property "required"
required?: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "selectedText"
selectedText?: string | null;
The text to display instead of the selected option's value.
property "shape"
shape?: 'round';
The shape of the select. If "round" it will have an increased border radius.
property "toggleIcon"
toggleIcon?: string;
The toggle icon to use. Defaults to
chevronExpand
forios
mode, orcaretDownSharp
formd
mode.
property "value"
value?: any | null;
The value of the select.
interface IonSelectModal
interface IonSelectModal {}
property "header"
header?: string;
property "multiple"
multiple?: boolean;
property "options"
options?: SelectModalOption[];
[]
interface IonSelectOption
interface IonSelectOption {}
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the select option. This property does not apply wheninterface="action-sheet"
asion-action-sheet
does not allow for disabled buttons. false
property "value"
value?: any | null;
The text value of the option.
interface IonSelectPopover
interface IonSelectPopover {}
property "header"
header?: string;
The header text of the popover
property "message"
message?: string;
The text content of the popover body
property "multiple"
multiple?: boolean;
If true, the select accepts multiple values
property "options"
options?: SelectPopoverOption[];
An array of options for the popover []
property "subHeader"
subHeader?: string;
The subheader text of the popover
interface IonSkeletonText
interface IonSkeletonText {}
property "animated"
animated?: boolean;
If
true
, the skeleton text will animate. false
interface IonSpinner
interface IonSpinner {}
property "color"
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).
property "duration"
duration?: number;
Duration of the spinner animation in milliseconds. The default varies based on the spinner.
property "name"
name?: SpinnerTypes;
The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
property "paused"
paused?: boolean;
If
true
, the spinner's animation will be paused. false
interface IonSplitPane
interface IonSplitPane {}
property "contentId"
contentId?: string;
The
id
of the main content. When using a router this is typicallyion-router-outlet
. When not using a router, this is typically your main view'sion-content
. This is not the id of theion-content
inside of yourion-menu
.
property "disabled"
disabled?: boolean;
If
true
, the split pane will be hidden. false
property "onIonSplitPaneVisible"
onIonSplitPaneVisible?: ( event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
Expression to be called when the split-pane visibility has changed
property "when"
when?: string | boolean;
When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. QUERY['lg']
interface IonTab
interface IonTab {}
property "component"
component?: ComponentRef;
The component to display inside of the tab.
property "tab"
tab: string;
A tab id must be provided for each
ion-tab
. It's used internally to reference the selected tab or by the router to switch between them.
interface IonTabBar
interface IonTabBar {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "selectedTab"
selectedTab?: string;
The selected tab component
property "translucent"
translucent?: boolean;
If
true
, the tab bar will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
interface IonTabButton
interface IonTabButton {}
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the tab button. false
property "download"
download?: string | undefined;
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).
property "href"
href?: string | undefined;
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
property "layout"
layout?: TabButtonLayout;
Set the layout of the text and icon in the tab bar. It defaults to
"icon-top"
.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "rel"
rel?: string | undefined;
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).
property "selected"
selected?: boolean;
The selected tab component false
property "tab"
tab?: string;
A tab id must be provided for each
ion-tab
. It's used internally to reference the selected tab or by the router to switch between them.
property "target"
target?: string | undefined;
Specifies where to display the linked URL. Only applies when an
href
is provided. Special keywords:"_blank"
,"_self"
,"_parent"
,"_top"
.
interface IonTabs
interface IonTabs {}
property "onIonTabsDidChange"
onIonTabsDidChange?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
Emitted when the navigation has finished transitioning to a new component.
property "onIonTabsWillChange"
onIonTabsWillChange?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
Emitted when the navigation is about to transition to a new component.
interface IonText
interface IonText {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
interface IonTextarea
interface IonTextarea {}
property "autocapitalize"
autocapitalize?: string;
Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options:
"off"
,"none"
,"on"
,"sentences"
,"words"
,"characters"
. 'none'
property "autofocus"
autofocus?: boolean;
Sets the [
autofocus
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information. false
property "autoGrow"
autoGrow?: boolean;
If
true
, the textarea container will grow and shrink based on the contents of the textarea. false
property "clearOnEdit"
clearOnEdit?: boolean;
If
true
, the value will be cleared after focus upon edit. false
property "color"
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).
property "cols"
cols?: number;
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
property "counter"
counter?: boolean;
If
true
, a character counter will display the ratio of characters used and the total character limit. Developers must also set themaxlength
property for the counter to be calculated correctly. false
property "counterFormatter"
counterFormatter?: (inputLength: number, maxLength: number) => string;
A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access
this
from within the callback.
property "debounce"
debounce?: number;
Set the amount of time, in milliseconds, to wait to trigger the
ionInput
event after each keystroke.
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the textarea. false
property "enterkeyhint"
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
A hint to the browser for which enter key to display. Possible values:
"enter"
,"done"
,"go"
,"next"
,"previous"
,"search"
, and"send"
.
property "errorText"
errorText?: string;
Text that is placed under the textarea and displayed when an error is detected.
property "fill"
fill?: 'outline' | 'solid';
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 inmd
mode.
property "helperText"
helperText?: string;
Text that is placed under the textarea and displayed when no error is detected.
property "inputmode"
inputmode?: | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
A hint to the browser for which keyboard to display. Possible values:
"none"
,"text"
,"tel"
,"url"
,"email"
,"numeric"
,"decimal"
, and"search"
.
property "label"
label?: string;
The visible label associated with the textarea. Use this if you need to render a plaintext label. The
label
property will take priority over thelabel
slot if both are used.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
Where to place the label relative to the textarea.
"start"
: The label will appear to the left of the textarea in LTR and to the right in RTL."end"
: The label will appear to the right of the textarea in LTR and to the left in RTL."floating"
: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea."stacked"
: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("..."). 'start'
property "maxlength"
maxlength?: number;
This attribute specifies the maximum number of characters that the user can enter.
property "minlength"
minlength?: number;
This attribute specifies the minimum number of characters that the user can enter.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
Emitted when the input loses focus.
property "onIonChange"
onIonChange?: (event: IonTextareaCustomEvent<TextareaChangeEventDetail>) => void;
The
ionChange
event is fired when the user modifies the textarea's value. Unlike theionInput
event, theionChange
event is fired when the element loses focus after its value has been modified. This event will not emit when programmatically setting thevalue
property.
property "onIonFocus"
onIonFocus?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
Emitted when the input has focus.
property "onIonInput"
onIonInput?: (event: IonTextareaCustomEvent<TextareaInputEventDetail>) => void;
The
ionInput
event is fired each time the user modifies the textarea's value. Unlike theionChange
event, theionInput
event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types. WhenclearOnEdit
is enabled, theionInput
event will be fired when the user clears the textarea by performing a keydown event.
property "placeholder"
placeholder?: string;
Instructional text that shows before the input has a value.
property "readonly"
readonly?: boolean;
If
true
, the user cannot modify the value. false
property "required"
required?: boolean;
If
true
, the user must fill in a value before submitting a form. false
property "rows"
rows?: number;
The number of visible text lines for the control.
property "shape"
shape?: 'round';
The shape of the textarea. If "round" it will have an increased border radius.
property "spellcheck"
spellcheck?: boolean;
If
true
, the element will have its spelling and grammar checked. false
property "value"
value?: string | null;
The value of the textarea. ''
property "wrap"
wrap?: 'hard' | 'soft' | 'off';
Indicates how the control wraps text.
interface IonThumbnail
interface IonThumbnail {}
interface IonTitle
interface IonTitle {}
property "color"
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).
property "size"
size?: 'large' | 'small';
The size of the toolbar title.
interface IonToast
interface IonToast {}
property "animated"
animated?: boolean;
If
true
, the toast will animate. true
property "buttons"
buttons?: (ToastButton | string)[];
An array of buttons for the toast.
property "color"
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).
property "cssClass"
cssClass?: string | string[];
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
property "duration"
duration?: number;
How many milliseconds to wait before hiding the toast. By default, it will show until
dismiss()
is called. config.getNumber('toastDuration', 0)
property "enterAnimation"
enterAnimation?: AnimationBuilder;
Animation to use when the toast is presented.
property "header"
header?: string;
Header to be shown in the toast.
property "htmlAttributes"
htmlAttributes?: { [key: string]: any };
Additional attributes to pass to the toast.
property "icon"
icon?: string;
The name of the icon to display, or the path to a valid SVG file. See
ion-icon
. https://ionic.io/ionicons
property "isOpen"
isOpen?: boolean;
If
true
, the toast will open. Iffalse
, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or thetrigger
property. Note:isOpen
will not automatically be set back tofalse
when the toast dismisses. You will need to do that in your code. false
property "keyboardClose"
keyboardClose?: boolean;
If
true
, the keyboard will be automatically dismissed when the overlay is presented. false
property "layout"
layout?: ToastLayout;
Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. 'baseline'
property "leaveAnimation"
leaveAnimation?: AnimationBuilder;
Animation to use when the toast is dismissed.
property "message"
message?: string | IonicSafeString;
Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default.
innerHTMLTemplatesEnabled
must be set totrue
in the Ionic config before custom HTML can be used.
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "onDidDismiss"
onDidDismiss?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss.
property "onDidPresent"
onDidPresent?: (event: IonToastCustomEvent<void>) => void;
Emitted after the toast has presented. Shorthand for ionToastWillDismiss.
property "onIonToastDidDismiss"
onIonToastDidDismiss?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
Emitted after the toast has dismissed.
property "onIonToastDidPresent"
onIonToastDidPresent?: (event: IonToastCustomEvent<void>) => void;
Emitted after the toast has presented.
property "onIonToastWillDismiss"
onIonToastWillDismiss?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
Emitted before the toast has dismissed.
property "onIonToastWillPresent"
onIonToastWillPresent?: (event: IonToastCustomEvent<void>) => void;
Emitted before the toast has presented.
property "onWillDismiss"
onWillDismiss?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss.
property "onWillPresent"
onWillPresent?: (event: IonToastCustomEvent<void>) => void;
Emitted before the toast has presented. Shorthand for ionToastWillPresent.
property "position"
position?: ToastPosition;
The starting position of the toast on the screen. Can be tweaked further using the
positionAnchor
property. 'bottom'
property "positionAnchor"
positionAnchor?: HTMLElement | string;
The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With
position="bottom"
, the toast will sit above the chosen element. Withposition="top"
, the toast will sit below the chosen element. Withposition="middle"
, the value ofpositionAnchor
is ignored.
property "swipeGesture"
swipeGesture?: ToastSwipeGestureDirection;
If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the
position
property:top
: The Toast can be swiped up to dismiss.bottom
: The Toast can be swiped down to dismiss.middle
: The Toast can be swiped up or down to dismiss.
property "translucent"
translucent?: boolean;
If
true
, the toast will be translucent. Only applies when the mode is"ios"
and the device supports [backdrop-filter
](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). false
property "trigger"
trigger?: string | undefined;
An ID corresponding to the trigger element that causes the toast to open when clicked.
interface IonToggle
interface IonToggle {}
property "alignment"
alignment?: 'start' | 'center';
How to control the alignment of the toggle and label on the cross axis.
"start"
: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL."center"
: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggledisplay
toblock
.
property "checked"
checked?: boolean;
If
true
, the toggle is selected. false
property "color"
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).
property "disabled"
disabled?: boolean;
If
true
, the user cannot interact with the toggle. false
property "enableOnOffLabels"
enableOnOffLabels?: boolean | undefined;
Enables the on/off accessibility switch labels within the toggle. config.get('toggleOnOffLabels')
property "errorText"
errorText?: string;
Text that is placed under the toggle label and displayed when an error is detected.
property "helperText"
helperText?: string;
Text that is placed under the toggle label and displayed when no error is detected.
property "justify"
justify?: 'start' | 'end' | 'space-between';
How to pack the label and toggle within a line.
"start"
: The label and toggle will appear on the left in LTR and on the right in RTL."end"
: The label and toggle will appear on the right in LTR and on the left in RTL."space-between"
: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggledisplay
toblock
.
property "labelPlacement"
labelPlacement?: 'start' | 'end' | 'fixed' | 'stacked';
Where to place the label relative to the input.
"start"
: The label will appear to the left of the toggle in LTR and to the right in RTL."end"
: The label will appear to the right of the toggle in LTR and to the left in RTL."fixed"
: The label has the same behavior as"start"
except it also has a fixed width. Long text will be truncated with ellipses ("...")."stacked"
: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with thealignment
property. 'start'
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
property "name"
name?: string;
The name of the control, which is submitted with the form data. this.inputId
property "onIonBlur"
onIonBlur?: (event: IonToggleCustomEvent<void>) => void;
Emitted when the toggle loses focus.
property "onIonChange"
onIonChange?: (event: IonToggleCustomEvent<ToggleChangeEventDetail>) => void;
Emitted when the user switches the toggle on or off. This event will not emit when programmatically setting the
checked
property.
property "onIonFocus"
onIonFocus?: (event: IonToggleCustomEvent<void>) => void;
Emitted when the toggle has focus.
property "required"
required?: boolean;
If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. false
property "value"
value?: string | null;
The value of the toggle does not mean if it's checked or not, use the
checked
property for that. The value of a toggle is analogous to the value of a<input type="checkbox">
, it's only used when the toggle participates in a native<form>
. 'on'
interface IonToolbar
interface IonToolbar {}
property "color"
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).
property "mode"
mode?: 'ios' | 'md';
The mode determines which platform styles to use.
Package Files (63)
- dist/types/components.d.ts
- dist/types/components/accordion-group/accordion-group-interface.d.ts
- dist/types/components/action-sheet/action-sheet-interface.d.ts
- dist/types/components/alert/alert-interface.d.ts
- dist/types/components/breadcrumb/breadcrumb-interface.d.ts
- dist/types/components/checkbox/checkbox-interface.d.ts
- dist/types/components/content/content-interface.d.ts
- dist/types/components/datetime/datetime-interface.d.ts
- dist/types/components/infinite-scroll/infinite-scroll-interface.d.ts
- dist/types/components/input-otp/input-otp-interface.d.ts
- dist/types/components/input/input-interface.d.ts
- dist/types/components/item-sliding/item-sliding-interface.d.ts
- dist/types/components/item/item-interface.d.ts
- dist/types/components/loading/loading-interface.d.ts
- dist/types/components/menu/menu-interface.d.ts
- dist/types/components/modal/modal-interface.d.ts
- dist/types/components/nav/constants.d.ts
- dist/types/components/nav/nav-interface.d.ts
- dist/types/components/nav/view-controller.d.ts
- dist/types/components/picker-column/picker-column-interfaces.d.ts
- dist/types/components/picker-legacy/picker-interface.d.ts
- dist/types/components/picker/picker-interfaces.d.ts
- dist/types/components/popover/popover-interface.d.ts
- dist/types/components/radio-group/radio-group-interface.d.ts
- dist/types/components/range/range-interface.d.ts
- dist/types/components/refresher/refresher-interface.d.ts
- dist/types/components/reorder-group/reorder-group-interface.d.ts
- dist/types/components/route/route-interface.d.ts
- dist/types/components/router/utils/interface.d.ts
- dist/types/components/searchbar/searchbar-interface.d.ts
- dist/types/components/segment-button/segment-button-interface.d.ts
- dist/types/components/segment-view/segment-view-interface.d.ts
- dist/types/components/segment/segment-interface.d.ts
- dist/types/components/select-modal/select-modal-interface.d.ts
- dist/types/components/select-popover/select-popover-interface.d.ts
- dist/types/components/select/select-interface.d.ts
- dist/types/components/slides/IonicSlides.d.ts
- dist/types/components/spinner/spinner-configs.d.ts
- dist/types/components/tab-bar/tab-bar-interface.d.ts
- dist/types/components/tabs/tabs-interface.d.ts
- dist/types/components/textarea/textarea-interface.d.ts
- dist/types/components/toast/toast-interface.d.ts
- dist/types/components/toggle/toggle-interface.d.ts
- dist/types/global/config.d.ts
- dist/types/global/ionic-global.d.ts
- dist/types/interface.d.ts
- dist/types/utils/animation/animation-interface.d.ts
- dist/types/utils/animation/animation.d.ts
- dist/types/utils/animation/cubic-bezier.d.ts
- dist/types/utils/config.d.ts
- dist/types/utils/gesture/index.d.ts
- dist/types/utils/hardware-back-button.d.ts
- dist/types/utils/helpers.d.ts
- dist/types/utils/logging/index.d.ts
- dist/types/utils/menu-controller/index.d.ts
- dist/types/utils/overlays-interface.d.ts
- dist/types/utils/overlays.d.ts
- dist/types/utils/platform.d.ts
- dist/types/utils/sanitization/index.d.ts
- dist/types/utils/theme.d.ts
- dist/types/utils/transition/index.d.ts
- dist/types/utils/transition/ios.transition.d.ts
- dist/types/utils/transition/md.transition.d.ts
Dependencies (3)
Dev Dependencies (35)
- @axe-core/playwright
- @capacitor/core
- @capacitor/haptics
- @capacitor/keyboard
- @capacitor/status-bar
- @clack/prompts
- @ionic/eslint-config
- @ionic/prettier-config
- @playwright/test
- @rollup/plugin-node-resolve
- @rollup/plugin-virtual
- @stencil/angular-output-target
- @stencil/react-output-target
- @stencil/sass
- @stencil/vue-output-target
- @types/jest
- @types/node
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- chalk
- clean-css-cli
- domino
- eslint
- eslint-config-prettier
- eslint-plugin-custom-rules
- execa
- fs-extra
- jest
- jest-cli
- prettier
- rollup
- sass
- serve
- stylelint
- stylelint-order
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ionic/core
.
- Markdown[](https://www.jsdocs.io/package/@ionic/core)
- HTML<a href="https://www.jsdocs.io/package/@ionic/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 24682 ms. - Missing or incorrect documentation? Open an issue for this package.