mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
docs(back-button): update the main docs and add usage
This commit is contained in:
Brandy Carney
28
core/src/components.d.ts
vendored
28
core/src/components.d.ts
vendored
@ -602,16 +602,26 @@ declare global {
|
||||
|
||||
declare global {
|
||||
interface HTMLIonBackButtonElement extends HTMLStencilElement {
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
'color': string;
|
||||
/**
|
||||
* The url to navigate back to by default when there is no history.
|
||||
*/
|
||||
'defaultHref': string;
|
||||
/**
|
||||
* The icon name to use for the back button.
|
||||
*/
|
||||
'icon': 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).
|
||||
*/
|
||||
'mode': 'ios' | 'md';
|
||||
/**
|
||||
* The text property is used to provide custom text for the back button while using the default look-and-feel.
|
||||
* The text to display in the back button.
|
||||
*/
|
||||
'text': string|undefined;
|
||||
'text': string | undefined;
|
||||
}
|
||||
var HTMLIonBackButtonElement: {
|
||||
prototype: HTMLIonBackButtonElement;
|
||||
@ -630,16 +640,26 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonBackButtonAttributes extends HTMLAttributes {
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
'color'?: string;
|
||||
/**
|
||||
* The url to navigate back to by default when there is no history.
|
||||
*/
|
||||
'defaultHref'?: string;
|
||||
/**
|
||||
* The icon name to use for the back button.
|
||||
*/
|
||||
'icon'?: 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).
|
||||
*/
|
||||
'mode'?: 'ios' | 'md';
|
||||
/**
|
||||
* The text property is used to provide custom text for the back button while using the default look-and-feel.
|
||||
* The text to display in the back button.
|
||||
*/
|
||||
'text'?: string|undefined;
|
||||
'text'?: string | undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,45 +1,8 @@
|
||||
# ion-back-button
|
||||
|
||||
A back button is a component that allows you navigate back into app history. To
|
||||
add a back button to your view, all you need is:
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
```
|
||||
|
||||
The back button component is smart enough to know what to render and what content to show.
|
||||
|
||||
If, however, you want more control over what is shown in the back button, you use the
|
||||
`text` and `icon` properties.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Volver" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
```
|
||||
|
||||
Or no button text at all:
|
||||
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
```
|
||||
The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.
|
||||
|
||||
To change what is displayed in the back button, use the `text` and `icon` properties.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@ -47,15 +10,28 @@ Or no button text at all:
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
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).
|
||||
|
||||
|
||||
#### defaultHref
|
||||
|
||||
string
|
||||
|
||||
The url to navigate back to by default when there is no history.
|
||||
|
||||
|
||||
#### icon
|
||||
|
||||
string
|
||||
|
||||
The icon name to use for the back button.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
@ -70,21 +46,33 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
|
||||
|
||||
|
||||
The text property is used to provide custom text for the back button while using the
|
||||
default look-and-feel.
|
||||
The text to display in the back button.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
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).
|
||||
|
||||
|
||||
#### default-href
|
||||
|
||||
string
|
||||
|
||||
The url to navigate back to by default when there is no history.
|
||||
|
||||
|
||||
#### icon
|
||||
|
||||
string
|
||||
|
||||
The icon name to use for the back button.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
@ -99,8 +87,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
|
||||
|
||||
|
||||
The text property is used to provide custom text for the back button while using the
|
||||
default look-and-feel.
|
||||
The text to display in the back button.
|
||||
|
||||
|
||||
|
||||
|
||||
47
core/src/components/back-button/usage/angular.md
Normal file
47
core/src/components/back-button/usage/angular.md
Normal file
@ -0,0 +1,47 @@
|
||||
```html
|
||||
<!-- Default back button -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with a default href -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button defaultHref="home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with custom text and icon -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Volver" icon="close"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with no text and custom icon -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Danger back button next to a menu button -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
<ion-back-button color="danger"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
```
|
||||
47
core/src/components/back-button/usage/javascript.md
Normal file
47
core/src/components/back-button/usage/javascript.md
Normal file
@ -0,0 +1,47 @@
|
||||
```html
|
||||
<!-- Default back button -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with a default href -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button default-href="home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with custom text and icon -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Volver" icon="close"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Back button with no text and custom icon -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<!-- Danger back button next to a menu button -->
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
<ion-back-button color="danger"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
```
|
||||
Reference in New Issue
Block a user