Skip to content

Commit

Permalink
docs(vue): add usage docs for all non-controller components (#17643)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jthoms1
jthoms1 authored Mar 1, 2019
1 parent 3de7795 commit d023eb5
Show file tree
Hide file tree
Showing 91 changed files with 5,645 additions and 0 deletions.
25 changes: 25 additions & 0 deletions core/src/components/avatar/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,31 @@ export default AvatarExample;
```


### Vue

```html
<template>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>

<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>

<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
</template>
```



## CSS Custom Properties

Expand Down
21 changes: 21 additions & 0 deletions core/src/components/avatar/usage/vue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
```html
<template>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>

<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>

<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
</template>
```
56 changes: 56 additions & 0 deletions core/src/components/back-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
52 changes: 52 additions & 0 deletions core/src/components/back-button/usage/vue.md
View file
Original file line number Diff line number Diff line change
@@ -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>
```
37 changes: 37 additions & 0 deletions core/src/components/backdrop/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,43 @@ export default Example;
```


### Vue

```html
<template>
<!-- Default backdrop -->
<ion-backdrop></ion-backdrop>

<!-- Backdrop that is not tappable -->
<ion-backdrop tappable="false"></ion-backdrop>

<!-- Backdrop that is not visible -->
<ion-backdrop visible="false"></ion-backdrop>

<!-- Backdrop with propagation -->
<ion-backdrop stopPropagation="false"></ion-backdrop>

<!-- Backdrop that sets dynamic properties -->
<ion-backdrop
:tappable="enableBackdropDismiss"
:visible="showBackdrop"
:stopPropagation="shouldPropagate">
</ion-backdrop>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Menu extends Vue {
backdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
}
</script>
```



## Properties

Expand Down
33 changes: 33 additions & 0 deletions core/src/components/backdrop/usage/vue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
```html
<template>
<!-- Default backdrop -->
<ion-backdrop></ion-backdrop>

<!-- Backdrop that is not tappable -->
<ion-backdrop tappable="false"></ion-backdrop>

<!-- Backdrop that is not visible -->
<ion-backdrop visible="false"></ion-backdrop>

<!-- Backdrop with propagation -->
<ion-backdrop stopPropagation="false"></ion-backdrop>

<!-- Backdrop that sets dynamic properties -->
<ion-backdrop
:tappable="enableBackdropDismiss"
:visible="showBackdrop"
:stopPropagation="shouldPropagate">
</ion-backdrop>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Menu extends Vue {
backdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
}
</script>
```
28 changes: 28 additions & 0 deletions core/src/components/badge/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,34 @@ export default Example;
```


### Vue

```html
<template>
<!-- Default -->
<ion-badge>99</ion-badge>

<!-- Colors -->
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="tertiary">33</ion-badge>
<ion-badge color="success">44</ion-badge>
<ion-badge color="warning">55</ion-badge>
<ion-badge color="danger">66</ion-badge>
<ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge>

<!-- Item with badge on left and right -->
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
</template>
```



## Properties

Expand Down
24 changes: 24 additions & 0 deletions core/src/components/badge/usage/vue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
```html
<template>
<!-- Default -->
<ion-badge>99</ion-badge>

<!-- Colors -->
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="tertiary">33</ion-badge>
<ion-badge color="success">44</ion-badge>
<ion-badge color="warning">55</ion-badge>
<ion-badge color="danger">66</ion-badge>
<ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge>

<!-- Item with badge on left and right -->
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
</template>
```
56 changes: 56 additions & 0 deletions core/src/components/button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,62 @@ export default Example;
```


### Vue

```html
<template>
<!-- Default -->
<ion-button>Default</ion-button>

<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>

<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>

<!-- Round -->
<ion-button shape="round">Round Button</ion-button>

<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

<!-- Icons -->
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>

<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>
</template>
```



## Properties

Expand Down
Loading

0 comments on commit d023eb5

Please sign in to comment.