mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
chore(docs): remove manual documentation (#24984)
This commit is contained in:
Sean Perkins
@ -1,230 +0,0 @@
|
||||
# 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.
|
||||
|
||||
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:
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Angular / javascript
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
|
||||
|
||||
export const FabButtonExample: React.FC = () => (
|
||||
<IonContent>
|
||||
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
|
||||
<IonFab slot="fixed">
|
||||
<IonFabButton>Button</IonFabButton>
|
||||
</IonFab>
|
||||
|
||||
{/*-- Default Floating Action Button that scrolls with the content.--*/}
|
||||
<IonFabButton>Default</IonFabButton>
|
||||
|
||||
{/*-- Mini --*/}
|
||||
<IonFabButton size="small">Mini</IonFabButton>
|
||||
|
||||
{/*-- Colors --*/}
|
||||
<IonFabButton color="primary">Primary</IonFabButton>
|
||||
<IonFabButton color="secondary">Secondary</IonFabButton>
|
||||
<IonFabButton color="danger">Danger</IonFabButton>
|
||||
<IonFabButton color="light">Light</IonFabButton>
|
||||
<IonFabButton color="dark">Dark</IonFabButton>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fab-button-example',
|
||||
styleUrl: 'fab-button-example.css'
|
||||
})
|
||||
export class FabButtonExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-content>
|
||||
|
||||
{/* Fixed Floating Action Button that does not scroll with the content */}
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { IonContent, IonFab, IonFabButton }
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
|
||||
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
|
||||
| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `close` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
|
||||
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
|
||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
||||
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
|
||||
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| undefined` | `undefined` |
|
||||
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
|
||||
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
|
||||
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ---------- | ------------------------------------ | ------------------- |
|
||||
| `ionBlur` | Emitted when the button loses focus. | `CustomEvent<void>` |
|
||||
| `ionFocus` | Emitted when the button has focus. | `CustomEvent<void>` |
|
||||
|
||||
|
||||
## Shadow Parts
|
||||
|
||||
| Part | Description |
|
||||
| -------------- | ----------------------------------------------------------------------- |
|
||||
| `"close-icon"` | The close icon that is displayed when a fab list opens (uses ion-icon). |
|
||||
| `"native"` | The native HTML button or anchor element that wraps all child elements. |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--background-activated-opacity` | Opacity of the button background when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the button background on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--close-icon-font-size` | Font size of the close icon |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Depends on
|
||||
|
||||
- ion-icon
|
||||
- [ion-ripple-effect](../ripple-effect)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
ion-fab-button --> ion-icon
|
||||
ion-fab-button --> ion-ripple-effect
|
||||
style ion-fab-button fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,23 +0,0 @@
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
```
|
||||
@ -1,23 +0,0 @@
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
```
|
||||
@ -1,26 +0,0 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
|
||||
|
||||
export const FabButtonExample: React.FC = () => (
|
||||
<IonContent>
|
||||
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
|
||||
<IonFab slot="fixed">
|
||||
<IonFabButton>Button</IonFabButton>
|
||||
</IonFab>
|
||||
|
||||
{/*-- Default Floating Action Button that scrolls with the content.--*/}
|
||||
<IonFabButton>Default</IonFabButton>
|
||||
|
||||
{/*-- Mini --*/}
|
||||
<IonFabButton size="small">Mini</IonFabButton>
|
||||
|
||||
{/*-- Colors --*/}
|
||||
<IonFabButton color="primary">Primary</IonFabButton>
|
||||
<IonFabButton color="secondary">Secondary</IonFabButton>
|
||||
<IonFabButton color="danger">Danger</IonFabButton>
|
||||
<IonFabButton color="light">Light</IonFabButton>
|
||||
<IonFabButton color="dark">Dark</IonFabButton>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
@ -1,35 +0,0 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fab-button-example',
|
||||
styleUrl: 'fab-button-example.css'
|
||||
})
|
||||
export class FabButtonExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-content>
|
||||
|
||||
{/* Fixed Floating Action Button that does not scroll with the content */}
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,34 +0,0 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab slot="fixed">
|
||||
<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 size="small">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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { IonContent, IonFab, IonFabButton }
|
||||
});
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user