mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
docs(): update usage and examples
This commit is contained in:
mhartington
@ -2,7 +2,6 @@ import { Component, Element, Prop } from '@stencil/core';
|
||||
import { Color, CssClassMap, Mode } from '../../interface';
|
||||
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-fab-button',
|
||||
styleUrls: {
|
||||
@ -11,22 +10,18 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
}
|
||||
})
|
||||
export class FabButton {
|
||||
|
||||
private inList = false;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
* The color to use for the button.
|
||||
*/
|
||||
@Prop() color?: Color;
|
||||
|
||||
/**
|
||||
* 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!: Mode;
|
||||
|
||||
@ -57,7 +52,7 @@ export class FabButton {
|
||||
const parentNode = this.el.parentNode;
|
||||
const parentTag = parentNode ? parentNode.nodeName : null;
|
||||
|
||||
this.inList = (parentTag === 'ION-FAB-LIST');
|
||||
this.inList = parentTag === 'ION-FAB-LIST';
|
||||
}
|
||||
|
||||
/**
|
||||
@ -67,34 +62,38 @@ export class FabButton {
|
||||
return {
|
||||
'fab-button-in-list': this.inList,
|
||||
[`fab-button-${this.mode}-in-list`]: this.inList,
|
||||
[`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent),
|
||||
[`fab-button-translucent-${this.mode}-in-list`]:
|
||||
this.inList && this.translucent,
|
||||
'fab-button-close-active': this.activated,
|
||||
'fab-button-show': this.show,
|
||||
'fab-button-show': this.show
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
|
||||
const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
|
||||
const themedClasses = createThemedClasses(
|
||||
this.mode,
|
||||
this.color,
|
||||
'fab-button'
|
||||
);
|
||||
const translucentClasses = this.translucent
|
||||
? createThemedClasses(this.mode, this.color, 'fab-button-translucent')
|
||||
: {};
|
||||
const hostClasses = getElementClassMap(this.el.classList);
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
const fabClasses = {
|
||||
...this.getFabClassMap(),
|
||||
...themedClasses,
|
||||
...translucentClasses,
|
||||
...hostClasses,
|
||||
...hostClasses
|
||||
};
|
||||
|
||||
return (
|
||||
<TagType
|
||||
class={fabClasses}
|
||||
disabled={this.disabled}
|
||||
href={this.href}>
|
||||
<ion-icon name="close" class="fab-button-close-icon"></ion-icon>
|
||||
<TagType class={fabClasses} disabled={this.disabled} href={this.href}>
|
||||
<ion-icon name="close" class="fab-button-close-icon" />
|
||||
<span class="fab-button-inner">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</span>
|
||||
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
|
||||
{this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
|
||||
</TagType>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,38 +1,9 @@
|
||||
# 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 `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content:
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab>
|
||||
<ion-fab-button>Button</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- Default Floating Action Button that scrolls with the content.-->
|
||||
<ion-fab-button>Button</ion-fab-button>
|
||||
</ion-content>
|
||||
```
|
||||
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 `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.
|
||||
|
||||
If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
<ion-fab-button>Default</ion-fab-button>
|
||||
|
||||
<!-- Mini -->
|
||||
<ion-fab-button mini>Mini</ion-fab-button>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-fab-button color="primary">Primary</ion-fab-button>
|
||||
<ion-fab-button color="secondary">Secondary</ion-fab-button>
|
||||
<ion-fab-button color="danger">Danger</ion-fab-button>
|
||||
<ion-fab-button color="light">Light</ion-fab-button>
|
||||
<ion-fab-button color="dark">Dark</ion-fab-button>
|
||||
</ion-content>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -49,9 +20,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
The color to use for the button.
|
||||
|
||||
|
||||
#### disabled
|
||||
@ -75,7 +44,6 @@ 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).
|
||||
|
||||
|
||||
#### show
|
||||
@ -103,9 +71,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
The color to use for the button.
|
||||
|
||||
|
||||
#### disabled
|
||||
@ -129,7 +95,6 @@ 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).
|
||||
|
||||
|
||||
#### show
|
||||
|
||||
23
core/src/components/fab-button/usage/javascript.md
Normal file
23
core/src/components/fab-button/usage/javascript.md
Normal file
@ -0,0 +1,23 @@
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab>
|
||||
<ion-fab-button>Button</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- Default Floating Action Button that scrolls with the content.-->
|
||||
<ion-fab-button>Default</ion-fab-button>
|
||||
|
||||
<!-- Mini -->
|
||||
<ion-fab-button mini>Mini</ion-fab-button>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-fab-button color="primary">Primary</ion-fab-button>
|
||||
<ion-fab-button color="secondary">Secondary</ion-fab-button>
|
||||
<ion-fab-button color="danger">Danger</ion-fab-button>
|
||||
<ion-fab-button color="light">Light</ion-fab-button>
|
||||
<ion-fab-button color="dark">Dark</ion-fab-button>
|
||||
|
||||
</ion-content>
|
||||
```
|
||||
Reference in New Issue
Block a user