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

20
core/src/components/card/card.tsx
View File

@ -1,9 +1,13 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Component, ComponentInterface, 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 { createColorClasses, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-card',
styleUrls: {
@ -23,11 +27,6 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, a button tag will be rendered and the card will be tappable.
*/
@ -81,9 +80,10 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
}
hostData() {
const mode = getIonMode(this);
return {
class: {
[`${this.mode}`]: true,
[`${mode}`]: true,
...createColorClasses(this.color),
'card-disabled': this.disabled,
@ -100,8 +100,8 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
<slot></slot>
];
}
const { href, mode, win, routerDirection } = this;
const mode = getIonMode(this);
const { href, win, routerDirection } = this;
const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
const attrs = (TagType === 'button')
? { type: this.type }

24
core/src/components/card/readme.md
View File

@ -67,11 +67,10 @@ sub-components to reflect this. Please see `ion-card-content`,
```tsx
import React from 'react';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const CardExample: React.FunctionComponent = () => (
<IonContent>
<IonCard>
<IonCardHeader>
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
@ -118,10 +117,8 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Card Button Item 2</IonLabel>
</IonItem>
</IonCard>
</>
</IonContent>
);
export default Example;
```
@ -204,6 +201,19 @@ export default Example;
| `--color` | Color of the card |
## Dependencies
### Depends on
- [ion-ripple-effect](../ripple-effect)
### Graph
```mermaid
graph TD;
ion-card --> ion-ripple-effect
style ion-card fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

4
core/src/components/card/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>

3
core/src/components/card/test/button/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/card/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/card/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>
<ion-card>

4
core/src/components/card/test/translucent/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>

13
core/src/components/card/usage/react.md
View File

@ -1,10 +1,9 @@
```tsx
import React from 'react';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const CardExample: React.FunctionComponent = () => (
<IonContent>
<IonCard>
<IonCardHeader>
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
@ -51,8 +50,6 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Card Button Item 2</IonLabel>
</IonItem>
</IonCard>
</>
</IonContent>
);
export default Example;
```
```