mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
Liam DeBeasi
@ -1,8 +1,9 @@
|
||||
import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Component, Host, Prop, h } from '@stencil/core';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color } from '../../interface';
|
||||
import type { Color } from '../../interface';
|
||||
import { clamp } from '../../utils/helpers';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@ -18,12 +19,11 @@ import { createColorClasses } from '../../utils/theme';
|
||||
tag: 'ion-progress-bar',
|
||||
styleUrls: {
|
||||
ios: 'progress-bar.ios.scss',
|
||||
md: 'progress-bar.md.scss'
|
||||
md: 'progress-bar.md.scss',
|
||||
},
|
||||
shadow: true
|
||||
shadow: true,
|
||||
})
|
||||
export class ProgressBar implements ComponentInterface {
|
||||
|
||||
/**
|
||||
* 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).
|
||||
@ -69,13 +69,10 @@ export class ProgressBar implements ComponentInterface {
|
||||
[mode]: true,
|
||||
[`progress-bar-${type}`]: true,
|
||||
'progress-paused': paused,
|
||||
'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
|
||||
'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
|
||||
})}
|
||||
>
|
||||
{type === 'indeterminate'
|
||||
? renderIndeterminate()
|
||||
: renderProgress(value, buffer)
|
||||
}
|
||||
{type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)}
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
@ -84,8 +81,12 @@ export class ProgressBar implements ComponentInterface {
|
||||
const renderIndeterminate = () => {
|
||||
return (
|
||||
<div part="track" class="progress-buffer-bar">
|
||||
<div class="indeterminate-bar-primary"><span part="progress" class="progress-indeterminate"></span></div>
|
||||
<div class="indeterminate-bar-secondary"><span part="progress" class="progress-indeterminate"></span></div>
|
||||
<div class="indeterminate-bar-primary">
|
||||
<span part="progress" class="progress-indeterminate"></span>
|
||||
</div>
|
||||
<div class="indeterminate-bar-secondary">
|
||||
<span part="progress" class="progress-indeterminate"></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -103,7 +104,10 @@ const renderProgress = (value: number, buffer: number) => {
|
||||
* When finalBuffer === 1, we use display: none
|
||||
* instead of removing the element to avoid flickering.
|
||||
*/
|
||||
<div class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
|
||||
<div
|
||||
class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }}
|
||||
style={{ transform: `translateX(${finalBuffer * 100}%)` }}
|
||||
>
|
||||
<div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>
|
||||
<div part="stream" class="buffer-circles"></div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('progress-bar: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/progress-bar/test/basic?ionic:_testing=true'
|
||||
url: '/src/components/progress-bar/test/basic?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,168 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Progress Bar - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<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;
|
||||
}
|
||||
|
||||
.no-bar-background {
|
||||
--buffer-background: none;
|
||||
}
|
||||
|
||||
ion-content ion-progress-bar {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Progress Bar - Basic</ion-title>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Indeterminate
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Indeterminate with secondary color
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Indeterminate (reversed)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate (reversed)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate (secondary color)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate (with no bar background)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate (with a custom background)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Determinate (change progress with slider)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar id="progressBar"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range pin="true" value="0" id="progressValue">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Buffer
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Buffer (reversed)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Buffer (without value)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Buffer (change buffer with slider)
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range pin="true" value="0" id="progressValueBuffer">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
// Progress Bar Value
|
||||
const progressValue = document.getElementById('progressValue');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
|
||||
progressValue.addEventListener('ionChange', function (ev) {
|
||||
progressBar.value = ev.detail.value / 100;
|
||||
});
|
||||
|
||||
// Progress Bar Buffer
|
||||
const progressValueBuffer = document.getElementById('progressValueBuffer');
|
||||
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
|
||||
|
||||
progressValueBuffer.addEventListener('ionChange', function (ev) {
|
||||
progressBarBuffer.forEach(ele => ele.buffer = ev.detail.value / 100);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Progress Bar - Basic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<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;
|
||||
}
|
||||
|
||||
.no-bar-background {
|
||||
--buffer-background: none;
|
||||
}
|
||||
|
||||
ion-content ion-progress-bar {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Progress Bar - Basic</ion-title>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Indeterminate </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Indeterminate with secondary color </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Indeterminate (reversed) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate (reversed) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate (secondary color) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate (with no bar background) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate (with a custom background) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Determinate (change progress with slider) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar id="progressBar"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range pin="true" value="0" id="progressValue">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Buffer </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Buffer (reversed) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Buffer (without value) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label> Buffer (change buffer with slider) </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range pin="true" value="0" id="progressValueBuffer">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
// Progress Bar Value
|
||||
const progressValue = document.getElementById('progressValue');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
|
||||
progressValue.addEventListener('ionChange', function (ev) {
|
||||
progressBar.value = ev.detail.value / 100;
|
||||
});
|
||||
|
||||
// Progress Bar Buffer
|
||||
const progressValueBuffer = document.getElementById('progressValueBuffer');
|
||||
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
|
||||
|
||||
progressValueBuffer.addEventListener('ionChange', function (ev) {
|
||||
progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('progress-bar: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/progress-bar/test/standalone?ionic:_testing=true'
|
||||
url: '/src/components/progress-bar/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,182 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Progress Bar - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<h1>Default Progress Bars</h1>
|
||||
<ion-progress-bar></ion-progress-bar>
|
||||
<ion-progress-bar value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Progress Bar: Colors</h1>
|
||||
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="tertiary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="success" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="warning" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="danger" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="dark" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="light" value="0.5"></ion-progress-bar>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Default Types</h1>
|
||||
<ion-progress-bar></ion-progress-bar>
|
||||
<ion-progress-bar value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Custom: colors by part</h1>
|
||||
<ion-progress-bar class="custom-color-parts"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" buffer="0.9"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Custom: colors by css variable</h1>
|
||||
<ion-progress-bar class="custom-color-variables"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Custom border radius</h1>
|
||||
<ion-progress-bar class="custom-border-radius"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-border-radius" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-border-radius" type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<h1>Custom transition</h1>
|
||||
<ion-progress-bar class="random-value" max="100"></ion-progress-bar>
|
||||
<ion-progress-bar class="random-value custom-transition" max="100"></ion-progress-bar>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
let randomValues = document.querySelectorAll('.random-value');
|
||||
|
||||
setInterval(() => {
|
||||
let value = Math.random();
|
||||
|
||||
for (let i = 0; i < randomValues.length; i++) {
|
||||
randomValues[i].value = value;
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Progress Bar - Standalone</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Default Progress Bars</h1>
|
||||
<ion-progress-bar></ion-progress-bar>
|
||||
<ion-progress-bar value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Progress Bar: Colors</h1>
|
||||
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="tertiary" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="success" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="warning" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="danger" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="dark" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar color="light" value="0.5"></ion-progress-bar>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Default Types</h1>
|
||||
<ion-progress-bar></ion-progress-bar>
|
||||
<ion-progress-bar value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar color="warning" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Custom: colors by part</h1>
|
||||
<ion-progress-bar class="custom-color-parts"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" buffer="0.9"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar
|
||||
class="custom-color-parts"
|
||||
color="warning"
|
||||
reversed="true"
|
||||
value="0.20"
|
||||
buffer="0.4"
|
||||
></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-parts" type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Custom: colors by css variable</h1>
|
||||
<ion-progress-bar class="custom-color-variables"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||
<ion-progress-bar
|
||||
class="custom-color-variables"
|
||||
color="warning"
|
||||
reversed="true"
|
||||
value="0.20"
|
||||
buffer="0.4"
|
||||
></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" buffer="0"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" color="danger" type="indeterminate"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-color-variables" type="indeterminate" reversed="true"></ion-progress-bar>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Custom border radius</h1>
|
||||
<ion-progress-bar class="custom-border-radius"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-border-radius" value="0.5"></ion-progress-bar>
|
||||
<ion-progress-bar class="custom-border-radius" type="indeterminate"></ion-progress-bar>
|
||||
|
||||
<h1>Custom transition</h1>
|
||||
<ion-progress-bar class="random-value" max="100"></ion-progress-bar>
|
||||
<ion-progress-bar class="random-value custom-transition" max="100"></ion-progress-bar>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
let randomValues = document.querySelectorAll('.random-value');
|
||||
|
||||
setInterval(() => {
|
||||
let value = Math.random();
|
||||
|
||||
for (let i = 0; i < randomValues.length; i++) {
|
||||
randomValues[i].value = value;
|
||||
}
|
||||
}, 100);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #a1a7b0;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}, 100);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #a1a7b0;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
hr {
|
||||
background: #eff1f3;
|
||||
border: none;
|
||||
|
||||
hr {
|
||||
background: #eff1f3;
|
||||
border: none;
|
||||
height: 1px;
|
||||
|
||||
height: 1px;
|
||||
|
||||
margin-top: 18px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
margin-top: 18px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
ion-progress-bar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
ion-progress-bar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Custom progress bar color using parts
|
||||
* ------------------------------------------------------
|
||||
* Note: in these examples setting the background on
|
||||
* each element should override the color prop
|
||||
*/
|
||||
|
||||
/* determinate buffer / track and indeterminate track */
|
||||
.custom-color-parts::part(track) {
|
||||
background:rgb(158, 157, 36, 0.2);
|
||||
}
|
||||
/* determinate buffer / track and indeterminate track */
|
||||
.custom-color-parts::part(track) {
|
||||
background: rgb(158, 157, 36, 0.2);
|
||||
}
|
||||
|
||||
/* determinate and indeterminate progress background */
|
||||
.custom-color-parts::part(progress) {
|
||||
background: #9e9d24;
|
||||
}
|
||||
/* determinate and indeterminate progress background */
|
||||
.custom-color-parts::part(progress) {
|
||||
background: #9e9d24;
|
||||
}
|
||||
|
||||
/* buffer stream (animated circles) */
|
||||
.custom-color-parts::part(stream) {
|
||||
background-image: radial-gradient(ellipse at center, rgb(158, 157, 36, 0.2) 0%, rgb(158, 157, 36, 0.2) 30%, transparent 30%);
|
||||
}
|
||||
/* buffer stream (animated circles) */
|
||||
.custom-color-parts::part(stream) {
|
||||
background-image: radial-gradient(
|
||||
ellipse at center,
|
||||
rgb(158, 157, 36, 0.2) 0%,
|
||||
rgb(158, 157, 36, 0.2) 30%,
|
||||
transparent 30%
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Custom progress bar color using css variables
|
||||
* ------------------------------------------------------
|
||||
* Note: in this example setting the background via
|
||||
* CSS variables should NOT override the color prop
|
||||
*/
|
||||
.custom-color-variables {
|
||||
--background: rgb(158, 157, 36, 0.2);
|
||||
--progress-background: #9e9d24;
|
||||
}
|
||||
.custom-color-variables {
|
||||
--background: rgb(158, 157, 36, 0.2);
|
||||
--progress-background: #9e9d24;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Custom progress bar border radius using parts
|
||||
* ------------------------------------------------------
|
||||
*/
|
||||
.custom-border-radius {
|
||||
border-radius: 10px;
|
||||
.custom-border-radius {
|
||||
border-radius: 10px;
|
||||
|
||||
height: 20px;
|
||||
}
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.custom-border-radius::part(progress) {
|
||||
border-radius: 0 50% 50% 0;
|
||||
}
|
||||
.custom-border-radius::part(progress) {
|
||||
border-radius: 0 50% 50% 0;
|
||||
}
|
||||
|
||||
.custom-border-radius[type="indeterminate"]::part(progress) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.custom-border-radius[type='indeterminate']::part(progress) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Custom transition for fast value changes
|
||||
* ------------------------------------------------------
|
||||
* The first progress bar in the example has the default
|
||||
* transition, while the second has none. This is
|
||||
* apparent because they use the same values.
|
||||
*/
|
||||
.custom-transition::part(progress) {
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
.custom-transition::part(progress) {
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user