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

18
core/src/components/button/button.tsx
View File

@ -1,11 +1,14 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @slot - Content is placed between the named slots if provided without a slot.
* @slot icon-only - Should be used on an icon in a button that has no text.
* @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
@ -35,11 +38,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* The type of button.
*/
@ -179,6 +177,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
}
hostData() {
const mode = getIonMode(this);
const { buttonType, disabled, color, expand, hasIconOnly, shape, strong } = this;
let fill = this.fill;
if (fill === undefined) {
@ -189,7 +188,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
[`${mode}`]: true,
[buttonType]: true,
[`${buttonType}-${expand}`]: expand !== undefined,
[`${buttonType}-${size}`]: size !== undefined,
@ -206,6 +205,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
}
render() {
const mode = getIonMode(this);
const TagType = this.href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button')
? { type: this.type }
@ -230,7 +230,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
<slot></slot>
<slot name="end"></slot>
</span>
{this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</TagType>
);
}

22
core/src/components/button/readme.md
View File

@ -96,10 +96,10 @@ This attribute specifies the size of the button. Setting this attribute will cha
```tsx
import React from 'react';
import { IonButton, IonIcon } from '@ionic/react';
import { IonButton, IonIcon, IonContent } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ButtonExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default --*/}
<IonButton>Default</IonButton>
@ -148,10 +148,9 @@ const Example: React.SFC<{}> = () => (
<IonButton size="large">Large</IonButton>
<IonButton>Default</IonButton>
<IonButton size="small">Small</IonButton>
</>
</IonContent>
);
export default Example;
```
@ -277,6 +276,19 @@ export default Example;
| `--transition` | Transition of the button |
## Dependencies
### Depends on
- [ion-ripple-effect](../ripple-effect)
### Graph
```mermaid
graph TD;
ion-button --> ion-ripple-effect
style ion-button fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

4
core/src/components/button/test/anchor/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>

6
core/src/components/button/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>
@ -121,7 +121,7 @@
}
function toggleDisabled() {
var buttonEl = this.document.getElementById('disabledButton');
var buttonEl = document.getElementById('disabledButton');
console.log(buttonEl);
buttonEl.disabled = !buttonEl.disabled;
}

4
core/src/components/button/test/clear/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>

3
core/src/components/button/test/dynamic/index.html
View File

@ -8,7 +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>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
</head>
<body>

4
core/src/components/button/test/expand/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/button/test/form/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/button/test/icon/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/button/test/outline/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>

4451
core/src/components/button/test/perf/index.html Normal file
View File

File diff suppressed because it is too large Load Diff

4
core/src/components/button/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/button/test/round/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/button/test/size/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/button/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>
<h3>Default</h3>

4
core/src/components/button/test/strong/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/button/test/toolbar/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>

9
core/src/components/button/usage/react.md
View File

@ -1,10 +1,10 @@
```tsx
import React from 'react';
import { IonButton, IonIcon } from '@ionic/react';
import { IonButton, IonIcon, IonContent } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ButtonExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default --*/}
<IonButton>Default</IonButton>
@ -53,8 +53,7 @@ const Example: React.SFC<{}> = () => (
<IonButton size="large">Large</IonButton>
<IonButton>Default</IonButton>
<IonButton size="small">Small</IonButton>
</>
</IonContent>
);
export default Example;
```