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

6
core/src/components/buttons/buttons.tsx
View File

@ -1,6 +1,6 @@
import { Component, ComponentInterface } from '@stencil/core';
import { Mode } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
@Component({
tag: 'ion-buttons',
@ -11,12 +11,12 @@ import { Mode } from '../../interface';
scoped: true,
})
export class Buttons implements ComponentInterface {
mode!: Mode;
hostData() {
const mode = getIonMode(this);
return {
class: {
[`${this.mode}`]: true
[`${mode}`]: true
}
};
}

27
core/src/components/buttons/readme.md
View File

@ -107,14 +107,22 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
```tsx
import React from 'react';
import {
IonButtons,
IonToolbar,
IonBackButton,
IonTitle,
IonButton,
IonIcon,
IonMenuButton,
IonContent
} from '@ionic/react';
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ButtonsExample: React.FunctionComponent = () => (
<IonContent>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
<IonBackButton defaultHref="/" />
</IonButtons>
<IonTitle>Back Button</IonTitle>
</IonToolbar>
@ -124,13 +132,13 @@ const Example: React.SFC<{}> = () => (
<IonButton>
<IonIcon slot="icon-only" name="contact" />
</IonButton>
<IonButton> />
<IonButton>
<IonIcon slot="icon-only" name="search" />
</IonButton>
</IonButtons>
<IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary">
<IonButton color="secondary"> />
<IonButton color="secondary">
<IonIcon slot="icon-only" name="more" />
</IonButton>
</IonButtons>
@ -147,10 +155,9 @@ const Example: React.SFC<{}> = () => (
<IonMenuButton autoHide={false} />
</IonButtons>
</IonToolbar>
</>
</IonContent>
);
export default Example;
```
### Vue

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

27
core/src/components/buttons/usage/react.md
View File

@ -1,13 +1,21 @@
```tsx
import React from 'react';
import {
IonButtons,
IonToolbar,
IonBackButton,
IonTitle,
IonButton,
IonIcon,
IonMenuButton,
IonContent
} from '@ionic/react';
import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ButtonsExample: React.FunctionComponent = () => (
<IonContent>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton goBack={() => {}} />
<IonBackButton defaultHref="/" />
</IonButtons>
<IonTitle>Back Button</IonTitle>
</IonToolbar>
@ -17,13 +25,13 @@ const Example: React.SFC<{}> = () => (
<IonButton>
<IonIcon slot="icon-only" name="contact" />
</IonButton>
<IonButton> />
<IonButton>
<IonIcon slot="icon-only" name="search" />
</IonButton>
</IonButtons>
<IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary">
<IonButton color="secondary"> />
<IonButton color="secondary">
<IonIcon slot="icon-only" name="more" />
</IonButton>
</IonButtons>
@ -40,7 +48,6 @@ const Example: React.SFC<{}> = () => (
<IonMenuButton autoHide={false} />
</IonButtons>
</IonToolbar>
</>
</IonContent>
);
export default Example;
```