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(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11207 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
core/src/components/grid/readme.md
View File

@@ -337,6 +337,201 @@ export const GridExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'grid-example',
styleUrl: 'grid-example.css'
})
export class GridExample {
render() {
return [
<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 class="ion-align-self-start">
ion-col [start]
</ion-col>
<ion-col class="ion-align-self-center">
ion-col [center]
</ion-col>
<ion-col class="ion-align-self-end">
ion-col [end]
</ion-col>
<ion-col>
ion-col
<br/>#
<br/>#
</ion-col>
</ion-row>
<ion-row class="ion-align-items-start">
<ion-col>
[start] ion-col
</ion-col>
<ion-col>
[start] ion-col
</ion-col>
<ion-col class="ion-align-self-end">
[start] ion-col [end]
</ion-col>
<ion-col>
ion-col
<br/>#
<br/>#
</ion-col>
</ion-row>
<ion-row class="ion-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 class="ion-align-items-end">
<ion-col>
[end] ion-col
</ion-col>
<ion-col class="ion-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" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" sizeLg="" offset="3">
ion-col [size="6"] [sizeLg] [offset="3"]
</ion-col>
<ion-col size="3" sizeLg="">
ion-col [size="3"] [sizeLg]
</ion-col>
</ion-row>
</ion-grid>
];
}
}
```
### Vue
```html

191
core/src/components/grid/usage/stencil.md Normal file
View File

@@ -0,0 +1,191 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'grid-example',
styleUrl: 'grid-example.css'
})
export class GridExample {
render() {
return [
<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 class="ion-align-self-start">
ion-col [start]
</ion-col>
<ion-col class="ion-align-self-center">
ion-col [center]
</ion-col>
<ion-col class="ion-align-self-end">
ion-col [end]
</ion-col>
<ion-col>
ion-col
<br/>#
<br/>#
</ion-col>
</ion-row>
<ion-row class="ion-align-items-start">
<ion-col>
[start] ion-col
</ion-col>
<ion-col>
[start] ion-col
</ion-col>
<ion-col class="ion-align-self-end">
[start] ion-col [end]
</ion-col>
<ion-col>
ion-col
<br/>#
<br/>#
</ion-col>
</ion-row>
<ion-row class="ion-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 class="ion-align-items-end">
<ion-col>
[end] ion-col
</ion-col>
<ion-col class="ion-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" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
<ion-col size="12" sizeSm="">
ion-col [size="12"] [sizeSm]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
<ion-col size="12" sizeMd="">
ion-col [size="12"] [sizeMd]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" sizeLg="" offset="3">
ion-col [size="6"] [sizeLg] [offset="3"]
</ion-col>
<ion-col size="3" sizeLg="">
ion-col [size="3"] [sizeLg]
</ion-col>
</ion-row>
</ion-grid>
];
}
}
```