fix(): update to Stencil One 🎉🎊

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 14426 additions and 9916 deletions

View File

@ -1,8 +1,12 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Component, ComponentInterface, Prop, h } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-note',
styleUrls: {
@ -19,16 +23,12 @@ export class Note implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
hostData() {
const mode = getIonMode(this);
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
[`${mode}`]: true,
}
};
}

View File

@ -40,20 +40,19 @@ Notes are text elements generally used as subtitles that provide more informatio
```tsx
import React from 'react';
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import { IonNote, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const NoteExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote>
<IonNote>Default Note</IonNote><br />
{/*-- Note Colors --*/}
<IonNote color="primary">Primary Note</IonNote>
<IonNote color="secondary">Secondary Note</IonNote>
<IonNote color="danger">Danger Note</IonNote>
<IonNote color="light">Light Note</IonNote>
<IonNote color="dark">Dark Note</IonNote>
<IonNote color="primary">Primary Note</IonNote><br />
<IonNote color="secondary">Secondary Note</IonNote><br />
<IonNote color="danger">Danger Note</IonNote><br />
<IonNote color="light">Light Note</IonNote><br />
<IonNote color="dark">Dark Note</IonNote><br />
{/*-- Notes in a List --*/}
<IonList>
@ -67,10 +66,9 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Note (Start)</IonLabel>
</IonItem>
</IonList>
</>
</IonContent>
);
export default Example
```
### Vue

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>

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>

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>
<h1>Default</h1>

View File

@ -1,19 +1,18 @@
```tsx
import React from 'react';
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import { IonNote, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const NoteExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote>
<IonNote>Default Note</IonNote><br />
{/*-- Note Colors --*/}
<IonNote color="primary">Primary Note</IonNote>
<IonNote color="secondary">Secondary Note</IonNote>
<IonNote color="danger">Danger Note</IonNote>
<IonNote color="light">Light Note</IonNote>
<IonNote color="dark">Dark Note</IonNote>
<IonNote color="primary">Primary Note</IonNote><br />
<IonNote color="secondary">Secondary Note</IonNote><br />
<IonNote color="danger">Danger Note</IonNote><br />
<IonNote color="light">Light Note</IonNote><br />
<IonNote color="dark">Dark Note</IonNote><br />
{/*-- Notes in a List --*/}
<IonList>
@ -27,7 +26,6 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Note (Start)</IonLabel>
</IonItem>
</IonList>
</>
</IonContent>
);
export default Example
```