docs(vue): add usage docs for all non-controller components (#17643)

This commit is contained in:
Josh Thomas
2019-02-28 22:01:07 -06:00
committed by GitHub
parent 3de7795a2c
commit d023eb5b71
91 changed files with 5645 additions and 0 deletions

View File

@ -180,6 +180,62 @@ export default Example;
```
### Vue
```html
<template>
<!-- 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="buttonText"
:icon="buttonIcon">
</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>
</template>
```
## Properties

View File

@ -0,0 +1,52 @@
```html
<template>
<!-- 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="buttonText"
:icon="buttonIcon">
</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>
</template>
```