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:
@ -386,6 +386,191 @@ export default Example;
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
ion-col [size="6"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" offset="3">
|
||||
ion-col [size="3"] [offset="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col align-self-start>
|
||||
ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
ion-col [center]
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
[start] ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-center>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-end>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
[end] ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6" size-lg offset="3">
|
||||
ion-col [size="6"] [size-lg] [offset="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" size-lg>
|
||||
ion-col [size="3"] [size-lg]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
181
core/src/components/grid/usage/vue.md
Normal file
181
core/src/components/grid/usage/vue.md
Normal file
@ -0,0 +1,181 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
ion-col [size="6"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" offset="3">
|
||||
ion-col [size="3"] [offset="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col align-self-start>
|
||||
ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
ion-col [center]
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
[start] ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-center>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-end>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
[end] ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6" size-lg offset="3">
|
||||
ion-col [size="6"] [size-lg] [offset="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" size-lg>
|
||||
ion-col [size="3"] [size-lg]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</template>
|
||||
```
|
||||
Reference in New Issue
Block a user