diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index d7323bc9bf..82a7abe0ec 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -754,7 +754,7 @@ declare global { import { FabContainer as IonFab -} from './components/fab/fab-container'; +} from './components/fab-container/fab-container'; declare global { interface HTMLIonFabElement extends IonFab, HTMLElement { @@ -784,7 +784,7 @@ declare global { import { FabList as IonFabList -} from './components/fab/fab-list'; +} from './components/fab-list/fab-list'; declare global { interface HTMLIonFabListElement extends IonFabList, HTMLElement { diff --git a/packages/core/src/components/fab-container/fab-container.tsx b/packages/core/src/components/fab-container/fab-container.tsx new file mode 100644 index 0000000000..39dba7829c --- /dev/null +++ b/packages/core/src/components/fab-container/fab-container.tsx @@ -0,0 +1,39 @@ +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 new file mode 100644 index 0000000000..44ba95656b --- /dev/null +++ b/packages/core/src/components/fab-container/readme.md @@ -0,0 +1,91 @@ +# 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/fab-list.tsx b/packages/core/src/components/fab-list/fab-list.tsx similarity index 100% rename from packages/core/src/components/fab/fab-list.tsx rename to packages/core/src/components/fab-list/fab-list.tsx diff --git a/packages/core/src/components/fab-list/readme.md b/packages/core/src/components/fab-list/readme.md new file mode 100644 index 0000000000..e6db2d5cfd --- /dev/null +++ b/packages/core/src/components/fab-list/readme.md @@ -0,0 +1,25 @@ +# ion-fab-list + + + + + + +## Properties + +#### activated + +boolean + + +## Attributes + +#### activated + +boolean + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/fab/fab-container.tsx b/packages/core/src/components/fab/fab-container.tsx deleted file mode 100644 index 5c5906ea65..0000000000 --- a/packages/core/src/components/fab/fab-container.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { Component, Element, Method, State } from '@stencil/core'; - - -/** - * @name FabContainer - * @module ionic - * - * @description - * `` 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); - * } - * ``` - * - * @demo /docs/demos/src/fab/ - * @see {@link /docs/components#fabs FAB Component Docs} - */ - -@Component({ - tag: 'ion-fab', -}) -export class FabContainer { - @Element() private el: HTMLElement; - - @State() activated: boolean = 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/fab.tsx b/packages/core/src/components/fab/fab.tsx index b663616b72..61f45ca2c6 100755 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -2,51 +2,6 @@ import { Component, CssClassMap, Element, Prop, State } from '@stencil/core'; import { createThemedClasses, getElementClassObject } from '../../utils/theme'; -/** - * @name FabButton - * @module ionic - * - * @description - * 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: - * - * ```html - * - * - * - * - * - * - * - * - * - * - * ``` - * - * In case the button is not wrapped with ``, the fab button will behave like a normal button, scrolling with the content. - * - * See [ion-fab] to learn more information about how to position the fab button. - * - * @property [mini] - Makes a fab button with a reduced size. - * - * @usage - * - * ```html - * - * - * - * - * - * - * - * - * - * - * ``` - * - * @demo /docs/demos/src/fab/ - * @see {@link /docs/components#fabs FAB Component Docs} - */ @Component({ tag: 'ion-fab-button', styleUrls: { diff --git a/packages/core/src/components/fab/readme.md b/packages/core/src/components/fab/readme.md index dd0a9b1d06..1d7bfd04be 100644 --- a/packages/core/src/components/fab/readme.md +++ b/packages/core/src/components/fab/readme.md @@ -1,13 +1,121 @@ # 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: + +```html + + + + + + + + + +``` + +In case the button is not wrapped with ``, the fab button will behave like a normal button, scrolling with the content. + +```html + + + + + + + + + + +``` -## Methods +## Properties -#### close() +#### 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 diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index d76ea76570..b90aae8294 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -32,8 +32,8 @@ export { Chip } from './components/chip/chip'; export { ChipButton } from './components/chip-button/chip-button'; export { Content } from './components/content/content'; export { Datetime } from './components/datetime/datetime'; -export { FabContainer } from './components/fab/fab-container'; -export { FabList } from './components/fab/fab-list'; +export { FabContainer } from './components/fab-container/fab-container'; +export { FabList } from './components/fab-list/fab-list'; export { FabButton } from './components/fab/fab'; export { Footer } from './components/footer/footer'; export { Gesture, GestureCallback, GestureDetail } from './components/gesture/gesture';