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

33
core/src/components/tab-button/readme.md
View File

@@ -192,27 +192,52 @@ export class TabButtonExample {
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-icon :icon="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-icon :icon="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-icon :icon="informationCircle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import {
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs
} from '@ionic/vue';
import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs
},
setup() {
return { calendar, informationCircle, map, personCircle }
}
});
</script>
```

33
core/src/components/tab-button/usage/vue.md
View File

@@ -4,25 +4,50 @@
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-icon :icon="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-icon :icon="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-icon :icon="informationCircle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
<script>
import {
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs
} from '@ionic/vue';
import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonIcon,
IonLabel,
IonTabBar,
IonTabButton,
IonTabs
},
setup() {
return { calendar, informationCircle, map, personCircle }
}
});
</script>
```