mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
chore(fab): move fab-list and fab-container to separate directories
This commit is contained in:
Adam Bradley
4
packages/core/src/components.d.ts
vendored
4
packages/core/src/components.d.ts
vendored
@ -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 {
|
||||
|
||||
39
packages/core/src/components/fab-container/fab-container.tsx
Normal file
39
packages/core/src/components/fab-container/fab-container.tsx
Normal 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
91
packages/core/src/components/fab-container/readme.md
Normal 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/)*
|
||||
25
packages/core/src/components/fab-list/readme.md
Normal file
25
packages/core/src/components/fab-list/readme.md
Normal file
@ -0,0 +1,25 @@
|
||||
# ion-fab-list
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 `<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({
|
||||
tag: 'ion-fab-button',
|
||||
styleUrls: {
|
||||
|
||||
@ -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 `<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 -->
|
||||
|
||||
|
||||
## 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
4
packages/core/src/index.d.ts
vendored
@ -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';
|
||||
|
||||
Reference in New Issue
Block a user