javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

33
core/src/components/toggle/readme.md
View File

@ -91,48 +91,45 @@ Toggles change the state of a single option. Toggles can be switched on or off b
```tsx
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ToggleExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Toggle --*/}
<IonToggle></IonToggle>
<IonToggle />
{/*-- Disabled Toggle --*/}
<IonToggle disabled></IonToggle>
<IonToggle disabled />
{/*-- Checked Toggle --*/}
<IonToggle checked></IonToggle>
<IonToggle checked />
{/*-- Toggle Colors --*/}
<IonToggle color="primary"></IonToggle>
<IonToggle color="secondary"></IonToggle>
<IonToggle color="danger"></IonToggle>
<IonToggle color="light"></IonToggle>
<IonToggle color="dark"></IonToggle>
<IonToggle color="primary" />
<IonToggle color="secondary" />
<IonToggle color="danger" />
<IonToggle color="light" />
<IonToggle color="dark" />
{/*-- Toggles in a List --*/}
<IonList>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
<IonToggle value="pepperoni" onChange={() => {}} />
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
<IonToggle value="sausage" onChange={() => {}} disabled={true} />
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
<IonToggle value="mushrooms" onChange={() => {}} />
</IonItem>
</IonList>
</>
</IonContent>
);
export default Example;
```

4
core/src/components/toggle/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/toggle/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/toggle/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>
<!-- Default -->

19
core/src/components/toggle/toggle.tsx
View File

@ -1,10 +1,14 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch, h } from '@stencil/core';
import { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
import { hapticSelection } from '../../utils/haptic';
import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-toggle',
styleUrls: {
@ -28,11 +32,6 @@ export class Toggle implements ComponentInterface {
@State() activated = false;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -108,7 +107,6 @@ export class Toggle implements ComponentInterface {
async componentDidLoad() {
this.gesture = (await import('../../utils/gesture')).createGesture({
el: this.el,
queue: this.queue,
gestureName: 'toggle',
gesturePriority: 100,
threshold: 5,
@ -148,7 +146,7 @@ export class Toggle implements ComponentInterface {
}
private onMove(detail: GestureDetail) {
if (shouldToggle(this.doc, this.checked, detail.deltaX, -10)) {
if (shouldToggle(document, this.checked, detail.deltaX, -10)) {
this.checked = !this.checked;
hapticSelection();
}
@ -181,6 +179,7 @@ export class Toggle implements ComponentInterface {
hostData() {
const { inputId, disabled, checked, activated, color, el } = this;
const mode = getIonMode(this);
const labelId = inputId + '-lbl';
const label = findItemLabel(el);
if (label) {
@ -195,7 +194,7 @@ export class Toggle implements ComponentInterface {
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
[`${mode}`]: true,
'in-item': hostContext('ion-item', el),
'toggle-activated': activated,
'toggle-checked': checked,

35
core/src/components/toggle/usage/react.md
View File

@ -1,45 +1,42 @@
```tsx
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ToggleExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Toggle --*/}
<IonToggle></IonToggle>
<IonToggle />
{/*-- Disabled Toggle --*/}
<IonToggle disabled></IonToggle>
<IonToggle disabled />
{/*-- Checked Toggle --*/}
<IonToggle checked></IonToggle>
<IonToggle checked />
{/*-- Toggle Colors --*/}
<IonToggle color="primary"></IonToggle>
<IonToggle color="secondary"></IonToggle>
<IonToggle color="danger"></IonToggle>
<IonToggle color="light"></IonToggle>
<IonToggle color="dark"></IonToggle>
<IonToggle color="primary" />
<IonToggle color="secondary" />
<IonToggle color="danger" />
<IonToggle color="light" />
<IonToggle color="dark" />
{/*-- Toggles in a List --*/}
<IonList>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
<IonToggle value="pepperoni" onChange={() => {}} />
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
<IonToggle value="sausage" onChange={() => {}} disabled={true} />
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
<IonToggle value="mushrooms" onChange={() => {}} />
</IonItem>
</IonList>
</>
</IonContent>
);
export default Example;
```
```