From a2b88c5cb8384846d3545dfc81fd5047d60db26b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 5 Dec 2017 15:28:58 -0500 Subject: [PATCH] refactor(fab): rename files and styles for the fab components (#13585) * refactor(fab): rename files to match tag names * refactor(fab): fix class names and separate styles * chore(config): bundle fab button separately --- packages/core/src/components.d.ts | 2868 +++++++++++++++++ .../fab-button.ios.scss} | 22 +- .../fab-button.ios.vars.scss} | 0 .../fab-button.md.scss} | 26 +- .../fab-button.md.vars.scss} | 0 .../src/components/fab-button/fab-button.scss | 95 + .../src/components/fab-button/fab-button.tsx | 149 + .../fab-button/fab-button.vars.scss | 13 + .../core/src/components/fab-button/readme.md | 126 + .../fab-container/fab-container.tsx | 39 - .../src/components/fab-container/readme.md | 91 - .../src/components/fab-list/fab-list.scss | 65 + .../core/src/components/fab-list/fab-list.tsx | 1 + .../components/fab-list/fab-list.vars.scss | 9 + .../core/src/components/fab-list/readme.md | 31 +- packages/core/src/components/fab/fab.scss | 163 +- packages/core/src/components/fab/fab.tsx | 149 +- .../core/src/components/fab/fab.vars.scss | 16 +- packages/core/src/components/fab/readme.md | 141 +- .../src/components/fab/test/basic/index.html | 1 + packages/core/src/index.d.ts | 4 +- packages/core/stencil.config.js | 3 +- 22 files changed, 3439 insertions(+), 573 deletions(-) rename packages/core/src/components/{fab/fab.ios.scss => fab-button/fab-button.ios.scss} (84%) rename packages/core/src/components/{fab/fab.ios.vars.scss => fab-button/fab-button.ios.vars.scss} (100%) rename packages/core/src/components/{fab/fab.md.scss => fab-button/fab-button.md.scss} (83%) rename packages/core/src/components/{fab/fab.md.vars.scss => fab-button/fab-button.md.vars.scss} (100%) create mode 100755 packages/core/src/components/fab-button/fab-button.scss create mode 100755 packages/core/src/components/fab-button/fab-button.tsx create mode 100755 packages/core/src/components/fab-button/fab-button.vars.scss create mode 100644 packages/core/src/components/fab-button/readme.md delete mode 100644 packages/core/src/components/fab-container/fab-container.tsx delete mode 100644 packages/core/src/components/fab-container/readme.md create mode 100644 packages/core/src/components/fab-list/fab-list.scss create mode 100644 packages/core/src/components/fab-list/fab-list.vars.scss mode change 100755 => 100644 packages/core/src/components/fab/fab.scss mode change 100755 => 100644 packages/core/src/components/fab/fab.tsx mode change 100755 => 100644 packages/core/src/components/fab/fab.vars.scss diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index f27e82b1b8..93253840ce 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -6,6 +6,2874 @@ import 'ionicons'; +import { + ActionSheetButton, +} from './components/action-sheet/action-sheet'; +import { + AnimationBuilder, + PickerOptions, + FrameworkDelegate, + PickerColumn, +} from './index'; +import { + AlertButton, + AlertInput, +} from './components/alert/alert'; +import { + ElementRef, + Side, +} from './utils/helpers'; +import { + GestureCallback, + GestureDetail, +} from './components/gesture/gesture'; +import { + PickerButton, + PickerColumn as PickerColumn2, +} from './components/picker/picker'; +import { + Event, +} from '@stencil/core'; +import { + ScrollCallback, +} from './components/scroll/scroll'; +import { + SelectPopoverOption, +} from './components/select-popover/select-popover'; + +import { + ActionSheetController as IonActionSheetController +} from './components/action-sheet-controller/action-sheet-controller'; + +declare global { + interface HTMLIonActionSheetControllerElement extends IonActionSheetController, HTMLElement { + } + var HTMLIonActionSheetControllerElement: { + prototype: HTMLIonActionSheetControllerElement; + new (): HTMLIonActionSheetControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-action-sheet-controller": HTMLIonActionSheetControllerElement; + } + interface ElementTagNameMap { + "ion-action-sheet-controller": HTMLIonActionSheetControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-action-sheet-controller": JSXElements.IonActionSheetControllerAttributes; + } + } + namespace JSXElements { + export interface IonActionSheetControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + ActionSheet as IonActionSheet +} from './components/action-sheet/action-sheet'; + +declare global { + interface HTMLIonActionSheetElement extends IonActionSheet, HTMLElement { + } + var HTMLIonActionSheetElement: { + prototype: HTMLIonActionSheetElement; + new (): HTMLIonActionSheetElement; + }; + interface HTMLElementTagNameMap { + "ion-action-sheet": HTMLIonActionSheetElement; + } + interface ElementTagNameMap { + "ion-action-sheet": HTMLIonActionSheetElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-action-sheet": JSXElements.IonActionSheetAttributes; + } + } + namespace JSXElements { + export interface IonActionSheetAttributes extends HTMLAttributes { + cssClass?: string; + title?: string; + subTitle?: string; + buttons?: ActionSheetButton[]; + enableBackdropDismiss?: boolean; + translucent?: boolean; + animate?: boolean; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + } + } +} + + +import { + AlertController as IonAlertController +} from './components/alert-controller/alert-controller'; + +declare global { + interface HTMLIonAlertControllerElement extends IonAlertController, HTMLElement { + } + var HTMLIonAlertControllerElement: { + prototype: HTMLIonAlertControllerElement; + new (): HTMLIonAlertControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-alert-controller": HTMLIonAlertControllerElement; + } + interface ElementTagNameMap { + "ion-alert-controller": HTMLIonAlertControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-alert-controller": JSXElements.IonAlertControllerAttributes; + } + } + namespace JSXElements { + export interface IonAlertControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Alert as IonAlert +} from './components/alert/alert'; + +declare global { + interface HTMLIonAlertElement extends IonAlert, HTMLElement { + } + var HTMLIonAlertElement: { + prototype: HTMLIonAlertElement; + new (): HTMLIonAlertElement; + }; + interface HTMLElementTagNameMap { + "ion-alert": HTMLIonAlertElement; + } + interface ElementTagNameMap { + "ion-alert": HTMLIonAlertElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-alert": JSXElements.IonAlertAttributes; + } + } + namespace JSXElements { + export interface IonAlertAttributes extends HTMLAttributes { + cssClass?: string; + title?: string; + subTitle?: string; + message?: string; + buttons?: AlertButton[]; + inputs?: AlertInput[]; + enableBackdropDismiss?: boolean; + translucent?: boolean; + animate?: boolean; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + } + } +} + + +import { + AnimationControllerImpl as IonAnimationController +} from './components/animation-controller/animation-controller'; + +declare global { + interface HTMLIonAnimationControllerElement extends IonAnimationController, HTMLElement { + } + var HTMLIonAnimationControllerElement: { + prototype: HTMLIonAnimationControllerElement; + new (): HTMLIonAnimationControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-animation-controller": HTMLIonAnimationControllerElement; + } + interface ElementTagNameMap { + "ion-animation-controller": HTMLIonAnimationControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-animation-controller": JSXElements.IonAnimationControllerAttributes; + } + } + namespace JSXElements { + export interface IonAnimationControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + App as IonApp +} from './components/app/app'; + +declare global { + interface HTMLIonAppElement extends IonApp, HTMLElement { + } + var HTMLIonAppElement: { + prototype: HTMLIonAppElement; + new (): HTMLIonAppElement; + }; + interface HTMLElementTagNameMap { + "ion-app": HTMLIonAppElement; + } + interface ElementTagNameMap { + "ion-app": HTMLIonAppElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-app": JSXElements.IonAppAttributes; + } + } + namespace JSXElements { + export interface IonAppAttributes extends HTMLAttributes { + + } + } +} + + +import { + Avatar as IonAvatar +} from './components/avatar/avatar'; + +declare global { + interface HTMLIonAvatarElement extends IonAvatar, HTMLElement { + } + var HTMLIonAvatarElement: { + prototype: HTMLIonAvatarElement; + new (): HTMLIonAvatarElement; + }; + interface HTMLElementTagNameMap { + "ion-avatar": HTMLIonAvatarElement; + } + interface ElementTagNameMap { + "ion-avatar": HTMLIonAvatarElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-avatar": JSXElements.IonAvatarAttributes; + } + } + namespace JSXElements { + export interface IonAvatarAttributes extends HTMLAttributes { + + } + } +} + + +import { + Backdrop as IonBackdrop +} from './components/backdrop/backdrop'; + +declare global { + interface HTMLIonBackdropElement extends IonBackdrop, HTMLElement { + } + var HTMLIonBackdropElement: { + prototype: HTMLIonBackdropElement; + new (): HTMLIonBackdropElement; + }; + interface HTMLElementTagNameMap { + "ion-backdrop": HTMLIonBackdropElement; + } + interface ElementTagNameMap { + "ion-backdrop": HTMLIonBackdropElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-backdrop": JSXElements.IonBackdropAttributes; + } + } + namespace JSXElements { + export interface IonBackdropAttributes extends HTMLAttributes { + + } + } +} + + +import { + Badge as IonBadge +} from './components/badge/badge'; + +declare global { + interface HTMLIonBadgeElement extends IonBadge, HTMLElement { + } + var HTMLIonBadgeElement: { + prototype: HTMLIonBadgeElement; + new (): HTMLIonBadgeElement; + }; + interface HTMLElementTagNameMap { + "ion-badge": HTMLIonBadgeElement; + } + interface ElementTagNameMap { + "ion-badge": HTMLIonBadgeElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-badge": JSXElements.IonBadgeAttributes; + } + } + namespace JSXElements { + export interface IonBadgeAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Button as IonButton +} from './components/button/button'; + +declare global { + interface HTMLIonButtonElement extends IonButton, HTMLElement { + } + var HTMLIonButtonElement: { + prototype: HTMLIonButtonElement; + new (): HTMLIonButtonElement; + }; + interface HTMLElementTagNameMap { + "ion-button": HTMLIonButtonElement; + } + interface ElementTagNameMap { + "ion-button": HTMLIonButtonElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-button": JSXElements.IonButtonAttributes; + } + } + namespace JSXElements { + export interface IonButtonAttributes extends HTMLAttributes { + itemButton?: boolean; + href?: string; + buttonType?: string; + size?: 'small' | 'large'; + disabled?: boolean; + fill?: 'clear' | 'outline' | 'solid' | 'default'; + round?: boolean; + expand?: 'full' | 'block'; + strong?: boolean; + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Buttons as IonButtons +} from './components/buttons/buttons'; + +declare global { + interface HTMLIonButtonsElement extends IonButtons, HTMLElement { + } + var HTMLIonButtonsElement: { + prototype: HTMLIonButtonsElement; + new (): HTMLIonButtonsElement; + }; + interface HTMLElementTagNameMap { + "ion-buttons": HTMLIonButtonsElement; + } + interface ElementTagNameMap { + "ion-buttons": HTMLIonButtonsElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-buttons": JSXElements.IonButtonsAttributes; + } + } + namespace JSXElements { + export interface IonButtonsAttributes extends HTMLAttributes { + + } + } +} + + +import { + CardContent as IonCardContent +} from './components/card-content/card-content'; + +declare global { + interface HTMLIonCardContentElement extends IonCardContent, HTMLElement { + } + var HTMLIonCardContentElement: { + prototype: HTMLIonCardContentElement; + new (): HTMLIonCardContentElement; + }; + interface HTMLElementTagNameMap { + "ion-card-content": HTMLIonCardContentElement; + } + interface ElementTagNameMap { + "ion-card-content": HTMLIonCardContentElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-card-content": JSXElements.IonCardContentAttributes; + } + } + namespace JSXElements { + export interface IonCardContentAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + CardHeader as IonCardHeader +} from './components/card-header/card-header'; + +declare global { + interface HTMLIonCardHeaderElement extends IonCardHeader, HTMLElement { + } + var HTMLIonCardHeaderElement: { + prototype: HTMLIonCardHeaderElement; + new (): HTMLIonCardHeaderElement; + }; + interface HTMLElementTagNameMap { + "ion-card-header": HTMLIonCardHeaderElement; + } + interface ElementTagNameMap { + "ion-card-header": HTMLIonCardHeaderElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-card-header": JSXElements.IonCardHeaderAttributes; + } + } + namespace JSXElements { + export interface IonCardHeaderAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + translucent?: boolean; + } + } +} + + +import { + CardSubtitle as IonCardSubtitle +} from './components/card-subtitle/card-subtitle'; + +declare global { + interface HTMLIonCardSubtitleElement extends IonCardSubtitle, HTMLElement { + } + var HTMLIonCardSubtitleElement: { + prototype: HTMLIonCardSubtitleElement; + new (): HTMLIonCardSubtitleElement; + }; + interface HTMLElementTagNameMap { + "ion-card-subtitle": HTMLIonCardSubtitleElement; + } + interface ElementTagNameMap { + "ion-card-subtitle": HTMLIonCardSubtitleElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-card-subtitle": JSXElements.IonCardSubtitleAttributes; + } + } + namespace JSXElements { + export interface IonCardSubtitleAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + CardTitle as IonCardTitle +} from './components/card-title/card-title'; + +declare global { + interface HTMLIonCardTitleElement extends IonCardTitle, HTMLElement { + } + var HTMLIonCardTitleElement: { + prototype: HTMLIonCardTitleElement; + new (): HTMLIonCardTitleElement; + }; + interface HTMLElementTagNameMap { + "ion-card-title": HTMLIonCardTitleElement; + } + interface ElementTagNameMap { + "ion-card-title": HTMLIonCardTitleElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-card-title": JSXElements.IonCardTitleAttributes; + } + } + namespace JSXElements { + export interface IonCardTitleAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Card as IonCard +} from './components/card/card'; + +declare global { + interface HTMLIonCardElement extends IonCard, HTMLElement { + } + var HTMLIonCardElement: { + prototype: HTMLIonCardElement; + new (): HTMLIonCardElement; + }; + interface HTMLElementTagNameMap { + "ion-card": HTMLIonCardElement; + } + interface ElementTagNameMap { + "ion-card": HTMLIonCardElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-card": JSXElements.IonCardAttributes; + } + } + namespace JSXElements { + export interface IonCardAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Checkbox as IonCheckbox +} from './components/checkbox/checkbox'; + +declare global { + interface HTMLIonCheckboxElement extends IonCheckbox, HTMLElement { + } + var HTMLIonCheckboxElement: { + prototype: HTMLIonCheckboxElement; + new (): HTMLIonCheckboxElement; + }; + interface HTMLElementTagNameMap { + "ion-checkbox": HTMLIonCheckboxElement; + } + interface ElementTagNameMap { + "ion-checkbox": HTMLIonCheckboxElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-checkbox": JSXElements.IonCheckboxAttributes; + } + } + namespace JSXElements { + export interface IonCheckboxAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + name?: string; + checked?: boolean; + disabled?: boolean; + value?: string; + } + } +} + + +import { + ChipButton as IonChipButton +} from './components/chip-button/chip-button'; + +declare global { + interface HTMLIonChipButtonElement extends IonChipButton, HTMLElement { + } + var HTMLIonChipButtonElement: { + prototype: HTMLIonChipButtonElement; + new (): HTMLIonChipButtonElement; + }; + interface HTMLElementTagNameMap { + "ion-chip-button": HTMLIonChipButtonElement; + } + interface ElementTagNameMap { + "ion-chip-button": HTMLIonChipButtonElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-chip-button": JSXElements.IonChipButtonAttributes; + } + } + namespace JSXElements { + export interface IonChipButtonAttributes extends HTMLAttributes { + href?: string; + color?: string; + mode?: 'ios' | 'md'; + clear?: boolean; + disabled?: boolean; + } + } +} + + +import { + Chip as IonChip +} from './components/chip/chip'; + +declare global { + interface HTMLIonChipElement extends IonChip, HTMLElement { + } + var HTMLIonChipElement: { + prototype: HTMLIonChipElement; + new (): HTMLIonChipElement; + }; + interface HTMLElementTagNameMap { + "ion-chip": HTMLIonChipElement; + } + interface ElementTagNameMap { + "ion-chip": HTMLIonChipElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-chip": JSXElements.IonChipAttributes; + } + } + namespace JSXElements { + export interface IonChipAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Column as IonCol +} from './components/col/col'; + +declare global { + interface HTMLIonColElement extends IonCol, HTMLElement { + } + var HTMLIonColElement: { + prototype: HTMLIonColElement; + new (): HTMLIonColElement; + }; + interface HTMLElementTagNameMap { + "ion-col": HTMLIonColElement; + } + interface ElementTagNameMap { + "ion-col": HTMLIonColElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-col": JSXElements.IonColAttributes; + } + } + namespace JSXElements { + export interface IonColAttributes extends HTMLAttributes { + + } + } +} + + +import { + Content as IonContent +} from './components/content/content'; + +declare global { + interface HTMLIonContentElement extends IonContent, HTMLElement { + } + var HTMLIonContentElement: { + prototype: HTMLIonContentElement; + new (): HTMLIonContentElement; + }; + interface HTMLElementTagNameMap { + "ion-content": HTMLIonContentElement; + } + interface ElementTagNameMap { + "ion-content": HTMLIonContentElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-content": JSXElements.IonContentAttributes; + } + } + namespace JSXElements { + export interface IonContentAttributes extends HTMLAttributes { + ionScrollStart?: Function; + ionScroll?: Function; + ionScrollEnd?: Function; + fullscreen?: boolean; + } + } +} + + +import { + Datetime as IonDatetime +} from './components/datetime/datetime'; + +declare global { + interface HTMLIonDatetimeElement extends IonDatetime, HTMLElement { + } + var HTMLIonDatetimeElement: { + prototype: HTMLIonDatetimeElement; + new (): HTMLIonDatetimeElement; + }; + interface HTMLElementTagNameMap { + "ion-datetime": HTMLIonDatetimeElement; + } + interface ElementTagNameMap { + "ion-datetime": HTMLIonDatetimeElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-datetime": JSXElements.IonDatetimeAttributes; + } + } + namespace JSXElements { + export interface IonDatetimeAttributes extends HTMLAttributes { + disabled?: boolean; + min?: string; + max?: string; + displayFormat?: string; + pickerFormat?: string; + cancelText?: string; + doneText?: string; + yearValues?: any; + monthValues?: any; + dayValues?: any; + hourValues?: any; + minuteValues?: any; + monthNames?: any; + monthShortNames?: any; + dayNames?: any; + dayShortNames?: any; + pickerOptions?: PickerOptions; + placeholder?: string; + value?: string; + } + } +} + + +import { + FabButton as IonFabButton +} from './components/fab-button/fab-button'; + +declare global { + interface HTMLIonFabButtonElement extends IonFabButton, HTMLElement { + } + var HTMLIonFabButtonElement: { + prototype: HTMLIonFabButtonElement; + new (): HTMLIonFabButtonElement; + }; + interface HTMLElementTagNameMap { + "ion-fab-button": HTMLIonFabButtonElement; + } + interface ElementTagNameMap { + "ion-fab-button": HTMLIonFabButtonElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-fab-button": JSXElements.IonFabButtonAttributes; + } + } + namespace JSXElements { + export interface IonFabButtonAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + href?: string; + translucent?: boolean; + activated?: boolean; + toggleActive?: Function; + show?: boolean; + disabled?: boolean; + } + } +} + + +import { + FabList as IonFabList +} from './components/fab-list/fab-list'; + +declare global { + interface HTMLIonFabListElement extends IonFabList, HTMLElement { + } + var HTMLIonFabListElement: { + prototype: HTMLIonFabListElement; + new (): HTMLIonFabListElement; + }; + interface HTMLElementTagNameMap { + "ion-fab-list": HTMLIonFabListElement; + } + interface ElementTagNameMap { + "ion-fab-list": HTMLIonFabListElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-fab-list": JSXElements.IonFabListAttributes; + } + } + namespace JSXElements { + export interface IonFabListAttributes extends HTMLAttributes { + activated?: boolean; + } + } +} + + +import { + Fab as IonFab +} from './components/fab/fab'; + +declare global { + interface HTMLIonFabElement extends IonFab, HTMLElement { + } + var HTMLIonFabElement: { + prototype: HTMLIonFabElement; + new (): HTMLIonFabElement; + }; + interface HTMLElementTagNameMap { + "ion-fab": HTMLIonFabElement; + } + interface ElementTagNameMap { + "ion-fab": HTMLIonFabElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-fab": JSXElements.IonFabAttributes; + } + } + namespace JSXElements { + export interface IonFabAttributes extends HTMLAttributes { + + } + } +} + + +import { + Footer as IonFooter +} from './components/footer/footer'; + +declare global { + interface HTMLIonFooterElement extends IonFooter, HTMLElement { + } + var HTMLIonFooterElement: { + prototype: HTMLIonFooterElement; + new (): HTMLIonFooterElement; + }; + interface HTMLElementTagNameMap { + "ion-footer": HTMLIonFooterElement; + } + interface ElementTagNameMap { + "ion-footer": HTMLIonFooterElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-footer": JSXElements.IonFooterAttributes; + } + } + namespace JSXElements { + export interface IonFooterAttributes extends HTMLAttributes { + translucent?: boolean; + } + } +} + + +import { + GestureController as IonGestureController +} from './components/gesture-controller/gesture-controller'; + +declare global { + interface HTMLIonGestureControllerElement extends IonGestureController, HTMLElement { + } + var HTMLIonGestureControllerElement: { + prototype: HTMLIonGestureControllerElement; + new (): HTMLIonGestureControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-gesture-controller": HTMLIonGestureControllerElement; + } + interface ElementTagNameMap { + "ion-gesture-controller": HTMLIonGestureControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-gesture-controller": JSXElements.IonGestureControllerAttributes; + } + } + namespace JSXElements { + export interface IonGestureControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Gesture as IonGesture +} from './components/gesture/gesture'; + +declare global { + interface HTMLIonGestureElement extends IonGesture, HTMLElement { + } + var HTMLIonGestureElement: { + prototype: HTMLIonGestureElement; + new (): HTMLIonGestureElement; + }; + interface HTMLElementTagNameMap { + "ion-gesture": HTMLIonGestureElement; + } + interface ElementTagNameMap { + "ion-gesture": HTMLIonGestureElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-gesture": JSXElements.IonGestureAttributes; + } + } + namespace JSXElements { + export interface IonGestureAttributes extends HTMLAttributes { + enabled?: boolean; + attachTo?: ElementRef; + autoBlockAll?: boolean; + block?: string; + disableScroll?: boolean; + direction?: string; + gestureName?: string; + gesturePriority?: number; + maxAngle?: number; + threshold?: number; + type?: string; + canStart?: GestureCallback; + onWillStart?: (_: GestureDetail) => Promise; + onStart?: GestureCallback; + onMove?: GestureCallback; + onEnd?: GestureCallback; + onPress?: GestureCallback; + notCaptured?: GestureCallback; + } + } +} + + +import { + Grid as IonGrid +} from './components/grid/grid'; + +declare global { + interface HTMLIonGridElement extends IonGrid, HTMLElement { + } + var HTMLIonGridElement: { + prototype: HTMLIonGridElement; + new (): HTMLIonGridElement; + }; + interface HTMLElementTagNameMap { + "ion-grid": HTMLIonGridElement; + } + interface ElementTagNameMap { + "ion-grid": HTMLIonGridElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-grid": JSXElements.IonGridAttributes; + } + } + namespace JSXElements { + export interface IonGridAttributes extends HTMLAttributes { + + } + } +} + + +import { + Header as IonHeader +} from './components/header/header'; + +declare global { + interface HTMLIonHeaderElement extends IonHeader, HTMLElement { + } + var HTMLIonHeaderElement: { + prototype: HTMLIonHeaderElement; + new (): HTMLIonHeaderElement; + }; + interface HTMLElementTagNameMap { + "ion-header": HTMLIonHeaderElement; + } + interface ElementTagNameMap { + "ion-header": HTMLIonHeaderElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-header": JSXElements.IonHeaderAttributes; + } + } + namespace JSXElements { + export interface IonHeaderAttributes extends HTMLAttributes { + translucent?: boolean; + } + } +} + + +import { + InfiniteScrollContent as IonInfiniteScrollContent +} from './components/infinite-scroll-content/infinite-scroll-content'; + +declare global { + interface HTMLIonInfiniteScrollContentElement extends IonInfiniteScrollContent, HTMLElement { + } + var HTMLIonInfiniteScrollContentElement: { + prototype: HTMLIonInfiniteScrollContentElement; + new (): HTMLIonInfiniteScrollContentElement; + }; + interface HTMLElementTagNameMap { + "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement; + } + interface ElementTagNameMap { + "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-infinite-scroll-content": JSXElements.IonInfiniteScrollContentAttributes; + } + } + namespace JSXElements { + export interface IonInfiniteScrollContentAttributes extends HTMLAttributes { + loadingSpinner?: string; + loadingText?: string; + } + } +} + + +import { + InfiniteScroll as IonInfiniteScroll +} from './components/infinite-scroll/infinite-scroll'; + +declare global { + interface HTMLIonInfiniteScrollElement extends IonInfiniteScroll, HTMLElement { + } + var HTMLIonInfiniteScrollElement: { + prototype: HTMLIonInfiniteScrollElement; + new (): HTMLIonInfiniteScrollElement; + }; + interface HTMLElementTagNameMap { + "ion-infinite-scroll": HTMLIonInfiniteScrollElement; + } + interface ElementTagNameMap { + "ion-infinite-scroll": HTMLIonInfiniteScrollElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-infinite-scroll": JSXElements.IonInfiniteScrollAttributes; + } + } + namespace JSXElements { + export interface IonInfiniteScrollAttributes extends HTMLAttributes { + threshold?: string; + enabled?: boolean; + position?: string; + } + } +} + + +import { + Input as IonInput +} from './components/input/input'; + +declare global { + interface HTMLIonInputElement extends IonInput, HTMLElement { + } + var HTMLIonInputElement: { + prototype: HTMLIonInputElement; + new (): HTMLIonInputElement; + }; + interface HTMLElementTagNameMap { + "ion-input": HTMLIonInputElement; + } + interface ElementTagNameMap { + "ion-input": HTMLIonInputElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-input": JSXElements.IonInputAttributes; + } + } + namespace JSXElements { + export interface IonInputAttributes extends HTMLAttributes { + accept?: string; + autocapitalize?: string; + autocomplete?: string; + autocorrect?: string; + autofocus?: boolean; + checked?: boolean; + clearInput?: boolean; + clearOnEdit?: boolean; + disabled?: boolean; + inputmode?: string; + max?: string; + maxlength?: number; + min?: string; + minlength?: number; + multiple?: boolean; + name?: string; + pattern?: string; + placeholder?: string; + readonly?: boolean; + required?: boolean; + results?: number; + spellcheck?: boolean; + step?: string; + size?: number; + type?: string; + value?: string; + } + } +} + + +import { + ItemDivider as IonItemDivider +} from './components/item-divider/item-divider'; + +declare global { + interface HTMLIonItemDividerElement extends IonItemDivider, HTMLElement { + } + var HTMLIonItemDividerElement: { + prototype: HTMLIonItemDividerElement; + new (): HTMLIonItemDividerElement; + }; + interface HTMLElementTagNameMap { + "ion-item-divider": HTMLIonItemDividerElement; + } + interface ElementTagNameMap { + "ion-item-divider": HTMLIonItemDividerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-item-divider": JSXElements.IonItemDividerAttributes; + } + } + namespace JSXElements { + export interface IonItemDividerAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + ItemOption as IonItemOption +} from './components/item-option/item-option'; + +declare global { + interface HTMLIonItemOptionElement extends IonItemOption, HTMLElement { + } + var HTMLIonItemOptionElement: { + prototype: HTMLIonItemOptionElement; + new (): HTMLIonItemOptionElement; + }; + interface HTMLElementTagNameMap { + "ion-item-option": HTMLIonItemOptionElement; + } + interface ElementTagNameMap { + "ion-item-option": HTMLIonItemOptionElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-item-option": JSXElements.IonItemOptionAttributes; + } + } + namespace JSXElements { + export interface IonItemOptionAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + href?: string; + disabled?: boolean; + } + } +} + + +import { + ItemOptions as IonItemOptions +} from './components/item-options/item-options'; + +declare global { + interface HTMLIonItemOptionsElement extends IonItemOptions, HTMLElement { + } + var HTMLIonItemOptionsElement: { + prototype: HTMLIonItemOptionsElement; + new (): HTMLIonItemOptionsElement; + }; + interface HTMLElementTagNameMap { + "ion-item-options": HTMLIonItemOptionsElement; + } + interface ElementTagNameMap { + "ion-item-options": HTMLIonItemOptionsElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-item-options": JSXElements.IonItemOptionsAttributes; + } + } + namespace JSXElements { + export interface IonItemOptionsAttributes extends HTMLAttributes { + side?: Side; + } + } +} + + +import { + ItemSliding as IonItemSliding +} from './components/item-sliding/item-sliding'; + +declare global { + interface HTMLIonItemSlidingElement extends IonItemSliding, HTMLElement { + } + var HTMLIonItemSlidingElement: { + prototype: HTMLIonItemSlidingElement; + new (): HTMLIonItemSlidingElement; + }; + interface HTMLElementTagNameMap { + "ion-item-sliding": HTMLIonItemSlidingElement; + } + interface ElementTagNameMap { + "ion-item-sliding": HTMLIonItemSlidingElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-item-sliding": JSXElements.IonItemSlidingAttributes; + } + } + namespace JSXElements { + export interface IonItemSlidingAttributes extends HTMLAttributes { + + } + } +} + + +import { + Item as IonItem +} from './components/item/item'; + +declare global { + interface HTMLIonItemElement extends IonItem, HTMLElement { + } + var HTMLIonItemElement: { + prototype: HTMLIonItemElement; + new (): HTMLIonItemElement; + }; + interface HTMLElementTagNameMap { + "ion-item": HTMLIonItemElement; + } + interface ElementTagNameMap { + "ion-item": HTMLIonItemElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-item": JSXElements.IonItemAttributes; + } + } + namespace JSXElements { + export interface IonItemAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + href?: string; + } + } +} + + +import { + KeyboardController as IonKeyboardController +} from './components/keyboard-controller/keyboard-controller'; + +declare global { + interface HTMLIonKeyboardControllerElement extends IonKeyboardController, HTMLElement { + } + var HTMLIonKeyboardControllerElement: { + prototype: HTMLIonKeyboardControllerElement; + new (): HTMLIonKeyboardControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-keyboard-controller": HTMLIonKeyboardControllerElement; + } + interface ElementTagNameMap { + "ion-keyboard-controller": HTMLIonKeyboardControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-keyboard-controller": JSXElements.IonKeyboardControllerAttributes; + } + } + namespace JSXElements { + export interface IonKeyboardControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Label as IonLabel +} from './components/label/label'; + +declare global { + interface HTMLIonLabelElement extends IonLabel, HTMLElement { + } + var HTMLIonLabelElement: { + prototype: HTMLIonLabelElement; + new (): HTMLIonLabelElement; + }; + interface HTMLElementTagNameMap { + "ion-label": HTMLIonLabelElement; + } + interface ElementTagNameMap { + "ion-label": HTMLIonLabelElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-label": JSXElements.IonLabelAttributes; + } + } + namespace JSXElements { + export interface IonLabelAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + fixed?: boolean; + floating?: boolean; + stacked?: boolean; + } + } +} + + +import { + ListHeader as IonListHeader +} from './components/list-header/list-header'; + +declare global { + interface HTMLIonListHeaderElement extends IonListHeader, HTMLElement { + } + var HTMLIonListHeaderElement: { + prototype: HTMLIonListHeaderElement; + new (): HTMLIonListHeaderElement; + }; + interface HTMLElementTagNameMap { + "ion-list-header": HTMLIonListHeaderElement; + } + interface ElementTagNameMap { + "ion-list-header": HTMLIonListHeaderElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-list-header": JSXElements.IonListHeaderAttributes; + } + } + namespace JSXElements { + export interface IonListHeaderAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + List as IonList +} from './components/list/list'; + +declare global { + interface HTMLIonListElement extends IonList, HTMLElement { + } + var HTMLIonListElement: { + prototype: HTMLIonListElement; + new (): HTMLIonListElement; + }; + interface HTMLElementTagNameMap { + "ion-list": HTMLIonListElement; + } + interface ElementTagNameMap { + "ion-list": HTMLIonListElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-list": JSXElements.IonListAttributes; + } + } + namespace JSXElements { + export interface IonListAttributes extends HTMLAttributes { + + } + } +} + + +import { + LoadingController as IonLoadingController +} from './components/loading-controller/loading-controller'; + +declare global { + interface HTMLIonLoadingControllerElement extends IonLoadingController, HTMLElement { + } + var HTMLIonLoadingControllerElement: { + prototype: HTMLIonLoadingControllerElement; + new (): HTMLIonLoadingControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-loading-controller": HTMLIonLoadingControllerElement; + } + interface ElementTagNameMap { + "ion-loading-controller": HTMLIonLoadingControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-loading-controller": JSXElements.IonLoadingControllerAttributes; + } + } + namespace JSXElements { + export interface IonLoadingControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Loading as IonLoading +} from './components/loading/loading'; + +declare global { + interface HTMLIonLoadingElement extends IonLoading, HTMLElement { + } + var HTMLIonLoadingElement: { + prototype: HTMLIonLoadingElement; + new (): HTMLIonLoadingElement; + }; + interface HTMLElementTagNameMap { + "ion-loading": HTMLIonLoadingElement; + } + interface ElementTagNameMap { + "ion-loading": HTMLIonLoadingElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-loading": JSXElements.IonLoadingAttributes; + } + } + namespace JSXElements { + export interface IonLoadingAttributes extends HTMLAttributes { + spinner?: string; + cssClass?: string; + content?: string; + dismissOnPageChange?: boolean; + duration?: number; + translucent?: boolean; + showBackdrop?: boolean; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + animate?: boolean; + } + } +} + + +import { + MenuController as IonMenuController +} from './components/menu-controller/menu-controller'; + +declare global { + interface HTMLIonMenuControllerElement extends IonMenuController, HTMLElement { + } + var HTMLIonMenuControllerElement: { + prototype: HTMLIonMenuControllerElement; + new (): HTMLIonMenuControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-menu-controller": HTMLIonMenuControllerElement; + } + interface ElementTagNameMap { + "ion-menu-controller": HTMLIonMenuControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-menu-controller": JSXElements.IonMenuControllerAttributes; + } + } + namespace JSXElements { + export interface IonMenuControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Menu as IonMenu +} from './components/menu/menu'; + +declare global { + interface HTMLIonMenuElement extends IonMenu, HTMLElement { + } + var HTMLIonMenuElement: { + prototype: HTMLIonMenuElement; + new (): HTMLIonMenuElement; + }; + interface HTMLElementTagNameMap { + "ion-menu": HTMLIonMenuElement; + } + interface ElementTagNameMap { + "ion-menu": HTMLIonMenuElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-menu": JSXElements.IonMenuAttributes; + } + } + namespace JSXElements { + export interface IonMenuAttributes extends HTMLAttributes { + content?: string; + menuId?: string; + type?: string; + enabled?: boolean; + side?: Side; + swipeEnabled?: boolean; + persistent?: boolean; + maxEdgeStart?: number; + } + } +} + + +import { + ModalController as IonModalController +} from './components/modal-controller/modal-controller'; + +declare global { + interface HTMLIonModalControllerElement extends IonModalController, HTMLElement { + } + var HTMLIonModalControllerElement: { + prototype: HTMLIonModalControllerElement; + new (): HTMLIonModalControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-modal-controller": HTMLIonModalControllerElement; + } + interface ElementTagNameMap { + "ion-modal-controller": HTMLIonModalControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-modal-controller": JSXElements.IonModalControllerAttributes; + } + } + namespace JSXElements { + export interface IonModalControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Modal as IonModal +} from './components/modal/modal'; + +declare global { + interface HTMLIonModalElement extends IonModal, HTMLElement { + } + var HTMLIonModalElement: { + prototype: HTMLIonModalElement; + new (): HTMLIonModalElement; + }; + interface HTMLElementTagNameMap { + "ion-modal": HTMLIonModalElement; + } + interface ElementTagNameMap { + "ion-modal": HTMLIonModalElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-modal": JSXElements.IonModalAttributes; + } + } + namespace JSXElements { + export interface IonModalAttributes extends HTMLAttributes { + mode?: string; + color?: string; + component?: string; + componentProps?: any; + cssClass?: string; + enableBackdropDismiss?: boolean; + modalId?: string; + showBackdrop?: boolean; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + animate?: boolean; + } + } +} + + +import { + NavController as IonNavController +} from './components/nav-controller/nav-controller'; + +declare global { + interface HTMLIonNavControllerElement extends IonNavController, HTMLElement { + } + var HTMLIonNavControllerElement: { + prototype: HTMLIonNavControllerElement; + new (): HTMLIonNavControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-nav-controller": HTMLIonNavControllerElement; + } + interface ElementTagNameMap { + "ion-nav-controller": HTMLIonNavControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-nav-controller": JSXElements.IonNavControllerAttributes; + } + } + namespace JSXElements { + export interface IonNavControllerAttributes extends HTMLAttributes { + delegate?: FrameworkDelegate; + } + } +} + + +import { + Nav as IonNav +} from './components/nav/nav'; + +declare global { + interface HTMLIonNavElement extends IonNav, HTMLElement { + } + var HTMLIonNavElement: { + prototype: HTMLIonNavElement; + new (): HTMLIonNavElement; + }; + interface HTMLElementTagNameMap { + "ion-nav": HTMLIonNavElement; + } + interface ElementTagNameMap { + "ion-nav": HTMLIonNavElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-nav": JSXElements.IonNavAttributes; + } + } + namespace JSXElements { + export interface IonNavAttributes extends HTMLAttributes { + mode?: string; + root?: any; + delegate?: FrameworkDelegate; + } + } +} + + +import { + Navbar as IonNavbar +} from './components/navbar/navbar'; + +declare global { + interface HTMLIonNavbarElement extends IonNavbar, HTMLElement { + } + var HTMLIonNavbarElement: { + prototype: HTMLIonNavbarElement; + new (): HTMLIonNavbarElement; + }; + interface HTMLElementTagNameMap { + "ion-navbar": HTMLIonNavbarElement; + } + interface ElementTagNameMap { + "ion-navbar": HTMLIonNavbarElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-navbar": JSXElements.IonNavbarAttributes; + } + } + namespace JSXElements { + export interface IonNavbarAttributes extends HTMLAttributes { + hideBackButton?: boolean; + backButtonText?: string; + backButtonIcon?: string; + hidden?: boolean; + } + } +} + + +import { + Note as IonNote +} from './components/note/note'; + +declare global { + interface HTMLIonNoteElement extends IonNote, HTMLElement { + } + var HTMLIonNoteElement: { + prototype: HTMLIonNoteElement; + new (): HTMLIonNoteElement; + }; + interface HTMLElementTagNameMap { + "ion-note": HTMLIonNoteElement; + } + interface ElementTagNameMap { + "ion-note": HTMLIonNoteElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-note": JSXElements.IonNoteAttributes; + } + } + namespace JSXElements { + export interface IonNoteAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + } + } +} + + +import { + Page as IonPage +} from './components/page/page'; + +declare global { + interface HTMLIonPageElement extends IonPage, HTMLElement { + } + var HTMLIonPageElement: { + prototype: HTMLIonPageElement; + new (): HTMLIonPageElement; + }; + interface HTMLElementTagNameMap { + "ion-page": HTMLIonPageElement; + } + interface ElementTagNameMap { + "ion-page": HTMLIonPageElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-page": JSXElements.IonPageAttributes; + } + } + namespace JSXElements { + export interface IonPageAttributes extends HTMLAttributes { + + } + } +} + + +import { + PickerColumnCmp as IonPickerColumn +} from './components/picker-column/picker-column'; + +declare global { + interface HTMLIonPickerColumnElement extends IonPickerColumn, HTMLElement { + } + var HTMLIonPickerColumnElement: { + prototype: HTMLIonPickerColumnElement; + new (): HTMLIonPickerColumnElement; + }; + interface HTMLElementTagNameMap { + "ion-picker-column": HTMLIonPickerColumnElement; + } + interface ElementTagNameMap { + "ion-picker-column": HTMLIonPickerColumnElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-picker-column": JSXElements.IonPickerColumnAttributes; + } + } + namespace JSXElements { + export interface IonPickerColumnAttributes extends HTMLAttributes { + col?: PickerColumn; + } + } +} + + +import { + PickerController as IonPickerController +} from './components/picker-controller/picker-controller'; + +declare global { + interface HTMLIonPickerControllerElement extends IonPickerController, HTMLElement { + } + var HTMLIonPickerControllerElement: { + prototype: HTMLIonPickerControllerElement; + new (): HTMLIonPickerControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-picker-controller": HTMLIonPickerControllerElement; + } + interface ElementTagNameMap { + "ion-picker-controller": HTMLIonPickerControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-picker-controller": JSXElements.IonPickerControllerAttributes; + } + } + namespace JSXElements { + export interface IonPickerControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Picker as IonPicker +} from './components/picker/picker'; + +declare global { + interface HTMLIonPickerElement extends IonPicker, HTMLElement { + } + var HTMLIonPickerElement: { + prototype: HTMLIonPickerElement; + new (): HTMLIonPickerElement; + }; + interface HTMLElementTagNameMap { + "ion-picker": HTMLIonPickerElement; + } + interface ElementTagNameMap { + "ion-picker": HTMLIonPickerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-picker": JSXElements.IonPickerAttributes; + } + } + namespace JSXElements { + export interface IonPickerAttributes extends HTMLAttributes { + cssClass?: string; + content?: string; + dismissOnPageChange?: boolean; + duration?: number; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + pickerId?: string; + showBackdrop?: boolean; + enableBackdropDismiss?: boolean; + animate?: boolean; + buttons?: PickerButton[]; + columns?: PickerColumn[]; + } + } +} + + +import { + PopoverController as IonPopoverController +} from './components/popover-controller/popover-controller'; + +declare global { + interface HTMLIonPopoverControllerElement extends IonPopoverController, HTMLElement { + } + var HTMLIonPopoverControllerElement: { + prototype: HTMLIonPopoverControllerElement; + new (): HTMLIonPopoverControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-popover-controller": HTMLIonPopoverControllerElement; + } + interface ElementTagNameMap { + "ion-popover-controller": HTMLIonPopoverControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-popover-controller": JSXElements.IonPopoverControllerAttributes; + } + } + namespace JSXElements { + export interface IonPopoverControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Popover as IonPopover +} from './components/popover/popover'; + +declare global { + interface HTMLIonPopoverElement extends IonPopover, HTMLElement { + } + var HTMLIonPopoverElement: { + prototype: HTMLIonPopoverElement; + new (): HTMLIonPopoverElement; + }; + interface HTMLElementTagNameMap { + "ion-popover": HTMLIonPopoverElement; + } + interface ElementTagNameMap { + "ion-popover": HTMLIonPopoverElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-popover": JSXElements.IonPopoverAttributes; + } + } + namespace JSXElements { + export interface IonPopoverAttributes extends HTMLAttributes { + mode?: string; + color?: string; + component?: string; + componentProps?: any; + cssClass?: string; + enableBackdropDismiss?: boolean; + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; + ev?: Event; + popoverId?: string; + showBackdrop?: boolean; + translucent?: boolean; + animate?: boolean; + } + } +} + + +import { + RadioGroup as IonRadioGroup +} from './components/radio-group/radio-group'; + +declare global { + interface HTMLIonRadioGroupElement extends IonRadioGroup, HTMLElement { + } + var HTMLIonRadioGroupElement: { + prototype: HTMLIonRadioGroupElement; + new (): HTMLIonRadioGroupElement; + }; + interface HTMLElementTagNameMap { + "ion-radio-group": HTMLIonRadioGroupElement; + } + interface ElementTagNameMap { + "ion-radio-group": HTMLIonRadioGroupElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-radio-group": JSXElements.IonRadioGroupAttributes; + } + } + namespace JSXElements { + export interface IonRadioGroupAttributes extends HTMLAttributes { + allowEmptySelection?: boolean; + disabled?: boolean; + name?: string; + value?: string; + } + } +} + + +import { + Radio as IonRadio +} from './components/radio/radio'; + +declare global { + interface HTMLIonRadioElement extends IonRadio, HTMLElement { + } + var HTMLIonRadioElement: { + prototype: HTMLIonRadioElement; + new (): HTMLIonRadioElement; + }; + interface HTMLElementTagNameMap { + "ion-radio": HTMLIonRadioElement; + } + interface ElementTagNameMap { + "ion-radio": HTMLIonRadioElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-radio": JSXElements.IonRadioAttributes; + } + } + namespace JSXElements { + export interface IonRadioAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + name?: string; + disabled?: boolean; + checked?: boolean; + value?: string; + } + } +} + + +import { + RangeKnob as IonRangeKnob +} from './components/range-knob/range-knob'; + +declare global { + interface HTMLIonRangeKnobElement extends IonRangeKnob, HTMLElement { + } + var HTMLIonRangeKnobElement: { + prototype: HTMLIonRangeKnobElement; + new (): HTMLIonRangeKnobElement; + }; + interface HTMLElementTagNameMap { + "ion-range-knob": HTMLIonRangeKnobElement; + } + interface ElementTagNameMap { + "ion-range-knob": HTMLIonRangeKnobElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-range-knob": JSXElements.IonRangeKnobAttributes; + } + } + namespace JSXElements { + export interface IonRangeKnobAttributes extends HTMLAttributes { + pressed?: boolean; + pin?: boolean; + min?: number; + max?: number; + val?: number; + disabled?: boolean; + labelId?: string; + knob?: string; + ratio?: number; + } + } +} + + +import { + Range as IonRange +} from './components/range/range'; + +declare global { + interface HTMLIonRangeElement extends IonRange, HTMLElement { + } + var HTMLIonRangeElement: { + prototype: HTMLIonRangeElement; + new (): HTMLIonRangeElement; + }; + interface HTMLElementTagNameMap { + "ion-range": HTMLIonRangeElement; + } + interface ElementTagNameMap { + "ion-range": HTMLIonRangeElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-range": JSXElements.IonRangeAttributes; + } + } + namespace JSXElements { + export interface IonRangeAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + debounce?: number; + disabled?: boolean; + dualKnobs?: boolean; + max?: number; + min?: number; + pin?: boolean; + snaps?: boolean; + step?: number; + value?: any; + } + } +} + + +import { + ReorderGroup as IonReorderGroup +} from './components/reorder-group/reorder-group'; + +declare global { + interface HTMLIonReorderGroupElement extends IonReorderGroup, HTMLElement { + } + var HTMLIonReorderGroupElement: { + prototype: HTMLIonReorderGroupElement; + new (): HTMLIonReorderGroupElement; + }; + interface HTMLElementTagNameMap { + "ion-reorder-group": HTMLIonReorderGroupElement; + } + interface ElementTagNameMap { + "ion-reorder-group": HTMLIonReorderGroupElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-reorder-group": JSXElements.IonReorderGroupAttributes; + } + } + namespace JSXElements { + export interface IonReorderGroupAttributes extends HTMLAttributes { + enabled?: boolean; + } + } +} + + +import { + ItemReorder as IonReorder +} from './components/reorder/reorder'; + +declare global { + interface HTMLIonReorderElement extends IonReorder, HTMLElement { + } + var HTMLIonReorderElement: { + prototype: HTMLIonReorderElement; + new (): HTMLIonReorderElement; + }; + interface HTMLElementTagNameMap { + "ion-reorder": HTMLIonReorderElement; + } + interface ElementTagNameMap { + "ion-reorder": HTMLIonReorderElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-reorder": JSXElements.IonReorderAttributes; + } + } + namespace JSXElements { + export interface IonReorderAttributes extends HTMLAttributes { + + } + } +} + + +import { + RouteLink as IonRouteLink +} from './components/route-link/route-link'; + +declare global { + interface HTMLIonRouteLinkElement extends IonRouteLink, HTMLElement { + } + var HTMLIonRouteLinkElement: { + prototype: HTMLIonRouteLinkElement; + new (): HTMLIonRouteLinkElement; + }; + interface HTMLElementTagNameMap { + "ion-route-link": HTMLIonRouteLinkElement; + } + interface ElementTagNameMap { + "ion-route-link": HTMLIonRouteLinkElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-route-link": JSXElements.IonRouteLinkAttributes; + } + } + namespace JSXElements { + export interface IonRouteLinkAttributes extends HTMLAttributes { + url?: string; + router?: any; + } + } +} + + +import { + Route as IonRoute +} from './components/route/route'; + +declare global { + interface HTMLIonRouteElement extends IonRoute, HTMLElement { + } + var HTMLIonRouteElement: { + prototype: HTMLIonRouteElement; + new (): HTMLIonRouteElement; + }; + interface HTMLElementTagNameMap { + "ion-route": HTMLIonRouteElement; + } + interface ElementTagNameMap { + "ion-route": HTMLIonRouteElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-route": JSXElements.IonRouteAttributes; + } + } + namespace JSXElements { + export interface IonRouteAttributes extends HTMLAttributes { + path?: string; + component?: string; + props?: any; + } + } +} + + +import { + RouterController as IonRouterController +} from './components/router-controller/router-controller'; + +declare global { + interface HTMLIonRouterControllerElement extends IonRouterController, HTMLElement { + } + var HTMLIonRouterControllerElement: { + prototype: HTMLIonRouterControllerElement; + new (): HTMLIonRouterControllerElement; + }; + interface HTMLElementTagNameMap { + "ion-router-controller": HTMLIonRouterControllerElement; + } + interface ElementTagNameMap { + "ion-router-controller": HTMLIonRouterControllerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-router-controller": JSXElements.IonRouterControllerAttributes; + } + } + namespace JSXElements { + export interface IonRouterControllerAttributes extends HTMLAttributes { + + } + } +} + + +import { + Row as IonRow +} from './components/row/row'; + +declare global { + interface HTMLIonRowElement extends IonRow, HTMLElement { + } + var HTMLIonRowElement: { + prototype: HTMLIonRowElement; + new (): HTMLIonRowElement; + }; + interface HTMLElementTagNameMap { + "ion-row": HTMLIonRowElement; + } + interface ElementTagNameMap { + "ion-row": HTMLIonRowElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-row": JSXElements.IonRowAttributes; + } + } + namespace JSXElements { + export interface IonRowAttributes extends HTMLAttributes { + + } + } +} + + +import { + Scroll as IonScroll +} from './components/scroll/scroll'; + +declare global { + interface HTMLIonScrollElement extends IonScroll, HTMLElement { + } + var HTMLIonScrollElement: { + prototype: HTMLIonScrollElement; + new (): HTMLIonScrollElement; + }; + interface HTMLElementTagNameMap { + "ion-scroll": HTMLIonScrollElement; + } + interface ElementTagNameMap { + "ion-scroll": HTMLIonScrollElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-scroll": JSXElements.IonScrollAttributes; + } + } + namespace JSXElements { + export interface IonScrollAttributes extends HTMLAttributes { + enabled?: boolean; + jsScroll?: boolean; + onionScrollStart?: ScrollCallback; + onionScroll?: ScrollCallback; + onionScrollEnd?: ScrollCallback; + } + } +} + + +import { + Searchbar as IonSearchbar +} from './components/searchbar/searchbar'; + +declare global { + interface HTMLIonSearchbarElement extends IonSearchbar, HTMLElement { + } + var HTMLIonSearchbarElement: { + prototype: HTMLIonSearchbarElement; + new (): HTMLIonSearchbarElement; + }; + interface HTMLElementTagNameMap { + "ion-searchbar": HTMLIonSearchbarElement; + } + interface ElementTagNameMap { + "ion-searchbar": HTMLIonSearchbarElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-searchbar": JSXElements.IonSearchbarAttributes; + } + } + namespace JSXElements { + export interface IonSearchbarAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + animated?: boolean; + autocomplete?: string; + autocorrect?: string; + cancelButtonText?: string; + debounce?: number; + placeholder?: string; + showCancelButton?: boolean; + spellcheck?: boolean; + type?: string; + value?: string; + } + } +} + + +import { + SegmentButton as IonSegmentButton +} from './components/segment-button/segment-button'; + +declare global { + interface HTMLIonSegmentButtonElement extends IonSegmentButton, HTMLElement { + } + var HTMLIonSegmentButtonElement: { + prototype: HTMLIonSegmentButtonElement; + new (): HTMLIonSegmentButtonElement; + }; + interface HTMLElementTagNameMap { + "ion-segment-button": HTMLIonSegmentButtonElement; + } + interface ElementTagNameMap { + "ion-segment-button": HTMLIonSegmentButtonElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-segment-button": JSXElements.IonSegmentButtonAttributes; + } + } + namespace JSXElements { + export interface IonSegmentButtonAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + checked?: boolean; + disabled?: boolean; + value?: string; + } + } +} + + +import { + Segment as IonSegment +} from './components/segment/segment'; + +declare global { + interface HTMLIonSegmentElement extends IonSegment, HTMLElement { + } + var HTMLIonSegmentElement: { + prototype: HTMLIonSegmentElement; + new (): HTMLIonSegmentElement; + }; + interface HTMLElementTagNameMap { + "ion-segment": HTMLIonSegmentElement; + } + interface ElementTagNameMap { + "ion-segment": HTMLIonSegmentElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-segment": JSXElements.IonSegmentAttributes; + } + } + namespace JSXElements { + export interface IonSegmentAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + disabled?: boolean; + value?: string; + } + } +} + + +import { + SelectOption as IonSelectOption +} from './components/select-option/select-option'; + +declare global { + interface HTMLIonSelectOptionElement extends IonSelectOption, HTMLElement { + } + var HTMLIonSelectOptionElement: { + prototype: HTMLIonSelectOptionElement; + new (): HTMLIonSelectOptionElement; + }; + interface HTMLElementTagNameMap { + "ion-select-option": HTMLIonSelectOptionElement; + } + interface ElementTagNameMap { + "ion-select-option": HTMLIonSelectOptionElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-select-option": JSXElements.IonSelectOptionAttributes; + } + } + namespace JSXElements { + export interface IonSelectOptionAttributes extends HTMLAttributes { + disabled?: boolean; + selected?: boolean; + value?: string; + } + } +} + + +import { + SelectPopover as IonSelectPopover +} from './components/select-popover/select-popover'; + +declare global { + interface HTMLIonSelectPopoverElement extends IonSelectPopover, HTMLElement { + } + var HTMLIonSelectPopoverElement: { + prototype: HTMLIonSelectPopoverElement; + new (): HTMLIonSelectPopoverElement; + }; + interface HTMLElementTagNameMap { + "ion-select-popover": HTMLIonSelectPopoverElement; + } + interface ElementTagNameMap { + "ion-select-popover": HTMLIonSelectPopoverElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-select-popover": JSXElements.IonSelectPopoverAttributes; + } + } + namespace JSXElements { + export interface IonSelectPopoverAttributes extends HTMLAttributes { + options?: SelectPopoverOption[]; + value?: string; + } + } +} + + +import { + Select as IonSelect +} from './components/select/select'; + +declare global { + interface HTMLIonSelectElement extends IonSelect, HTMLElement { + } + var HTMLIonSelectElement: { + prototype: HTMLIonSelectElement; + new (): HTMLIonSelectElement; + }; + interface HTMLElementTagNameMap { + "ion-select": HTMLIonSelectElement; + } + interface ElementTagNameMap { + "ion-select": HTMLIonSelectElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-select": JSXElements.IonSelectAttributes; + } + } + namespace JSXElements { + export interface IonSelectAttributes extends HTMLAttributes { + disabled?: boolean; + cancelText?: string; + okText?: string; + placeholder?: string; + selectOptions?: any; + interface?: string; + selectedText?: string; + multiple?: boolean; + value?: string | string[]; + } + } +} + + +import { + SkeletonText as IonSkeletonText +} from './components/skeleton-text/skeleton-text'; + +declare global { + interface HTMLIonSkeletonTextElement extends IonSkeletonText, HTMLElement { + } + var HTMLIonSkeletonTextElement: { + prototype: HTMLIonSkeletonTextElement; + new (): HTMLIonSkeletonTextElement; + }; + interface HTMLElementTagNameMap { + "ion-skeleton-text": HTMLIonSkeletonTextElement; + } + interface ElementTagNameMap { + "ion-skeleton-text": HTMLIonSkeletonTextElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-skeleton-text": JSXElements.IonSkeletonTextAttributes; + } + } + namespace JSXElements { + export interface IonSkeletonTextAttributes extends HTMLAttributes { + width?: string; + } + } +} + + +import { + Slide as IonSlide +} from './components/slide/slide'; + +declare global { + interface HTMLIonSlideElement extends IonSlide, HTMLElement { + } + var HTMLIonSlideElement: { + prototype: HTMLIonSlideElement; + new (): HTMLIonSlideElement; + }; + interface HTMLElementTagNameMap { + "ion-slide": HTMLIonSlideElement; + } + interface ElementTagNameMap { + "ion-slide": HTMLIonSlideElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-slide": JSXElements.IonSlideAttributes; + } + } + namespace JSXElements { + export interface IonSlideAttributes extends HTMLAttributes { + + } + } +} + + +import { + Slides as IonSlides +} from './components/slides/slides'; + +declare global { + interface HTMLIonSlidesElement extends IonSlides, HTMLElement { + } + var HTMLIonSlidesElement: { + prototype: HTMLIonSlidesElement; + new (): HTMLIonSlidesElement; + }; + interface HTMLElementTagNameMap { + "ion-slides": HTMLIonSlidesElement; + } + interface ElementTagNameMap { + "ion-slides": HTMLIonSlidesElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-slides": JSXElements.IonSlidesAttributes; + } + } + namespace JSXElements { + export interface IonSlidesAttributes extends HTMLAttributes { + effect?: string; + autoplay?: number; + control?: any; + direction?: 'horizontal' | 'vertical'; + initialSlide?: number; + loop?: boolean; + pager?: boolean; + paginationType?: string; + parallax?: boolean; + slidesPerView?: number | 'auto'; + spaceBetween?: number; + speed?: number; + zoom?: boolean; + keyboardControl?: boolean; + } + } +} + + +import { + Spinner as IonSpinner +} from './components/spinner/spinner'; + +declare global { + interface HTMLIonSpinnerElement extends IonSpinner, HTMLElement { + } + var HTMLIonSpinnerElement: { + prototype: HTMLIonSpinnerElement; + new (): HTMLIonSpinnerElement; + }; + interface HTMLElementTagNameMap { + "ion-spinner": HTMLIonSpinnerElement; + } + interface ElementTagNameMap { + "ion-spinner": HTMLIonSpinnerElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-spinner": JSXElements.IonSpinnerAttributes; + } + } + namespace JSXElements { + export interface IonSpinnerAttributes extends HTMLAttributes { + color?: string; + mode?: 'ios' | 'md'; + duration?: number; + name?: string; + paused?: boolean; + } + } +} + + +import { + SplitPane as IonSplitPane +} from './components/split-pane/split-pane'; + +declare global { + interface HTMLIonSplitPaneElement extends IonSplitPane, HTMLElement { + } + var HTMLIonSplitPaneElement: { + prototype: HTMLIonSplitPaneElement; + new (): HTMLIonSplitPaneElement; + }; + interface HTMLElementTagNameMap { + "ion-split-pane": HTMLIonSplitPaneElement; + } + interface ElementTagNameMap { + "ion-split-pane": HTMLIonSplitPaneElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-split-pane": JSXElements.IonSplitPaneAttributes; + } + } + namespace JSXElements { + export interface IonSplitPaneAttributes extends HTMLAttributes { + enabled?: boolean; + when?: string | boolean; + } + } +} + + +import { + TabbarButton as IonTabButton +} from './components/tab-button/tab-button'; + +declare global { + interface HTMLIonTabButtonElement extends IonTabButton, HTMLElement { + } + var HTMLIonTabButtonElement: { + prototype: HTMLIonTabButtonElement; + new (): HTMLIonTabButtonElement; + }; + interface HTMLElementTagNameMap { + "ion-tab-button": HTMLIonTabButtonElement; + } + interface ElementTagNameMap { + "ion-tab-button": HTMLIonTabButtonElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-tab-button": JSXElements.IonTabButtonAttributes; + } + } + namespace JSXElements { + export interface IonTabButtonAttributes extends HTMLAttributes { + selected?: boolean; + tab?: HTMLIonTabElement; + } + } +} + + +import { + TabHighlight as IonTabHighlight +} from './components/tab-highlight/tab-highlight'; + +declare global { + interface HTMLIonTabHighlightElement extends IonTabHighlight, HTMLElement { + } + var HTMLIonTabHighlightElement: { + prototype: HTMLIonTabHighlightElement; + new (): HTMLIonTabHighlightElement; + }; + interface HTMLElementTagNameMap { + "ion-tab-highlight": HTMLIonTabHighlightElement; + } + interface ElementTagNameMap { + "ion-tab-highlight": HTMLIonTabHighlightElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-tab-highlight": JSXElements.IonTabHighlightAttributes; + } + } + namespace JSXElements { + export interface IonTabHighlightAttributes extends HTMLAttributes { + selectedTab?: HTMLIonTabElement; + } + } +} + + +import { + Tab as IonTab +} from './components/tab/tab'; + +declare global { + interface HTMLIonTabElement extends IonTab, HTMLElement { + } + var HTMLIonTabElement: { + prototype: HTMLIonTabElement; + new (): HTMLIonTabElement; + }; + interface HTMLElementTagNameMap { + "ion-tab": HTMLIonTabElement; + } + interface ElementTagNameMap { + "ion-tab": HTMLIonTabElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-tab": JSXElements.IonTabAttributes; + } + } + namespace JSXElements { + export interface IonTabAttributes extends HTMLAttributes { + btnId?: string; + path?: string; + title?: string; + icon?: string; + badge?: string; + badgeStyle?: string; + enabled?: boolean; + show?: boolean; + tabsHideOnSubPages?: boolean; + selected?: boolean; + } + } +} + + +import { + Tabbar as IonTabbar +} from './components/tabbar/tabbar'; + +declare global { + interface HTMLIonTabbarElement extends IonTabbar, HTMLElement { + } + var HTMLIonTabbarElement: { + prototype: HTMLIonTabbarElement; + new (): HTMLIonTabbarElement; + }; + interface HTMLElementTagNameMap { + "ion-tabbar": HTMLIonTabbarElement; + } + interface ElementTagNameMap { + "ion-tabbar": HTMLIonTabbarElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-tabbar": JSXElements.IonTabbarAttributes; + } + } + namespace JSXElements { + export interface IonTabbarAttributes extends HTMLAttributes { + placement?: string; + tabs?: HTMLIonTabElement[]; + selectedTab?: HTMLIonTabElement; + layout?: string; + highlight?: boolean; + translucent?: boolean; + } + } +} + + +import { + Tabs as IonTabs +} from './components/tabs/tabs'; + +declare global { + interface HTMLIonTabsElement extends IonTabs, HTMLElement { + } + var HTMLIonTabsElement: { + prototype: HTMLIonTabsElement; + new (): HTMLIonTabsElement; + }; + interface HTMLElementTagNameMap { + "ion-tabs": HTMLIonTabsElement; + } + interface ElementTagNameMap { + "ion-tabs": HTMLIonTabsElement; + } + namespace JSX { + interface IntrinsicElements { + "ion-tabs": JSXElements.IonTabsAttributes; + } + } + namespace JSXElements { + export interface IonTabsAttributes extends HTMLAttributes { + name?: string; + tabbarHidden?: boolean; + tabbarLayout?: string; + tabbarPlacement?: string; + tabbarHighlight?: boolean; + translucent?: boolean; + } + } +} + import { Searchbar as IonSearchbar diff --git a/packages/core/src/components/fab/fab.ios.scss b/packages/core/src/components/fab-button/fab-button.ios.scss similarity index 84% rename from packages/core/src/components/fab/fab.ios.scss rename to packages/core/src/components/fab-button/fab-button.ios.scss index 9340a5f3a3..f63d57726e 100755 --- a/packages/core/src/components/fab/fab.ios.scss +++ b/packages/core/src/components/fab-button/fab-button.ios.scss @@ -1,26 +1,26 @@ -@import "./fab"; -@import "./fab.ios.vars"; +@import "./fab-button"; +@import "./fab-button.ios.vars"; // iOS FAB Button // -------------------------------------------------- -.fab-ios { +.fab-button-ios { color: $fab-ios-text-color; background-color: $fab-ios-background-color; } -.fab-ios.activated { +.fab-button-ios.activated { background-color: $fab-ios-background-color-activated; } -.fab-ios .icon { +.fab-button-ios .icon { fill: $fab-ios-icon-fill-color; } // FAB buttons in a list // -------------------------------------------------- -.fab-ios-in-list { +.fab-button-ios-in-list { color: $fab-ios-list-button-text-color; background-color: $fab-ios-list-button-background-color; @@ -28,11 +28,11 @@ opacity $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay; } -.fab-ios-in-list.activated { +.fab-button-ios-in-list.activated { background-color: $fab-ios-list-button-background-color-activated; } -.fab-ios-in-list .icon { +.fab-button-ios-in-list .icon { fill: $fab-ios-list-button-icon-fill-color; } @@ -60,16 +60,16 @@ $bg-color-activated: color-shade($bg-color); $fg-color: $color-contrast; - .fab-ios-#{$color-name} { + .fab-button-ios-#{$color-name} { color: $fg-color; background-color: $bg-color; } - .fab-ios-#{$color-name} .icon { + .fab-button-ios-#{$color-name} .icon { fill: $fg-color; } - .fab-ios-#{$color-name}.activated { + .fab-button-ios-#{$color-name}.activated { background-color: $bg-color-activated; } diff --git a/packages/core/src/components/fab/fab.ios.vars.scss b/packages/core/src/components/fab-button/fab-button.ios.vars.scss similarity index 100% rename from packages/core/src/components/fab/fab.ios.vars.scss rename to packages/core/src/components/fab-button/fab-button.ios.vars.scss diff --git a/packages/core/src/components/fab/fab.md.scss b/packages/core/src/components/fab-button/fab-button.md.scss similarity index 83% rename from packages/core/src/components/fab/fab.md.scss rename to packages/core/src/components/fab-button/fab-button.md.scss index 40286faff6..f6ed5477a6 100755 --- a/packages/core/src/components/fab/fab.md.scss +++ b/packages/core/src/components/fab-button/fab-button.md.scss @@ -1,10 +1,10 @@ -@import "./fab"; -@import "./fab.md.vars"; +@import "./fab-button"; +@import "./fab-button.md.vars"; // Material Design FAB Button // -------------------------------------------------- -.fab-md { +.fab-button-md { color: $fab-md-text-color; background-color: $fab-md-background-color; @@ -15,12 +15,12 @@ color $fab-button-md-transition-duration $fab-button-md-transition-timing-function; } -.fab-md.activated { +.fab-button-md.activated { background-color: $fab-md-background-color-activated; box-shadow: $fab-md-box-shadow-activated; } -.fab-md .icon { +.fab-button-md .icon { fill: $fab-md-icon-fill-color; } @@ -28,7 +28,7 @@ // FAB buttons in a list // -------------------------------------------------- -.fab-md-in-list { +.fab-button-md-in-list { color: $fab-md-list-button-text-color; background-color: $fab-md-list-button-background-color; @@ -39,11 +39,11 @@ color $fab-button-md-transition-duration $fab-button-md-transition-timing-function; } -.fab-md-in-list.activated { +.fab-button-md-in-list.activated { background-color: $fab-md-list-button-background-color-activated; } -.fab-md-in-list .icon { +.fab-button-md-in-list .icon { fill: $fab-md-list-button-icon-fill-color; } @@ -51,7 +51,7 @@ // Material Design FAB Ripple // -------------------------------------------------- -.fab-md .button-effect { +.fab-button-md .button-effect { background-color: color-contrast($colors-md, $fab-md-background-color); } @@ -65,20 +65,20 @@ $bg-color-activated: color-shade($bg-color); $fg-color: $color-contrast; - .fab-md-#{$color-name} { + .fab-button-md-#{$color-name} { color: $fg-color; background-color: $bg-color; } - .fab-md-#{$color-name} .icon { + .fab-button-md-#{$color-name} .icon { fill: $fg-color; } - .fab-md-#{$color-name}.activated { + .fab-button-md-#{$color-name}.activated { background-color: $bg-color-activated; } - .fab-md-#{$color-name} .button-effect { + .fab-button-md-#{$color-name} .button-effect { background-color: $fg-color; } } diff --git a/packages/core/src/components/fab/fab.md.vars.scss b/packages/core/src/components/fab-button/fab-button.md.vars.scss similarity index 100% rename from packages/core/src/components/fab/fab.md.vars.scss rename to packages/core/src/components/fab-button/fab-button.md.vars.scss diff --git a/packages/core/src/components/fab-button/fab-button.scss b/packages/core/src/components/fab-button/fab-button.scss new file mode 100755 index 0000000000..844df50af5 --- /dev/null +++ b/packages/core/src/components/fab-button/fab-button.scss @@ -0,0 +1,95 @@ +@import "./fab-button.vars"; + +// Floating Action Buttons +// -------------------------------------------------- + +.fab-button { + @include text-align(center); + @include appearance(none); + @include border-radius(50%); + + position: relative; + z-index: 0; + display: block; + overflow: hidden; + + width: $fab-size; + height: $fab-size; + + font-size: 14px; + line-height: $fab-size; + text-overflow: ellipsis; + text-transform: none; + white-space: nowrap; + cursor: pointer; + transition: background-color, opacity 100ms linear; + + background-clip: padding-box; + font-kerning: none; + user-select: none; + + contain: strict; +} + +.fab-button ion-icon { + flex: 1; + + font-size: 2.4rem; + line-height: 1.8rem; +} + +// FAB Mini +// -------------------------------------------------- + +ion-fab-button[mini] .fab-button { + @include margin(($fab-size - $fab-mini-size) / 2); + + width: $fab-mini-size; + height: $fab-mini-size; + + line-height: $fab-mini-size; +} + +// FAB Close Icon +// -------------------------------------------------- + +.fab-button-close-icon { + @include position(0, 0, null, 0); + + position: absolute; + + height: 100%; + + opacity: 0; + transform: scale(.4) rotateZ(-45deg); + transition: all ease-in-out 300ms; + transition-property: transform, opacity; +} + +.fab-button-close-icon .icon-inner { + display: flex; + + align-items: center; + justify-content: center; + + height: 100%; +} + + +// FAB Animation +// -------------------------------------------------- + +.fab-button .button-inner { + transition: all ease-in-out 300ms; + transition-property: transform, opacity; +} + +.fab-button-close-active .fab-button-close-icon { + opacity: 1; + transform: scale(1) rotateZ(0deg); +} + +.fab-button-close-active .button-inner { + opacity: 0; + transform: scale(.4) rotateZ(45deg); +} diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx new file mode 100755 index 0000000000..b03d56df72 --- /dev/null +++ b/packages/core/src/components/fab-button/fab-button.tsx @@ -0,0 +1,149 @@ +import { Component, CssClassMap, Element, Prop, State } from '@stencil/core'; +import { createThemedClasses, getElementClassObject } from '../../utils/theme'; + + +@Component({ + tag: 'ion-fab-button', + styleUrls: { + ios: 'fab-button.ios.scss', + md: 'fab-button.md.scss' + } +}) +export class FabButton { + @Element() private el: HTMLElement; + + /** + * @input {string} The color to use from your Sass `$colors` map. + * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. + * For more information, see [Theming your App](/docs/theming/theming-your-app). + */ + @Prop() color: string; + + /** + * @input {string} The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + */ + @Prop() mode: 'ios' | 'md'; + + /** + * @input {string} Contains a URL or a URL fragment that the hyperlink points to. + * If this property is set, an anchor tag will be rendered. + */ + @Prop() href: string; + + /** + * @input {boolean} If true, adds transparency to the fab. + * Only affects `ios` mode. Defaults to `false`. + */ + @Prop() translucent: boolean = false; + + @Prop() activated: boolean = false; + @Prop() toggleActive: Function = () => {}; + + @Prop() show: boolean = false; + + @State() private inContainer: boolean = false; + @State() private inList: boolean = false; + + /** + * @input {boolean} If true, sets the button into a disabled state. + */ + @Prop() disabled: boolean = false; + + componentDidLoad() { + const parentNode = this.el.parentNode.nodeName; + + this.inList = (parentNode === 'ION-FAB-LIST'); + this.inContainer = (parentNode === 'ION-FAB'); + } + + + clickedFab() { + if (this.inContainer) { + this.toggleActive(); + } + } + + /** + * @hidden + * Get the classes for fab buttons in lists + */ + getFabListClassList() { + if (!this.inList) { + return []; + } + let listClasses = [ + `fab-button-in-list`, + `fab-button-${this.mode}-in-list` + ]; + + if (this.translucent) { + listClasses.push(`fab-button-translucent-${this.mode}-in-list`); + } + + return listClasses; + } + + /** + * @hidden + * Get the close active class for fab buttons + */ + getFabActiveClassList() { + if (!this.activated) { + return []; + } + return [ + `fab-button-close-active` + ]; + } + + /** + * @hidden + * Get the show class for fab buttons + */ + getFabShowClassList() { + if (!this.show) { + return []; + } + return [ + `fab-button-show` + ]; + } + + render() { + const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button'); + const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {}; + const hostClasses = getElementClassObject(this.el.classList); + + const elementClasses: CssClassMap = [] + .concat( + this.getFabListClassList(), + this.getFabActiveClassList(), + this.getFabShowClassList() + ) + .reduce((prevValue, cssClass) => { + prevValue[cssClass] = true; + return prevValue; + }, {}); + + const TagType = this.href ? 'a' : 'button'; + + const fabClasses = { + ...themedClasses, + ...translucentClasses, + ...hostClasses, + ...elementClasses + }; + + return ( + + + + + +
+ + ); + } +} diff --git a/packages/core/src/components/fab-button/fab-button.vars.scss b/packages/core/src/components/fab-button/fab-button.vars.scss new file mode 100755 index 0000000000..33caa1ffbb --- /dev/null +++ b/packages/core/src/components/fab-button/fab-button.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals"; + +// Floating Action Buttons +// -------------------------------------------------- + +/// @prop - Width and height of the FAB button +$fab-size: 56px !default; + +/// @prop - Width and height of the mini FAB button +$fab-mini-size: 40px !default; + +/// @prop - Background color of the button in a list +$fab-list-button-background-color: #f4f4f4 !default; diff --git a/packages/core/src/components/fab-button/readme.md b/packages/core/src/components/fab-button/readme.md new file mode 100644 index 0000000000..ea2329b919 --- /dev/null +++ b/packages/core/src/components/fab-button/readme.md @@ -0,0 +1,126 @@ +# ion-fab-button + +Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `FAB`. They need to be wrapped with an `` component in order to be fixed over the content: + +```html + + + + Button + + + + Button + +``` + +If the FAB button is not wrapped with ``, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors: + +```html + + Default + + + Mini + + + Primary + Secondary + Danger + Light + Dark + +``` + + + + + +## Properties + +#### activated + +boolean + + +#### color + +string + + +#### disabled + +boolean + + +#### href + +string + + +#### mode + +any + + +#### show + +boolean + + +#### toggleActive + +any + + +#### translucent + +boolean + + +## Attributes + +#### activated + +boolean + + +#### color + +string + + +#### disabled + +boolean + + +#### href + +string + + +#### mode + +any + + +#### show + +boolean + + +#### toggleActive + +any + + +#### translucent + +boolean + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/fab-container/fab-container.tsx b/packages/core/src/components/fab-container/fab-container.tsx deleted file mode 100644 index 39dba7829c..0000000000 --- a/packages/core/src/components/fab-container/fab-container.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, Element, Method, State } from '@stencil/core'; - - -@Component({ - tag: 'ion-fab', -}) -export class FabContainer { - @Element() private el: HTMLElement; - - @State() activated = false; - - /** - * Close an active FAB list container - */ - @Method() - close() { - this.activated = false; - } - - toggleActive = () => { - this.activated = !this.activated; - } - - render() { - const fab: any = this.el.querySelector('ion-fab-button'); - fab.toggleActive = this.toggleActive; - fab.activated = this.activated; - - const lists = this.el.querySelectorAll('ion-fab-list'); - for (let i = 0, length = lists.length; i < length; i += 1) { - lists[i].activated = this.activated; - } - - return ( - - ); - } - -} diff --git a/packages/core/src/components/fab-container/readme.md b/packages/core/src/components/fab-container/readme.md deleted file mode 100644 index 44ba95656b..0000000000 --- a/packages/core/src/components/fab-container/readme.md +++ /dev/null @@ -1,91 +0,0 @@ -# ion-fab - -`` is not a FAB button by itself but a container that assist the fab button (` - - - - - - - -``` - -Ionic's FAB also supports "material design's fab speed dial". It is a normal fab button -that shows a list of related actions when clicked. - -The same `ion-fab` container can contain several `ion-fab-list` with different side values: -`top`, `bottom`, `left` and `right`. For example, if you want to have a list of button that are -on the top of the main button, you should use `side="top"` and so on. By default, if side is ommited, `side="bottom"`. - - -```html - - - - - - - - - - - - - - -``` - -A FAB speed dial can also be closed programatically. - -```html - - - - - - - - - -``` - -```ts -share(socialNet: string, fab: FabContainer) { - fab.close(); - console.log("Sharing in", socialNet); -} -``` - - - - - -## Methods - -#### close() - - - ----------------------------------------------- - -*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/fab-list/fab-list.scss b/packages/core/src/components/fab-list/fab-list.scss new file mode 100644 index 0000000000..4f8f7efd32 --- /dev/null +++ b/packages/core/src/components/fab-list/fab-list.scss @@ -0,0 +1,65 @@ +@import './fab-list.vars'; + +// Floating Action Button List +// -------------------------------------------------- + +ion-fab-list { + @include margin($fab-size + $fab-list-margin, 0); + + position: absolute; + top: 0; + display: none; + + flex-direction: column; + align-items: center; + + min-width: $fab-size; + min-height: $fab-size; +} + +.fab-list-active { + display: flex; +} + +.fab-button-in-list { + @include margin(8px, 0); + + width: $fab-mini-size; + height: $fab-mini-size; + + opacity: 0; + visibility: hidden; + transform: scale(0); +} + +.fab-button-in-list.fab-button-show { + opacity: 1; + visibility: visible; + transform: scale(1); +} + +ion-fab-list[side=left] .fab-button-in-list, +ion-fab-list[side=right] .fab-button-in-list { + @include margin(0, 8px); +} + +ion-fab-list[side=top] { + top: auto; + bottom: 0; + + flex-direction: column-reverse; +} + +ion-fab-list[side=left] { + @include margin(0, $fab-size + $fab-list-margin); + @include position-horizontal(null, 0); + + flex-direction: row-reverse; +} + +ion-fab-list[side=right] { + @include margin(0, $fab-size + $fab-list-margin); + @include position(null, null, null, 0); + + flex-direction: row; +} diff --git a/packages/core/src/components/fab-list/fab-list.tsx b/packages/core/src/components/fab-list/fab-list.tsx index fecfd25bd7..ade5e7ed4e 100644 --- a/packages/core/src/components/fab-list/fab-list.tsx +++ b/packages/core/src/components/fab-list/fab-list.tsx @@ -3,6 +3,7 @@ import { Component, Element, Prop, PropDidChange } from '@stencil/core'; @Component({ tag: 'ion-fab-list', + styleUrl: 'fab-list.scss' }) export class FabList { @Element() private el: HTMLIonFabElement; diff --git a/packages/core/src/components/fab-list/fab-list.vars.scss b/packages/core/src/components/fab-list/fab-list.vars.scss new file mode 100644 index 0000000000..1a8f9714db --- /dev/null +++ b/packages/core/src/components/fab-list/fab-list.vars.scss @@ -0,0 +1,9 @@ +@import "../../themes/ionic.globals"; + +@import "../fab-button/fab-button.vars"; + +// Floating Action Button List +// -------------------------------------------------- + +/// @prop - Margin of the FAB List +$fab-list-margin: 10px !default; diff --git a/packages/core/src/components/fab-list/readme.md b/packages/core/src/components/fab-list/readme.md index 04a7b3f095..c6c3a42ef1 100644 --- a/packages/core/src/components/fab-list/readme.md +++ b/packages/core/src/components/fab-list/readme.md @@ -1,19 +1,26 @@ # ion-fab-list -`ion-fab-list` is a container for multiple FAB buttons. They are components of `ion-fab` and allow you to specificy the buttons position, left, right, top, bottom. +The `ion-fab-list` element is a container for multiple FAB buttons. This collection of FAB buttons contains actions related to the main FAB button and is flung out on click. To specify the side of the main button to show the list on, use the following: + +``` +[top] - Show the list of buttons above the main FAB button +[bottom] - Show the list of buttons under the main FAB button +[left] - Show the list of buttons to the left of the main FAB button +[right] - Show the list of buttons to the right of the main FAB button +``` ```html - - - - - - - - - - - + + Share + + Facebook + Twitter + Youtube + + + Vimeo + + ``` diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss old mode 100755 new mode 100644 index b223ec3c36..e6d3278c3d --- a/packages/core/src/components/fab/fab.scss +++ b/packages/core/src/components/fab/fab.scss @@ -1,57 +1,6 @@ @import "./fab.vars"; -// Floating Action Buttons -// -------------------------------------------------- - -.fab { - @include text-align(center); - @include appearance(none); - @include border-radius(50%); - - position: relative; - z-index: 0; - display: block; - overflow: hidden; - - width: $fab-size; - height: $fab-size; - - font-size: 14px; - line-height: $fab-size; - text-overflow: ellipsis; - text-transform: none; - white-space: nowrap; - cursor: pointer; - transition: background-color, opacity 100ms linear; - - background-clip: padding-box; - font-kerning: none; - user-select: none; - - contain: strict; -} - -.fab ion-icon { - flex: 1; - - font-size: 2.4rem; - line-height: 1.8rem; -} - -// FAB Mini -// -------------------------------------------------- - -ion-fab-button[mini] .fab { - @include margin(($fab-size - $fab-mini-size) / 2); - - width: $fab-mini-size; - height: $fab-mini-size; - - line-height: $fab-mini-size; -} - - -// FAB Container +// Floating Action Button Container // -------------------------------------------------- ion-fab { @@ -120,113 +69,3 @@ ion-fab { bottom: -$fab-size / 2; } } - - -// FAB List (Speed Dial) -// -------------------------------------------------- - -ion-fab-list { - @include margin($fab-size + $fab-list-margin, 0); - - position: absolute; - top: 0; - display: none; - - flex-direction: column; - align-items: center; - - min-width: $fab-size; - min-height: $fab-size; -} - -.fab-in-list { - @include margin(8px, 0); - - width: $fab-mini-size; - height: $fab-mini-size; - - opacity: 0; - visibility: hidden; - transform: scale(0); -} - -.fab-in-list.show { - opacity: 1; - visibility: visible; - transform: scale(1); -} - -ion-fab-list[side=left] .fab-in-list, -ion-fab-list[side=right] .fab-in-list { - @include margin(0, 8px); -} - -ion-fab-list[side=top] { - top: auto; - bottom: 0; - - flex-direction: column-reverse; -} - -ion-fab-list[side=left] { - @include margin(0, $fab-size + $fab-list-margin); - @include position-horizontal(null, 0); - - flex-direction: row-reverse; -} - -ion-fab-list[side=right] { - @include margin(0, $fab-size + $fab-list-margin); - @include position(null, null, null, 0); - - flex-direction: row; -} - - -// FAB Close Icon -// -------------------------------------------------- - -.fab-close-icon { - @include position(0, 0, null, 0); - - position: absolute; - - height: 100%; - - opacity: 0; - transform: scale(.4) rotateZ(-45deg); - transition: all ease-in-out 300ms; - transition-property: transform, opacity; -} - -.fab-close-icon .icon-inner { - display: flex; - - align-items: center; - justify-content: center; - - height: 100%; -} - - -// FAB Animation -// -------------------------------------------------- - -.fab-list-active { - display: flex; -} - -.fab .button-inner { - transition: all ease-in-out 300ms; - transition-property: transform, opacity; -} - -.fab-close-active .fab-close-icon { - opacity: 1; - transform: scale(1) rotateZ(0deg); -} - -.fab-close-active .button-inner { - opacity: 0; - transform: scale(.4) rotateZ(45deg); -} diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx old mode 100755 new mode 100644 index 61f45ca2c6..ed3956e700 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -1,149 +1,40 @@ -import { Component, CssClassMap, Element, Prop, State } from '@stencil/core'; -import { createThemedClasses, getElementClassObject } from '../../utils/theme'; +import { Component, Element, Method, State } from '@stencil/core'; @Component({ - tag: 'ion-fab-button', - styleUrls: { - ios: 'fab.ios.scss', - md: 'fab.md.scss' - } + tag: 'ion-fab', + styleUrl: 'fab.scss' }) -export class FabButton { +export class Fab { @Element() private el: HTMLElement; - /** - * @input {string} The color to use from your Sass `$colors` map. - * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. - * For more information, see [Theming your App](/docs/theming/theming-your-app). - */ - @Prop() color: string; + @State() activated = false; /** - * @input {string} The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + * Close an active FAB list container */ - @Prop() mode: 'ios' | 'md'; - - /** - * @input {string} Contains a URL or a URL fragment that the hyperlink points to. - * If this property is set, an anchor tag will be rendered. - */ - @Prop() href: string; - - /** - * @input {boolean} If true, adds transparency to the fab. - * Only affects `ios` mode. Defaults to `false`. - */ - @Prop() translucent: boolean = false; - - @Prop() activated: boolean = false; - @Prop() toggleActive: Function = () => {}; - - @Prop() show: boolean = false; - - @State() private inContainer: boolean = false; - @State() private inList: boolean = false; - - /** - * @input {boolean} If true, sets the button into a disabled state. - */ - @Prop() disabled: boolean = false; - - componentDidLoad() { - const parentNode = this.el.parentNode.nodeName; - - this.inList = (parentNode === 'ION-FAB-LIST'); - this.inContainer = (parentNode === 'ION-FAB'); + @Method() + close() { + this.activated = false; } - - clickedFab() { - if (this.inContainer) { - this.toggleActive(); - } - } - - /** - * @hidden - * Get the classes for fab buttons in lists - */ - getFabListClassList() { - if (!this.inList) { - return []; - } - let listClasses = [ - `fab-in-list`, - `fab-${this.mode}-in-list` - ]; - - if (this.translucent) { - listClasses.push(`fab-translucent-${this.mode}-in-list`); - } - - return listClasses; - } - - /** - * @hidden - * Get the close active class for fab buttons - */ - getFabActiveClassList() { - if (!this.activated) { - return []; - } - return [ - `fab-close-active` - ]; - } - - /** - * @hidden - * Get the show class for fab buttons - */ - getFabShowClassList() { - if (!this.show) { - return []; - } - return [ - `show` - ]; + toggleActive = () => { + this.activated = !this.activated; } render() { - const themedClasses = createThemedClasses(this.mode, this.color, 'fab'); - const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-translucent') : {}; - const hostClasses = getElementClassObject(this.el.classList); + const fab: any = this.el.querySelector('ion-fab-button'); + fab.toggleActive = this.toggleActive; + fab.activated = this.activated; - const elementClasses: CssClassMap = [] - .concat( - this.getFabListClassList(), - this.getFabActiveClassList(), - this.getFabShowClassList() - ) - .reduce((prevValue, cssClass) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); - - const TagType = this.href ? 'a' : 'button'; - - const fabClasses = { - ...themedClasses, - ...translucentClasses, - ...hostClasses, - ...elementClasses - }; + const lists = this.el.querySelectorAll('ion-fab-list'); + for (let i = 0, length = lists.length; i < length; i += 1) { + lists[i].activated = this.activated; + } return ( - - - - - -
- + ); } + } diff --git a/packages/core/src/components/fab/fab.vars.scss b/packages/core/src/components/fab/fab.vars.scss old mode 100755 new mode 100644 index 1569c08319..4f5e4dc46f --- a/packages/core/src/components/fab/fab.vars.scss +++ b/packages/core/src/components/fab/fab.vars.scss @@ -1,19 +1,9 @@ @import "../../themes/ionic.globals"; -// Floating Action Buttons +@import "../fab-button/fab-button.vars"; + +// Floating Action Button Container // -------------------------------------------------- -/// @prop - Width and height of the FAB button -$fab-size: 56px !default; - -/// @prop - Width and height of the mini FAB button -$fab-mini-size: 40px !default; - /// @prop - Margin of the FAB Container $fab-content-margin: 10px !default; - -/// @prop - Margin of the FAB List -$fab-list-margin: 10px !default; - -/// @prop - Background color of the button in a list -$fab-list-button-background-color: #f4f4f4 !default; diff --git a/packages/core/src/components/fab/readme.md b/packages/core/src/components/fab/readme.md index 1d7bfd04be..ea7f43f646 100644 --- a/packages/core/src/components/fab/readme.md +++ b/packages/core/src/components/fab/readme.md @@ -1,121 +1,62 @@ # ion-fab -FABs (Floating Action Buttons) are standard material design components. They are shaped as a circle that represents a promoted action. When pressed, it may contain more related actions. -FABs as its name suggests are floating over the content in a fixed position. This is not achieved exclusively with `` but it has to wrapped with the `` component, like this: +The `` element is a container element that places the FAB button (``) in a fixed position that does not scroll with the content. It is also used to display a list of FAB buttons. It accepts the following attributes to position the FAB button element with respect to the content: + +``` +[top] - Places the container at the top of the content +[bottom] - Places the container at the bottom of the content +[left] - Places the container on the left +[right] - Places the container on the right +[middle] - Places the container in the middle vertically +[center] - Places the container in the center horizontally +[edge] - Used to place the container between the content and the header/footer +``` + ```html + - - - - + + Button + - - + + + Button + ``` -In case the button is not wrapped with ``, the fab button will behave like a normal button, scrolling with the content. +Ionic's FAB also supports FAB lists. This is a list of related buttons that show when the main FAB button is clicked. + +The same `ion-fab` container can contain several `ion-fab-list` elements with different side values: +`top`, `bottom`, `left` and `right`. If side is ommited, the default is `bottom`. + ```html - - - - - - - - - - + + + + Share + + Facebook + Twitter + Youtube + + + Vimeo + + + ``` -## Properties +## Methods -#### activated - -boolean - - -#### color - -string - - -#### disabled - -boolean - - -#### href - -string - - -#### mode - -any - - -#### show - -boolean - - -#### toggleActive - -any - - -#### translucent - -boolean - - -## Attributes - -#### activated - -boolean - - -#### color - -string - - -#### disabled - -boolean - - -#### href - -string - - -#### mode - -any - - -#### show - -boolean - - -#### toggleActive - -any - - -#### translucent - -boolean +#### close() diff --git a/packages/core/src/components/fab/test/basic/index.html b/packages/core/src/components/fab/test/basic/index.html index 3dc83ec13f..27a5b74434 100644 --- a/packages/core/src/components/fab/test/basic/index.html +++ b/packages/core/src/components/fab/test/basic/index.html @@ -21,6 +21,7 @@ 
log
Test + FAB diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 455d7a8448..762669fefd 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -26,9 +26,9 @@ export { ChipButton } from './components/chip-button/chip-button'; export { Column } from './components/col/col'; export { Content } from './components/content/content'; export { Datetime } from './components/datetime/datetime'; -export { FabContainer } from './components/fab-container/fab-container'; +export { Fab } from './components/fab/fab'; export { FabList } from './components/fab-list/fab-list'; -export { FabButton } from './components/fab/fab'; +export { FabButton } from './components/fab-button/fab-button'; export { Footer } from './components/footer/footer'; export { Gesture, GestureCallback, GestureDetail } from './components/gesture/gesture'; export { PanRecognizer } from './components/gesture/recognizers'; diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 958a8c2042..ee8509850e 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -14,7 +14,8 @@ exports.config = { { components: ['ion-checkbox'] }, { components: ['ion-chip', 'ion-chip-button'] }, { components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] }, - { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] }, + { components: ['ion-fab', 'ion-fab-list'] }, + { components: ['ion-fab-button'] }, { components: ['ion-gesture'], priority: 'low' }, { components: ['ion-grid', 'ion-row', 'ion-col'] }, { components: ['ion-item', 'ion-item-divider', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text'] },