mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(): update to Stencil One 🎉🎊
This commit is contained in:
@ -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,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
```
|
Reference in New Issue
Block a user