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

23
core/src/components/segment/readme.md
View File

@ -229,13 +229,12 @@ for (let i = 0; i < segments.length; i++) {
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const SegmentExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="friends">
<IonLabel>Friends</IonLabel>
</IonSegmentButton>
@ -245,7 +244,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled>
<IonSegmentButton value="sunny" checked>
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
@ -255,7 +254,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Segment with anchors --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="dogs">
<IonLabel>Dogs</IonLabel>
</IonSegmentButton>
@ -290,7 +289,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Segment with secondary color --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegmentButton value="standard">
<IonLabel>Standard</IonLabel>
</IonSegmentButton>
@ -304,7 +303,7 @@ const Example: React.SFC<{}> = () => (
{/*-- Segment in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon name="camera" />
</IonSegmentButton>
@ -315,7 +314,7 @@ const Example: React.SFC<{}> = () => (
</IonToolbar>
{/*-- Segment with default selection --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegmentButton value="python">
<IonLabel>Python</IonLabel>
</IonSegmentButton>
@ -323,10 +322,8 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Javascript</IonLabel>
</IonSegmentButton>
</IonSegment>
</>
</IonContent>
);
export default Example;
```

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

@ -1,8 +1,12 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { Color, Mode, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-segment',
styleUrls: {
@ -22,11 +26,6 @@ export class Segment implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the segment.
*/
@ -96,10 +95,11 @@ export class Segment implements ComponentInterface {
}
hostData() {
const mode = getIonMode(this);
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
[`${mode}`]: true,
'segment-disabled': this.disabled,
'segment-scrollable': this.scrollable
}

4
core/src/components/segment/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 onload="listenForEvent()">
<ion-app>

4
core/src/components/segment/test/custom/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/segment/test/modes/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/segment/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 onLoad="setLayout()">
<ion-app>

4
core/src/components/segment/test/spec/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 onLoad="setLayout()">
<ion-app>

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

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

25
core/src/components/segment/usage/react.md
View File

@ -1,12 +1,11 @@
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const SegmentExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="friends">
<IonLabel>Friends</IonLabel>
</IonSegmentButton>
@ -16,7 +15,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled>
<IonSegmentButton value="sunny" checked>
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
@ -26,7 +25,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Segment with anchors --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="dogs">
<IonLabel>Dogs</IonLabel>
</IonSegmentButton>
@ -61,7 +60,7 @@ const Example: React.SFC<{}> = () => (
</IonSegment>
{/*-- Segment with secondary color --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegmentButton value="standard">
<IonLabel>Standard</IonLabel>
</IonSegmentButton>
@ -75,7 +74,7 @@ const Example: React.SFC<{}> = () => (
{/*-- Segment in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon name="camera" />
</IonSegmentButton>
@ -86,7 +85,7 @@ const Example: React.SFC<{}> = () => (
</IonToolbar>
{/*-- Segment with default selection --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegmentButton value="python">
<IonLabel>Python</IonLabel>
</IonSegmentButton>
@ -94,8 +93,6 @@ const Example: React.SFC<{}> = () => (
<IonLabel>Javascript</IonLabel>
</IonSegmentButton>
</IonSegment>
</>
</IonContent>
);
export default Example;
```
```