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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

108
core/src/components/segment/readme.md
View File

@ -330,6 +330,114 @@ export default Example;
```
### Vue
```html
<template>
<!-- Default Segment -->
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button value="enemies">
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Disabled Segment -->
<ion-segment @ionChange="segmentChanged($event)" disabled>
<ion-segment-button value="sunny" checked>
<ion-label>Sunny</ion-label>
</ion-segment-button>
<ion-segment-button value="rainy">
<ion-label>Rainy</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment with anchors -->
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button href="#dogs" value="dogs">
<ion-label>Dogs</ion-label>
</ion-segment-button>
<ion-segment-button href="#cats" value="cats">
<ion-label>Cats</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Scrollable Segment -->
<ion-segment scrollable>
<ion-segment-button>
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button checked>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="globe"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="basket"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment with secondary color -->
<ion-segment @ionChange="segmentChanged($event)" color="secondary">
<ion-segment-button value="standard">
<ion-label>Standard</ion-label>
</ion-segment-button>
<ion-segment-button value="hybrid">
<ion-label>Hybrid</ion-label>
</ion-segment-button>
<ion-segment-button value="sat">
<ion-label>Satellite</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment in a toolbar -->
<ion-toolbar>
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<!-- Segment with default selection -->
<ion-segment @ionChange="segmentChanged($event)" value="javascript">
<ion-segment-button value="python">
<ion-label>Python</ion-label>
</ion-segment-button>
<ion-segment-button value="javascript">
<ion-label>Javascript</ion-label>
</ion-segment-button>
</ion-segment>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class MenuExample extends Vue {
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}
</script>
```
## Properties

104
core/src/components/segment/usage/vue.md Normal file
View File

@ -0,0 +1,104 @@
```html
<template>
<!-- Default Segment -->
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
<ion-segment-button value="enemies">
<ion-label>Enemies</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Disabled Segment -->
<ion-segment @ionChange="segmentChanged($event)" disabled>
<ion-segment-button value="sunny" checked>
<ion-label>Sunny</ion-label>
</ion-segment-button>
<ion-segment-button value="rainy">
<ion-label>Rainy</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment with anchors -->
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button href="#dogs" value="dogs">
<ion-label>Dogs</ion-label>
</ion-segment-button>
<ion-segment-button href="#cats" value="cats">
<ion-label>Cats</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Scrollable Segment -->
<ion-segment scrollable>
<ion-segment-button>
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button checked>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="globe"></ion-icon>
</ion-segment-button>
<ion-segment-button>
<ion-icon name="basket"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment with secondary color -->
<ion-segment @ionChange="segmentChanged($event)" color="secondary">
<ion-segment-button value="standard">
<ion-label>Standard</ion-label>
</ion-segment-button>
<ion-segment-button value="hybrid">
<ion-label>Hybrid</ion-label>
</ion-segment-button>
<ion-segment-button value="sat">
<ion-label>Satellite</ion-label>
</ion-segment-button>
</ion-segment>
<!-- Segment in a toolbar -->
<ion-toolbar>
<ion-segment @ionChange="segmentChanged($event)">
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<!-- Segment with default selection -->
<ion-segment @ionChange="segmentChanged($event)" value="javascript">
<ion-segment-button value="python">
<ion-label>Python</ion-label>
</ion-segment-button>
<ion-segment-button value="javascript">
<ion-label>Javascript</ion-label>
</ion-segment-button>
</ion-segment>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class MenuExample extends Vue {
segmentChanged(ev: any) {
console.log('Segment changed', ev);
}
}
</script>
```