mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00

Adds a new component `ion-input-otp` which provides the OTP input functionality - Displays as an input group with multiple boxes accepting a single character - Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display - Supports changing the displayed keyboard using the `inputmode` property - Accepts a `length` property to control the number of input boxes - Accepts the following properties to change the design: `fill`, `shape`, `size`, `color` - Accepts a `separators` property to show a separator between 1 or more input boxes - Supports the `disabled`, `readonly` and invalid states - Supports limiting the accepted input via the `pattern` property - Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus` - Exposes the following method: `setFocus` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net>
157 lines
4.2 KiB
TypeScript
157 lines
4.2 KiB
TypeScript
import type { IonicConfig } from '@ionic/core/components';
|
|
import { initialize } from '@ionic/core/components';
|
|
|
|
export {
|
|
// UTILS
|
|
createAnimation,
|
|
createGesture,
|
|
iosTransitionAnimation,
|
|
mdTransitionAnimation,
|
|
IonicSlides,
|
|
getTimeGivenProgression,
|
|
getIonPageElement,
|
|
openURL,
|
|
|
|
// TYPES
|
|
Animation,
|
|
AnimationBuilder,
|
|
AnimationCallbackOptions,
|
|
AnimationDirection,
|
|
AnimationFill,
|
|
AnimationKeyFrames,
|
|
AnimationLifecycle,
|
|
Gesture,
|
|
GestureConfig,
|
|
GestureDetail,
|
|
NavComponentWithProps,
|
|
SpinnerTypes,
|
|
AccordionGroupCustomEvent,
|
|
AccordionGroupChangeEventDetail,
|
|
BreadcrumbCustomEvent,
|
|
BreadcrumbCollapsedClickEventDetail,
|
|
ActionSheetOptions,
|
|
ActionSheetButton,
|
|
AlertOptions,
|
|
AlertInput,
|
|
AlertButton,
|
|
BackButtonEvent,
|
|
CheckboxCustomEvent,
|
|
CheckboxChangeEventDetail,
|
|
DatetimeCustomEvent,
|
|
DatetimeChangeEventDetail,
|
|
InfiniteScrollCustomEvent,
|
|
InputCustomEvent,
|
|
InputChangeEventDetail,
|
|
InputInputEventDetail,
|
|
InputOtpCustomEvent,
|
|
InputOtpChangeEventDetail,
|
|
InputOtpCompleteEventDetail,
|
|
InputOtpInputEventDetail,
|
|
ItemReorderEventDetail,
|
|
ItemReorderCustomEvent,
|
|
ItemSlidingCustomEvent,
|
|
IonicSafeString,
|
|
LoadingOptions,
|
|
MenuCustomEvent,
|
|
ModalOptions,
|
|
NavCustomEvent,
|
|
PickerOptions,
|
|
PickerButton,
|
|
PickerColumn,
|
|
PickerColumnOption,
|
|
PopoverOptions,
|
|
RadioGroupCustomEvent,
|
|
RadioGroupChangeEventDetail,
|
|
RangeCustomEvent,
|
|
RangeChangeEventDetail,
|
|
RangeKnobMoveStartEventDetail,
|
|
RangeKnobMoveEndEventDetail,
|
|
RefresherCustomEvent,
|
|
RefresherEventDetail,
|
|
RouterEventDetail,
|
|
RouterCustomEvent,
|
|
ScrollBaseCustomEvent,
|
|
ScrollBaseDetail,
|
|
ScrollDetail,
|
|
ScrollCustomEvent,
|
|
SearchbarCustomEvent,
|
|
SearchbarChangeEventDetail,
|
|
SearchbarInputEventDetail,
|
|
SegmentChangeEventDetail,
|
|
SegmentCustomEvent,
|
|
SegmentValue,
|
|
SelectChangeEventDetail,
|
|
SelectCustomEvent,
|
|
TabsCustomEvent,
|
|
TextareaChangeEventDetail,
|
|
TextareaCustomEvent,
|
|
ToastOptions,
|
|
ToastButton,
|
|
ToastLayout,
|
|
ToggleChangeEventDetail,
|
|
ToggleCustomEvent,
|
|
TransitionOptions,
|
|
} from '@ionic/core/components';
|
|
|
|
export * from './proxies';
|
|
export * from './routing-proxies';
|
|
|
|
// createControllerComponent
|
|
export { IonAlert } from './IonAlert';
|
|
export { IonLoading } from './IonLoading';
|
|
export * from './IonToast';
|
|
export { IonPickerLegacy } from './IonPickerLegacy';
|
|
|
|
// createOverlayComponent
|
|
export * from './IonActionSheet';
|
|
export { IonModal } from './IonModal';
|
|
export { IonPopover } from './IonPopover';
|
|
|
|
// Custom Components
|
|
export { IonApp } from './IonApp';
|
|
export { IonPage } from './IonPage';
|
|
export { IonNav } from './navigation/IonNav';
|
|
export { IonTabsContext, IonTabsContextState } from './navigation/IonTabsContext';
|
|
export { IonTabs } from './navigation/IonTabs';
|
|
export { IonTabBar } from './navigation/IonTabBar';
|
|
export { IonTabButton } from './navigation/IonTabButton';
|
|
export { IonBackButton } from './navigation/IonBackButton';
|
|
export { IonRouterOutlet } from './IonRouterOutlet';
|
|
export { IonIcon } from './IonIcon';
|
|
export * from './IonRoute';
|
|
export * from './IonRedirect';
|
|
export * from './IonRouterContext';
|
|
|
|
// Utils
|
|
export { isPlatform, getPlatforms, getConfig } from './utils';
|
|
export * from './hrefprops';
|
|
|
|
// Ionic Animations
|
|
export { CreateAnimation } from './CreateAnimation';
|
|
|
|
// Hooks
|
|
export { useIonActionSheet, UseIonActionSheetResult } from '../hooks/useIonActionSheet';
|
|
export { useIonAlert, UseIonAlertResult } from '../hooks/useIonAlert';
|
|
export { useIonToast, UseIonToastResult } from '../hooks/useIonToast';
|
|
export { useIonModal, UseIonModalResult } from '../hooks/useIonModal';
|
|
export { useIonPopover, UseIonPopoverResult } from '../hooks/useIonPopover';
|
|
export { useIonPicker, UseIonPickerResult } from '../hooks/useIonPicker';
|
|
export { useIonLoading, UseIonLoadingResult } from '../hooks/useIonLoading';
|
|
|
|
export const setupIonicReact = (config: IonicConfig = {}) => {
|
|
/**
|
|
* By default Ionic Framework hides elements that
|
|
* are not hydrated, but in the CE build there is no
|
|
* hydration.
|
|
* TODO FW-2797: Remove when all integrations have been
|
|
* migrated to CE build.
|
|
*/
|
|
if (typeof (document as any) !== 'undefined') {
|
|
document.documentElement.classList.add('ion-ce');
|
|
}
|
|
|
|
initialize({
|
|
...config,
|
|
});
|
|
};
|