mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
docs(vue): add usage docs for all non-controller components (#17643)
This commit is contained in:
@ -234,6 +234,115 @@ export default Example;
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>A</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Angola</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Argentina</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Armenia</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>B</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Bangladesh</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belarus</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belgium</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
|
||||
<!-- They can also be used to group sliding items -->
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Fruits
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Grapes</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Apples</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Vegetables
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Carrots</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Celery</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
105
core/src/components/item-group/usage/vue.md
Normal file
105
core/src/components/item-group/usage/vue.md
Normal file
@ -0,0 +1,105 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>A</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Angola</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Argentina</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Armenia</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>B</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Bangladesh</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belarus</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belgium</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
|
||||
<!-- They can also be used to group sliding items -->
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Fruits
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Grapes</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Apples</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Vegetables
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Carrots</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Celery</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</template>
|
||||
```
|
||||
Reference in New Issue
Block a user