javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(back-button): update the main docs and add usage

Browse Source
This commit is contained in:
Brandy Carney
2018-04-05 17:48:05 -04:00
parent 5f4250b8b5
commit eba40e8961
4 changed files with 149 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
core/src/components/back-button/readme.md
View File

@ -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
View 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
View 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>
```