javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(vue): update usage examples to kebab-case (#20313)

Browse Source 
references #20296
This commit is contained in:
Brandy Carney
2020-01-27 14:22:42 -05:00
committed by GitHub
parent 09bef71ccd
commit da6263a044
24 changed files with 202 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/backdrop/readme.md
View File

@ -114,13 +114,13 @@ export const BackdropExample: React.FC = () => (
<ion-backdrop visible="false"></ion-backdrop> <ion-backdrop visible="false"></ion-backdrop>
<!-- Backdrop with propagation --> <!-- Backdrop with propagation -->
<ion-backdrop stopPropagation="false"></ion-backdrop> <ion-backdrop stop-propagation="false"></ion-backdrop>
<!-- Backdrop that sets dynamic properties --> <!-- Backdrop that sets dynamic properties -->
<ion-backdrop <ion-backdrop
:tappable="enableBackdropDismiss" :tappable="enableBackdropDismiss"
:visible="showBackdrop" :visible="showBackdrop"
:stopPropagation="shouldPropagate"> :stop-propagation="shouldPropagate">
</ion-backdrop> </ion-backdrop>
</template> </template>

4
core/src/components/backdrop/usage/vue.md
View File

@ -10,13 +10,13 @@
<ion-backdrop visible="false"></ion-backdrop> <ion-backdrop visible="false"></ion-backdrop>
<!-- Backdrop with propagation --> <!-- Backdrop with propagation -->
<ion-backdrop stopPropagation="false"></ion-backdrop> <ion-backdrop stop-propagation="false"></ion-backdrop>
<!-- Backdrop that sets dynamic properties --> <!-- Backdrop that sets dynamic properties -->
<ion-backdrop <ion-backdrop
:tappable="enableBackdropDismiss" :tappable="enableBackdropDismiss"
:visible="showBackdrop" :visible="showBackdrop"
:stopPropagation="shouldPropagate"> :stop-propagation="shouldPropagate">
</ion-backdrop> </ion-backdrop>
</template> </template>

2
core/src/components/buttons/readme.md
View File

@ -223,7 +223,7 @@ export const ButtonsExample: React.FC = () => (
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

2
core/src/components/buttons/usage/vue.md
View File

@ -32,7 +32,7 @@
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

6
core/src/components/checkbox/readme.md
View File

@ -163,7 +163,11 @@ export const CheckboxExample: React.FC = () => (
<ion-list> <ion-list>
<ion-item v-for="entry in form"> <ion-item v-for="entry in form">
<ion-label>{{entry.val}}</ion-label> <ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox> <ion-checkbox
slot="end"
@input="entry.checked = $event.target.value"
:value="entry.isChecked">
</ion-checkbox>
</ion-item> </ion-item>
</ion-list> </ion-list>
</template> </template>

6
core/src/components/checkbox/usage/vue.md
View File

@ -20,7 +20,11 @@
<ion-list> <ion-list>
<ion-item v-for="entry in form"> <ion-item v-for="entry in form">
<ion-label>{{entry.val}}</ion-label> <ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox> <ion-checkbox
slot="end"
@input="entry.checked = $event.target.value"
:value="entry.isChecked">
</ion-checkbox>
</ion-item> </ion-item>
</ion-list> </ion-list>
</template> </template>

34
core/src/components/datetime/readme.md
View File

@ -543,80 +543,80 @@ export const DateTimeExample: React.FC = () => (
<template> <template>
<ion-item> <ion-item>
<ion-label>MMMM</ion-label> <ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime> <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>MM DD YY</ion-label> <ion-label>MM DD YY</ion-label>
<ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime> <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Disabled</ion-label> <ion-label>Disabled</ion-label>
<ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime> <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>YYYY</ion-label> <ion-label>YYYY</ion-label>
<ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime> <ion-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="stacked">MMMM YY</ion-label> <ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime> <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label> <ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime> <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label> <ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime> <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label> <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime value="1995-04-15" min="1990-02" max="2000" <ion-datetime value="1995-04-15" min="1990-02" max="2000"
:dayShortNames="customDayShortNames" :day-short-names="customDayShortNames"
displayFormat="DDD. MMM DD, YY" display-format="DDD. MMM DD, YY"
monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime> month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>D MMM YYYY H:mm</ion-label> <ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime> <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label> <ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime> <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>HH:mm</ion-label> <ion-label>HH:mm</ion-label>
<ion-datetime displayFormat="HH:mm"></ion-datetime> <ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>h:mm a</ion-label> <ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a"></ion-datetime> <ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label> <ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime> <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Leap years, summer months</ion-label> <ion-label>Leap years, summer months</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime> <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Specific days/months/years</ion-label> <ion-label>Specific days/months/years</ion-label>
<ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime> <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item> </ion-item>
</template> </template>

34
core/src/components/datetime/usage/vue.md
View File

@ -2,80 +2,80 @@
<template> <template>
<ion-item> <ion-item>
<ion-label>MMMM</ion-label> <ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime> <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>MM DD YY</ion-label> <ion-label>MM DD YY</ion-label>
<ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime> <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Disabled</ion-label> <ion-label>Disabled</ion-label>
<ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime> <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>YYYY</ion-label> <ion-label>YYYY</ion-label>
<ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime> <ion-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="stacked">MMMM YY</ion-label> <ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime> <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label> <ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime> <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label> <ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime> <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label> <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime value="1995-04-15" min="1990-02" max="2000" <ion-datetime value="1995-04-15" min="1990-02" max="2000"
:dayShortNames="customDayShortNames" :day-short-names="customDayShortNames"
displayFormat="DDD. MMM DD, YY" display-format="DDD. MMM DD, YY"
monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime> month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>D MMM YYYY H:mm</ion-label> <ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime> <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label> <ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime> <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>HH:mm</ion-label> <ion-label>HH:mm</ion-label>
<ion-datetime displayFormat="HH:mm"></ion-datetime> <ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>h:mm a</ion-label> <ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a"></ion-datetime> <ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label> <ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime> <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Leap years, summer months</ion-label> <ion-label>Leap years, summer months</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime> <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></ion-datetime>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Specific days/months/years</ion-label> <ion-label>Specific days/months/years</ion-label>
<ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime> <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item> </ion-item>
</template> </template>

2
core/src/components/input/readme.md
View File

@ -172,7 +172,7 @@ export const InputExample: React.FC = () => (
<ion-input placeholder="Enter Input"></ion-input> <ion-input placeholder="Enter Input"></ion-input>
<!-- Input with clear button when there is a value --> <!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input> <ion-input clear-input value="clear me"></ion-input>
<!-- Number type input --> <!-- Number type input -->
<ion-input type="number" value="333"></ion-input> <ion-input type="number" value="333"></ion-input>

2
core/src/components/input/usage/vue.md
View File

@ -10,7 +10,7 @@
<ion-input placeholder="Enter Input"></ion-input> <ion-input placeholder="Enter Input"></ion-input>
<!-- Input with clear button when there is a value --> <!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input> <ion-input clear-input value="clear me"></ion-input>
<!-- Number type input --> <!-- Number type input -->
<ion-input type="number" value="333"></ion-input> <ion-input type="number" value="333"></ion-input>

24
core/src/components/progress-bar/readme.md
View File

@ -21,7 +21,7 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
## Usage ## Usage
### Javascript ### Angular / javascript
```html ```html
<!-- Default Progressbar --> <!-- Default Progressbar -->
@ -68,6 +68,28 @@ export const ProgressbarExample: React.FC = () => (
``` ```
### Vue
```html
<template>
<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>
<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>
<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</template>
```
## Properties ## Properties

16
core/src/components/progress-bar/usage/angular.md Normal file
View File

@ -0,0 +1,16 @@
```html
<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>
<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>
<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
```

18
core/src/components/progress-bar/usage/vue.md Normal file
View File

@ -0,0 +1,18 @@
```html
<template>
<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>
<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>
<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</template>
```

10
core/src/components/select/readme.md
View File

@ -683,7 +683,7 @@ export const SelectExample: React.FC = () => (
<ion-item> <ion-item>
<ion-label>Hair Color</ion-label> <ion-label>Hair Color</ion-label>
<ion-select value="brown" okText="Okay" cancelText="Dismiss"> <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown">Brown</ion-select-option> <ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option> <ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option> <ion-select-option value="black">Black</ion-select-option>
@ -708,7 +708,7 @@ export const SelectExample: React.FC = () => (
<ion-item> <ion-item>
<ion-label>Toppings</ion-label> <ion-label>Toppings</ion-label>
<ion-select multiple="true" cancelText="Nah" okText="Okay!"> <ion-select multiple="true" cancel-text="Nah" ok-text="Okay!">
<ion-select-option value="bacon">Bacon</ion-select-option> <ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option> <ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option> <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
@ -748,7 +748,7 @@ export const SelectExample: React.FC = () => (
<ion-item> <ion-item>
<ion-label>Alert</ion-label> <ion-label>Alert</ion-label>
<ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One"> <ion-select :interface-options="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
<ion-select-option value="bacon">Bacon</ion-select-option> <ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option> <ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option> <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
@ -764,7 +764,7 @@ export const SelectExample: React.FC = () => (
<ion-item> <ion-item>
<ion-label>Popover</ion-label> <ion-label>Popover</ion-label>
<ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One"> <ion-select :interface-options="customPopoverOptions" interface="popover" placeholder="Select One">
<ion-select-option value="brown">Brown</ion-select-option> <ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option> <ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option> <ion-select-option value="black">Black</ion-select-option>
@ -774,7 +774,7 @@ export const SelectExample: React.FC = () => (
<ion-item> <ion-item>
<ion-label>Action Sheet</ion-label> <ion-label>Action Sheet</ion-label>
<ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One"> <ion-select :interface-options="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
<ion-select-option value="red">Red</ion-select-option> <ion-select-option value="red">Red</ion-select-option>
<ion-select-option value="purple">Purple</ion-select-option> <ion-select-option value="purple">Purple</ion-select-option>
<ion-select-option value="yellow">Yellow</ion-select-option> <ion-select-option value="yellow">Yellow</ion-select-option>

10
core/src/components/select/usage/vue.md
View File

@ -19,7 +19,7 @@
<ion-item> <ion-item>
<ion-label>Hair Color</ion-label> <ion-label>Hair Color</ion-label>
<ion-select value="brown" okText="Okay" cancelText="Dismiss"> <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown">Brown</ion-select-option> <ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option> <ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option> <ion-select-option value="black">Black</ion-select-option>
@ -44,7 +44,7 @@
<ion-item> <ion-item>
<ion-label>Toppings</ion-label> <ion-label>Toppings</ion-label>
<ion-select multiple="true" cancelText="Nah" okText="Okay!"> <ion-select multiple="true" cancel-text="Nah" ok-text="Okay!">
<ion-select-option value="bacon">Bacon</ion-select-option> <ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option> <ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option> <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
@ -84,7 +84,7 @@
<ion-item> <ion-item>
<ion-label>Alert</ion-label> <ion-label>Alert</ion-label>
<ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One"> <ion-select :interface-options="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
<ion-select-option value="bacon">Bacon</ion-select-option> <ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option> <ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="xcheese">Extra Cheese</ion-select-option> <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
@ -100,7 +100,7 @@
<ion-item> <ion-item>
<ion-label>Popover</ion-label> <ion-label>Popover</ion-label>
<ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One"> <ion-select :interface-options="customPopoverOptions" interface="popover" placeholder="Select One">
<ion-select-option value="brown">Brown</ion-select-option> <ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option> <ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option> <ion-select-option value="black">Black</ion-select-option>
@ -110,7 +110,7 @@
<ion-item> <ion-item>
<ion-label>Action Sheet</ion-label> <ion-label>Action Sheet</ion-label>
<ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One"> <ion-select :interface-options="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
<ion-select-option value="red">Red</ion-select-option> <ion-select-option value="red">Red</ion-select-option>
<ion-select-option value="purple">Purple</ion-select-option> <ion-select-option value="purple">Purple</ion-select-option>
<ion-select-option value="yellow">Yellow</ion-select-option> <ion-select-option value="yellow">Yellow</ion-select-option>

2
core/src/components/textarea/readme.md
View File

@ -174,7 +174,7 @@ export const TextAreaExample: React.FC = () => (
<!-- Textarea that clears the value on edit --> <!-- Textarea that clears the value on edit -->
<ion-item> <ion-item>
<ion-label>Comment</ion-label> <ion-label>Comment</ion-label>
<ion-textarea clearOnEdit="true"></ion-textarea> <ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item> </ion-item>
<!-- Textarea with custom number of rows and cols --> <!-- Textarea with custom number of rows and cols -->

2
core/src/components/textarea/usage/vue.md
View File

@ -27,7 +27,7 @@
<!-- Textarea that clears the value on edit --> <!-- Textarea that clears the value on edit -->
<ion-item> <ion-item>
<ion-label>Comment</ion-label> <ion-label>Comment</ion-label>
<ion-textarea clearOnEdit="true"></ion-textarea> <ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item> </ion-item>
<!-- Textarea with custom number of rows and cols --> <!-- Textarea with custom number of rows and cols -->

20
core/src/components/thumbnail/readme.md
View File

@ -10,7 +10,7 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
## Usage ## Usage
### Javascript ### Angular / javascript
```html ```html
<ion-thumbnail> <ion-thumbnail>
@ -49,6 +49,24 @@ export const ThumbnailExample: React.FC = () => (
``` ```
### Vue
```html
<template>
<ion-thumbnail>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
</template>
```
## CSS Custom Properties ## CSS Custom Properties

12
core/src/components/thumbnail/usage/angular.md Normal file
View File

@ -0,0 +1,12 @@
```html
<ion-thumbnail>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
```

14
core/src/components/thumbnail/usage/vue.md Normal file
View File

@ -0,0 +1,14 @@
```html
<template>
<ion-thumbnail>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
</template>
```

19
core/src/components/toggle/readme.md
View File

@ -157,17 +157,30 @@ export const ToggleExample: React.FC = () => (
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-label>Pepperoni</ion-label> <ion-label>Pepperoni</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="pepperoni" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="pepperoni"
:checked="toppings.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Sausage</ion-label> <ion-label>Sausage</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="sausage" v-bind:checked="toppings.indexOf('pepperoni') !== -1" disabled="true"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="sausage"
:checked="toppings.indexOf('pepperoni') !== -1"
disabled="true">
</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Mushrooms</ion-label> <ion-label>Mushrooms</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="mushrooms" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="mushrooms"
:checked="toppings.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item> </ion-item>
</ion-list> </ion-list>
</template> </template>

19
core/src/components/toggle/usage/vue.md
View File

@ -20,17 +20,30 @@
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-label>Pepperoni</ion-label> <ion-label>Pepperoni</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="pepperoni" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="pepperoni"
:checked="toppings.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Sausage</ion-label> <ion-label>Sausage</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="sausage" v-bind:checked="toppings.indexOf('pepperoni') !== -1" disabled="true"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="sausage"
:checked="toppings.indexOf('pepperoni') !== -1"
disabled="true">
</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Mushrooms</ion-label> <ion-label>Mushrooms</ion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="mushrooms" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle> <ion-toggle
@ionChange="toppings.push($event.target.value)"
value="mushrooms"
:checked="toppings.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item> </ion-item>
</ion-list> </ion-list>
</template> </template>

4
core/src/components/toolbar/readme.md
View File

@ -617,7 +617,7 @@ export const ToolbarExample: React.FC = () => (
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
@ -636,7 +636,7 @@ export const ToolbarExample: React.FC = () => (
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

4
core/src/components/toolbar/usage/vue.md
View File

@ -83,7 +83,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
@ -102,7 +102,7 @@
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>