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

fix(): update to Stencil One 🎉🎊

Browse Source
This commit is contained in:
Manu MA
2019-06-19 21:33:50 +02:00
committed by GitHub
parent 7f1829eb21
commit b40f7d36d5
572 changed files with 14833 additions and 10323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/grid/grid.tsx
View File

@ -1,6 +1,6 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Component, ComponentInterface, Prop, h } from '@stencil/core';
import { Mode } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
@Component({
tag: 'ion-grid',
@ -8,7 +8,6 @@ import { Mode } from '../../interface';
shadow: true
})
export class Grid implements ComponentInterface {
mode!: Mode;
/**
* If `true`, the grid will have a fixed width based on the screen size.
@ -16,9 +15,10 @@ export class Grid implements ComponentInterface {
@Prop() fixed = false;
hostData() {
const mode = getIonMode(this);
return {
class: {
[`${this.mode}`]: true,
[`${mode}`]: true,
'grid-fixed': this.fixed
}
};

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

@ -199,190 +199,141 @@ See [Grid Layout](/docs/layout/grid) for more information.
```tsx
import React from 'react';
import { IonGrid, IonRow, IonCol } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonGrid>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
ion-col size="6"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol size="3">
ion-col size="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>
ion-col start
</IonCol>
<IonCol align-self-center>
ion-col center
</IonCol>
<IonCol align-self-end>
ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>
start ion-col
</IonCol>
<IonCol>
start ion-col
</IonCol>
<IonCol align-self-end>
start ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>
end ion-col
</IonCol>
<IonCol align-self-start>
end ion-col start
</IonCol>
<IonCol>
end ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
export const GridExample: React.FunctionComponent = () => (
<IonContent>
<IonGrid>
<IonRow>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">ion-col size="6"</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">ion-col size="3"</IonCol>
<IonCol>ion-col</IonCol>
<IonCol size="3">ion-col size="3"</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">ion-col size="3"</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol>ion-col</IonCol>
<IonCol>
ion-col
<br />#
</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
<IonCol>
ion-col
<br />#
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>ion-col start</IonCol>
<IonCol align-self-center>ion-col center</IonCol>
<IonCol align-self-end>ion-col end</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>start ion-col</IonCol>
<IonCol>start ion-col</IonCol>
<IonCol align-self-end>start ion-col end</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>end ion-col</IonCol>
<IonCol align-self-start>end ion-col start</IonCol>
<IonCol>end ion-col</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
);
export default Example;
```

4
core/src/components/grid/test/basic/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>

4
core/src/components/grid/test/offsets/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>

4
core/src/components/grid/test/padding/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>

4
core/src/components/grid/test/preview/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>

4
core/src/components/grid/test/sizes/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>

4
core/src/components/grid/test/standalone/index.html
View File

@ -8,8 +8,8 @@
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-grid>

295
core/src/components/grid/usage/react.md
View File

@ -1,187 +1,138 @@
```tsx
import React from 'react';
import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
import { IonGrid, IonRow, IonCol } from '@ionic/react';
export const GridExample: React.FunctionComponent = () => (
<IonContent>
<IonGrid>
<IonRow>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
</IonRow>
const Example: React.SFC<{}> = () => (
<IonGrid>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">ion-col size="6"</IonCol>
<IonCol>ion-col</IonCol>
<IonCol>ion-col</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
ion-col size="6"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">ion-col size="3"</IonCol>
<IonCol>ion-col</IonCol>
<IonCol size="3">ion-col size="3"</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol size="3">
ion-col size="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">ion-col size="3"</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol>ion-col</IonCol>
<IonCol>
ion-col
<br />#
</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
<IonCol>
ion-col
<br />#
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>ion-col start</IonCol>
<IonCol align-self-center>ion-col center</IonCol>
<IonCol align-self-end>ion-col end</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>
ion-col start
</IonCol>
<IonCol align-self-center>
ion-col center
</IonCol>
<IonCol align-self-end>
ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>start ion-col</IonCol>
<IonCol>start ion-col</IonCol>
<IonCol align-self-end>start ion-col end</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>
start ion-col
</IonCol>
<IonCol>
start ion-col
</IonCol>
<IonCol align-self-end>
start ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>end ion-col</IonCol>
<IonCol align-self-start>end ion-col start</IonCol>
<IonCol>end ion-col</IonCol>
<IonCol>
ion-col
<br />#
<br />#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>
end ion-col
</IonCol>
<IonCol align-self-start>
end ion-col start
</IonCol>
<IonCol>
end ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
);
export default Example;
```
```