javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(fab): move fab-list and fab-container to separate directories

Browse Source
This commit is contained in:
Adam Bradley
2017-11-28 18:06:51 -06:00
parent ce6d79ceb9
commit fb6de28006
9 changed files with 269 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components.d.ts vendored
View File

@ -754,7 +754,7 @@ declare global {
import { import {
FabContainer as IonFab FabContainer as IonFab
} from './components/fab/fab-container'; } from './components/fab-container/fab-container';
declare global { declare global {
interface HTMLIonFabElement extends IonFab, HTMLElement { interface HTMLIonFabElement extends IonFab, HTMLElement {
@ -784,7 +784,7 @@ declare global {
import { import {
FabList as IonFabList FabList as IonFabList
} from './components/fab/fab-list'; } from './components/fab-list/fab-list';
declare global { declare global {
interface HTMLIonFabListElement extends IonFabList, HTMLElement { interface HTMLIonFabListElement extends IonFabList, HTMLElement {

39
packages/core/src/components/fab-container/fab-container.tsx Normal file
View File

@ -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 (
<slot></slot>
);
}
}

91
packages/core/src/components/fab-container/readme.md Normal file
View File

@ -0,0 +1,91 @@
# ion-fab
`<ion-fab>` is not a FAB button by itself but a container that assist the fab button (`<button ion-fab>`) allowing it
to be placed in fixed position that does not scroll with the content. It is also used to implement "material design speed dial",
ie. a FAB buttons displays a small lists of related actions when clicked.
```
[top] - Places the container on the top of the content
[bottom] - Places the container on the bottom of the content
[left] - Places the container on the left
[right] - Places the container on the right
[middle] - Places the container on the middle vertically
[center] - Places the container on the center horizontally
[edge] - Used to place the container between the content and the header/footer
```
```html
<!-- this fab is placed at top right -->
<ion-content>
<ion-fab top right>
<button ion-fab>Button</button>
</ion-fab>
<!-- this fab is placed at the center of the content viewport -->
<ion-fab center middle>
<button ion-fab>Button</button>
</ion-fab>
</ion-content>
```
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
<ion-content>
<!-- this fab is placed at bottom right -->
<ion-fab bottom right >
<button ion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab>Facebook</button>
<button ion-fab>Twitter</button>
<button ion-fab>Youtube</button>
</ion-fab-list>
<ion-fab-list side="left">
<button ion-fab>Vimeo</button>
</ion-fab-list>
</ion-fab>
</ion-content>
```
A FAB speed dial can also be closed programatically.
```html
<ion-content>
<ion-fab bottom right #fab>
<button ion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab (click)="share('facebook', fab)">Facebook</button>
<button ion-fab (click)="share('twitter', fab)">Twitter</button>
</ion-fab-list>
</ion-fab>
</ion-content>
```
```ts
share(socialNet: string, fab: FabContainer) {
fab.close();
console.log("Sharing in", socialNet);
}
```
<!-- Auto Generated Below -->
## Methods
#### close()
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

0
packages/core/src/components/fab/fab-list.tsx → packages/core/src/components/fab-list/fab-list.tsx
View File

25
packages/core/src/components/fab-list/readme.md Normal file
View File

@ -0,0 +1,25 @@
# ion-fab-list
<!-- Auto Generated Below -->
## Properties
#### activated
boolean
## Attributes
#### activated
boolean
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

121
packages/core/src/components/fab/fab-container.tsx
View File

@ -1,121 +0,0 @@
import { Component, Element, Method, State } from '@stencil/core';
/**
* @name FabContainer
* @module ionic
*
* @description
* `<ion-fab>` is not a FAB button by itself but a container that assist the fab button (`<button ion-fab>`) allowing it
* to be placed in fixed position that does not scroll with the content. It is also used to implement "material design speed dial",
* ie. a FAB buttons displays a small lists of related actions when clicked.
*
* @property [top] - Places the container on the top of the content
* @property [bottom] - Places the container on the bottom of the content
* @property [left] - Places the container on the left
* @property [right] - Places the container on the right
* @property [middle] - Places the container on the middle vertically
* @property [center] - Places the container on the center horizontally
* @property [edge] - Used to place the container between the content and the header/footer
*
* @usage
*
* ```html
* <!-- this fab is placed at top right -->
* <ion-content>
* <ion-fab top right>
* <button ion-fab>Button</button>
* </ion-fab>
*
* <!-- this fab is placed at the center of the content viewport -->
* <ion-fab center middle>
* <button ion-fab>Button</button>
* </ion-fab>
* </ion-content>
* ```
*
* 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
* <ion-content>
* <!-- this fab is placed at bottom right -->
* <ion-fab bottom right >
* <button ion-fab>Share</button>
* <ion-fab-list side="top">
* <button ion-fab>Facebook</button>
* <button ion-fab>Twitter</button>
* <button ion-fab>Youtube</button>
* </ion-fab-list>
* <ion-fab-list side="left">
* <button ion-fab>Vimeo</button>
* </ion-fab-list>
* </ion-fab>
* </ion-content>
* ```
*
* A FAB speed dial can also be closed programatically.
*
* ```html
* <ion-content>
* <ion-fab bottom right #fab>
* <button ion-fab>Share</button>
* <ion-fab-list side="top">
* <button ion-fab (click)="share('facebook', fab)">Facebook</button>
* <button ion-fab (click)="share('twitter', fab)">Twitter</button>
* </ion-fab-list>
* </ion-fab>
* </ion-content>
* ```
*
* ```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 (
<slot></slot>
);
}
}

45
packages/core/src/components/fab/fab.tsx
View File

@ -2,51 +2,6 @@ import { Component, CssClassMap, Element, Prop, State } from '@stencil/core';
import { createThemedClasses, getElementClassObject } from '../../utils/theme'; 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 `<button ion-fab>Button</button>` but it has to wrapped with the `<ion-fab>` component, like this:
*
* ```html
* <ion-content>
* <!-- Real floating action button, fixed. It will not scroll with the content -->
* <ion-fab>
* <button ion-fab>Button</button>
* </ion-fab>
*
* <!-- Button shaped as a circle that just like a normal button scrolls with the content -->
* <button ion-fab>Button</button>
* </ion-content>
*
* ```
*
* In case the button is not wrapped with `<ion-fab>`, 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
*
* <!-- Colors -->
* <ion-fab>
* <button ion-fab color="primary">Button</button>
* </ion-fab>
*
* <!-- Mini -->
* <ion-fab>
* <button ion-fab mini>Small</button>
* </ion-fab>
* ```
*
* @demo /docs/demos/src/fab/
* @see {@link /docs/components#fabs FAB Component Docs}
*/
@Component({ @Component({
tag: 'ion-fab-button', tag: 'ion-fab-button',
styleUrls: { styleUrls: {

112
packages/core/src/components/fab/readme.md
View File

@ -1,13 +1,121 @@
# ion-fab # 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 `<button ion-fab>Button</button>` but it has to wrapped with the `<ion-fab>` component, like this:
```html
<ion-content>
<!-- Real floating action button, fixed. It will not scroll with the content -->
<ion-fab>
<button ion-fab>Button</button>
</ion-fab>
<!-- Button shaped as a circle that just like a normal button scrolls with the content -->
<button ion-fab>Button</button>
</ion-content>
```
In case the button is not wrapped with `<ion-fab>`, the fab button will behave like a normal button, scrolling with the content.
```html
<!-- Colors -->
<ion-fab>
<button ion-fab color="primary">Button</button>
</ion-fab>
<!-- Mini -->
<ion-fab>
<button ion-fab mini>Small</button>
</ion-fab>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
## 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

4
packages/core/src/index.d.ts vendored
View File

@ -32,8 +32,8 @@ export { Chip } from './components/chip/chip';
export { ChipButton } from './components/chip-button/chip-button'; export { ChipButton } from './components/chip-button/chip-button';
export { Content } from './components/content/content'; export { Content } from './components/content/content';
export { Datetime } from './components/datetime/datetime'; export { Datetime } from './components/datetime/datetime';
export { FabContainer } from './components/fab/fab-container'; export { FabContainer } from './components/fab-container/fab-container';
export { FabList } from './components/fab/fab-list'; export { FabList } from './components/fab-list/fab-list';
export { FabButton } from './components/fab/fab'; export { FabButton } from './components/fab/fab';
export { Footer } from './components/footer/footer'; export { Footer } from './components/footer/footer';
export { Gesture, GestureCallback, GestureDetail } from './components/gesture/gesture'; export { Gesture, GestureCallback, GestureDetail } from './components/gesture/gesture';