javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +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 14426 additions and 9916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/label/label.tsx
View File

@ -1,8 +1,12 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { Color, Mode, StyleEventDetail } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color, StyleEventDetail } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-label',
styleUrls: {
@ -21,11 +25,6 @@ export class Label implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* The position determines where and how the label behaves inside an item.
*/
@ -67,10 +66,11 @@ export class Label implements ComponentInterface {
hostData() {
const position = this.position;
const mode = getIonMode(this);
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
[`${mode}`]: true,
[`label-${position}`]: position !== undefined,
[`label-no-animate`]: (this.noAnimate)
}

36
core/src/components/label/readme.md
View File

@ -70,20 +70,19 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
```tsx
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const LabelExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel>
<IonLabel>Label</IonLabel><br />
{/*-- Label Colors --*/}
<IonLabel color="primary">Primary Label</IonLabel>
<IonLabel color="secondary">Secondary Label</IonLabel>
<IonLabel color="danger">Danger Label</IonLabel>
<IonLabel color="light">Light Label</IonLabel>
<IonLabel color="dark">Dark Label</IonLabel>
<IonLabel color="primary">Primary Label</IonLabel><br />
<IonLabel color="secondary">Secondary Label</IonLabel><br />
<IonLabel color="danger">Danger Label</IonLabel><br />
<IonLabel color="light">Light Label</IonLabel><br />
<IonLabel color="dark">Dark Label</IonLabel><br />
{/*-- Item Labels --*/}
<IonItem>
@ -127,10 +126,8 @@ const Example: React.SFC<{}> = () => (
<IonCheckbox slot="start" checked />
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
</IonContent>
);
export default Example;
```
@ -211,6 +208,19 @@ export default Example;
| `--color` | Color of the label |
## Dependencies
### Used by
- ion-select-popover
### Graph
```mermaid
graph TD;
ion-select-popover --> ion-label
style ion-label fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

4
core/src/components/label/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/label/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/label/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>
<h1>Default</h1>

23
core/src/components/label/usage/react.md
View File

@ -1,19 +1,18 @@
```tsx
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const LabelExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel>
<IonLabel>Label</IonLabel><br />
{/*-- Label Colors --*/}
<IonLabel color="primary">Primary Label</IonLabel>
<IonLabel color="secondary">Secondary Label</IonLabel>
<IonLabel color="danger">Danger Label</IonLabel>
<IonLabel color="light">Light Label</IonLabel>
<IonLabel color="dark">Dark Label</IonLabel>
<IonLabel color="primary">Primary Label</IonLabel><br />
<IonLabel color="secondary">Secondary Label</IonLabel><br />
<IonLabel color="danger">Danger Label</IonLabel><br />
<IonLabel color="light">Light Label</IonLabel><br />
<IonLabel color="dark">Dark Label</IonLabel><br />
{/*-- Item Labels --*/}
<IonItem>
@ -57,8 +56,6 @@ const Example: React.SFC<{}> = () => (
<IonCheckbox slot="start" checked />
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
</IonContent>
);
export default Example;
```