javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(vue): update component usage examples for vue 3 (#22050)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-11 13:48:21 -04:00
committed by GitHub
parent 74af3cb50b
commit db2cac20fb
118 changed files with 2647 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
core/src/components/item/usage/vue.md
View File

@@ -199,7 +199,7 @@
<h3>H3 Title Text</h3>
<p>Icon on right</p>
</ion-label>
<ion-icon name="close-circle" slot="end"></ion-icon>
<ion-icon :icon="closeCircle" slot="end"></ion-icon>
</ion-item>
</template>
```
@@ -221,22 +221,22 @@
<ion-item>
<ion-button slot="start">
Start Icon
<ion-icon name="home" slot="end"></ion-icon>
<ion-icon :icon="home" slot="end"></ion-icon>
</ion-button>
<ion-label>Buttons with Icons</ion-label>
<ion-button slot="end">
<ion-icon name="star" slot="end"></ion-icon>
<ion-icon :icon="star" slot="end"></ion-icon>
End Icon
</ion-button>
</ion-item>
<ion-item>
<ion-button slot="start">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
<ion-icon slot="icon-only" :icon="navigate"></ion-icon>
</ion-button>
<ion-label>Icon only Buttons</ion-label>
<ion-button slot="end">
<ion-icon slot="icon-only" name="star"></ion-icon>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</ion-item>
</template>
@@ -250,25 +250,25 @@
<ion-label>
Icon End
</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
<ion-icon :icon="informationCircle" slot="end"></ion-icon>
</ion-item>
<ion-item>
<ion-label>
Large Icon End
</ion-label>
<ion-icon name="information-circle" size="large" slot="end"></ion-icon>
<ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
</ion-item>
<ion-item>
<ion-label>
Small Icon End
</ion-label>
<ion-icon name="information-circle" size="small" slot="end"></ion-icon>
<ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
</ion-item>
<ion-item>
<ion-icon name="star" slot="start"></ion-icon>
<ion-icon :icon="star" slot="start"></ion-icon>
<ion-label>
Icon Start
</ion-label>
@@ -278,8 +278,8 @@
<ion-label>
Two Icons End
</ion-label>
<ion-icon name="checkmark-circle" slot="end"></ion-icon>
<ion-icon name="shuffle" slot="end"></ion-icon>
<ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
<ion-icon :icon="shuffle" slot="end"></ion-icon>
</ion-item>
</template>
```
@@ -331,4 +331,63 @@
<ion-range></ion-range>
</ion-item>
</template>
<script>
import {
IonAvatar,
IonButton,
IonCheckbox,
IonDatetime,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonRange,
IonSelect,
IonSelectOption,
IonText,
IonThumbnail,
IonToggle
} from '@ionic/vue';
import {
checkmarkCircle,
closeCircle,
home,
informationCircle,
navigate,
shuffle,
star
} from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonAvatar,
IonButton,
IonCheckbox,
IonDatetime,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonRange,
IonSelect,
IonSelectOption,
IonText,
IonThumbnail,
IonToggle
},
setup() {
return {
checkmarkCircle,
closeCircle,
home,
informationCircle,
navigate,
shuffle,
star
}
}
});
</script>
```