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

16
core/src/components/progress-bar/progress-bar.tsx
View File

@ -1,9 +1,13 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Component, ComponentInterface, Prop, h } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Color, Config } from '../../interface';
import { clamp } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-progress-bar',
styleUrls: {
@ -16,11 +20,6 @@ export class ProgressBar implements ComponentInterface {
@Prop({ context: 'config' }) config!: Config;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* The state of the progress bar, based on if the time the process takes is known or not.
* Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
@ -55,6 +54,7 @@ export class ProgressBar implements ComponentInterface {
hostData() {
const { color, type, reversed, value } = this;
const paused = this.config.getBoolean('_testing');
const mode = getIonMode(this);
return {
'role': 'progressbar',
'aria-valuenow': type === 'determinate' ? value : null,
@ -62,7 +62,7 @@ export class ProgressBar implements ComponentInterface {
'aria-valuemax': 1,
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
[`${mode}`]: true,
[`progress-bar-${type}`]: true,
'progress-paused': paused,
'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed

25
core/src/components/progress-bar/readme.md
View File

@ -45,29 +45,26 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
```tsx
import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';
import { IonProgressBar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ProgressbarExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Progressbar --*/}
<IonProgressBar></IonProgressBar>
<IonProgressBar></IonProgressBar><br />
{/*-- Default Progressbar with 50 percent --*/}
<IonProgressBar value={0.5}></IonProgressBar>
<IonProgressBar value={0.5}></IonProgressBar><br />
{/*-- Colorize Progressbar --*/}
<IonProgressBar color="primary" value={0.5}></IonProgressBar>
<IonProgressBar color="secondary" value={0.5}></IonProgressBar>
<IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
<IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />
{/*-- Other types --*/}
<IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
<IonProgressBar type="indeterminate"></IonProgressBar>
<IonProgressBar type="indeterminate" reversed={true}></IonProgressBar>
</>
<IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
<IonProgressBar type="indeterminate"></IonProgressBar><br />
<IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
</IonContent>
);
export default Example;
```

4
core/src/components/progress-bar/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>
<style>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <style>
.custom-bar-background {
--buffer-background: red;
}

4
core/src/components/progress-bar/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/progress-bar/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>
<h1>Default Progress Bar</h1>

25
core/src/components/progress-bar/usage/react.md
View File

@ -1,26 +1,23 @@
```tsx
import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';
import { IonProgressBar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
export const ProgressbarExample: React.FunctionComponent = () => (
<IonContent>
{/*-- Default Progressbar --*/}
<IonProgressBar></IonProgressBar>
<IonProgressBar></IonProgressBar><br />
{/*-- Default Progressbar with 50 percent --*/}
<IonProgressBar value={0.5}></IonProgressBar>
<IonProgressBar value={0.5}></IonProgressBar><br />
{/*-- Colorize Progressbar --*/}
<IonProgressBar color="primary" value={0.5}></IonProgressBar>
<IonProgressBar color="secondary" value={0.5}></IonProgressBar>
<IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
<IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />
{/*-- Other types --*/}
<IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
<IonProgressBar type="indeterminate"></IonProgressBar>
<IonProgressBar type="indeterminate" reversed={true}></IonProgressBar>
</>
<IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
<IonProgressBar type="indeterminate"></IonProgressBar><br />
<IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
</IonContent>
);
export default Example;
```