test(many): remove unnecessary standalone tests (#26047)
Amanda Johnston
@ -10,14 +10,4 @@ test.describe('accordion: standalone', () => {
|
||||
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/accordion/test/standalone`);
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
|
||||
`accordion-standalone-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 117 KiB |
@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Avatar - 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 class="ion-padding">
|
||||
<h1>Default</h1>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</ion-avatar>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-avatar style="width: 200px; height: 200px">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</ion-avatar>
|
||||
|
||||
<ion-avatar style="--border-radius: 4px">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</ion-avatar>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('badge: rendering', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/badge/test/standalone');
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`badge-standalone-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 55 KiB |
@ -1,75 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Badge - 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 class="ion-padding">
|
||||
<h1>Default</h1>
|
||||
|
||||
<!-- Default -->
|
||||
<ion-badge>99</ion-badge>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-badge color="primary">11</ion-badge>
|
||||
<ion-badge color="secondary">22</ion-badge>
|
||||
<ion-badge color="tertiary">33</ion-badge>
|
||||
<ion-badge color="success">44</ion-badge>
|
||||
<ion-badge color="warning">55</ion-badge>
|
||||
<ion-badge color="danger">66</ion-badge>
|
||||
<ion-badge color="light">77</ion-badge>
|
||||
<ion-badge color="medium">88</ion-badge>
|
||||
<ion-badge color="dark">99</ion-badge>
|
||||
|
||||
<h1>Custom</h1>
|
||||
|
||||
<!-- Custom Font -->
|
||||
<ion-badge class="wide">wide</ion-badge>
|
||||
<ion-badge class="large">large</ion-badge>
|
||||
<ion-badge class="round">round</ion-badge>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<ion-badge class="custom">custom</ion-badge>
|
||||
<ion-badge color="secondary" class="custom">custom w/ secondary</ion-badge>
|
||||
|
||||
<style>
|
||||
ion-badge {
|
||||
--background: blue;
|
||||
}
|
||||
|
||||
.wide {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.round {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: lightpink;
|
||||
--color: #222;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('breadcrumbs: standalone', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/breadcrumbs/test/standalone`);
|
||||
|
||||
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
|
||||
`breadcrumb-standalone-diff-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 211 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 217 KiB |
|
Before Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 217 KiB |
@ -1,416 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Breadcrumbs - 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/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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Default</h1>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<h1>Colors</h1>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="primary">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="secondary">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="tertiary">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="success">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="warning">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="danger">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="light">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="medium">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" color="dark">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<h1>Custom</h1>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<h1>Custom</h1>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" class="custom">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<ion-breadcrumbs max-items="4" items-before-collapse="2" class="custom" color="secondary">
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Home
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#electronics" class="ion-focused">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Electronics
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#photography">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Photography
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#cameras">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Cameras
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb href="#film">
|
||||
<ion-icon slot="start" name="folder"></ion-icon>
|
||||
Film
|
||||
</ion-breadcrumb>
|
||||
<ion-breadcrumb>
|
||||
<ion-icon slot="start" name="document"></ion-icon>
|
||||
35 mm
|
||||
</ion-breadcrumb>
|
||||
</ion-breadcrumbs>
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #a1a7b0;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: #eff1f3;
|
||||
|
||||
margin-top: 18px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
ion-breadcrumbs {
|
||||
display: inline-flex;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.custom ion-breadcrumb {
|
||||
--color: #882be6;
|
||||
--color-active: #910b3e;
|
||||
--color-hover: #55b439;
|
||||
--color-focused: #926f2f;
|
||||
--background-focused: #eedab6;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('checkbox: standalone', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/checkbox/test/standalone`);
|
||||
|
||||
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
|
||||
`checkbox-standalone-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 85 KiB |
@ -1,110 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Checkbox - 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 class="ion-padding">
|
||||
<h1>Default</h1>
|
||||
<ion-checkbox aria-label="Default Checkbox"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-checkbox aria-label="Checkbox Primary" color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" color="dark"></ion-checkbox>
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked color="dark"></ion-checkbox>
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked disabled color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked disabled color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked disabled color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked disabled color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked disabled color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked disabled color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked disabled color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked disabled color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked disabled color="dark"></ion-checkbox>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: checked</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: light</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: transition</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition" checked></ion-checkbox>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--background: #444;
|
||||
--border-color: #000;
|
||||
}
|
||||
|
||||
.custom-checked {
|
||||
--background: lightblue;
|
||||
--border-color: lightpink;
|
||||
|
||||
--background-checked: lightpink;
|
||||
--border-color-checked: lightblue;
|
||||
}
|
||||
|
||||
.custom-light {
|
||||
--background: lightgrey;
|
||||
--border-color: darkgrey;
|
||||
|
||||
--background-checked: darkgrey;
|
||||
--border-color-checked: transparent;
|
||||
|
||||
--checkmark-color: #000;
|
||||
}
|
||||
|
||||
.custom-transition {
|
||||
--transition: all 5s ease-out;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('chip: standalone', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/chip/test/standalone');
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`chip-standalone-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 163 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 141 KiB |
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Chip - 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>
|
||||
<h2>Basic Chips</h2>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
|
||||
<h2>Color Chips</h2>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>Primary with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-label>Success with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
|
||||
<h2>Outline Chips</h2>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('infinite-scroll: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/infinite-scroll/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Infinite Scroll - 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>
|
||||
<ion-content id="content">
|
||||
<ion-list id="list"> </ion-list>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
let items = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push(i + 1);
|
||||
}
|
||||
const list = document.getElementById('list');
|
||||
const infiniteScroll = document.getElementById('infinite-scroll');
|
||||
|
||||
infiniteScroll.addEventListener('ionInfinite', async function () {
|
||||
console.log('Loading data...');
|
||||
const data = await getAsyncData();
|
||||
items = items.concat(data);
|
||||
infiniteScroll.complete();
|
||||
render();
|
||||
console.log('Done');
|
||||
});
|
||||
|
||||
function render() {
|
||||
let html = '';
|
||||
for (let item of items) {
|
||||
html += `<ion-item>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
}
|
||||
|
||||
function getAsyncData() {
|
||||
// async return mock data
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let data = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
data.push(i);
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,100 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Input - 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</h1>
|
||||
<ion-input placeholder="Input"></ion-input>
|
||||
<ion-input value="value"></ion-input>
|
||||
<ion-input type="number" placeholder="Enter a Number"></ion-input>
|
||||
<ion-input type="number" value="44"></ion-input>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input color="primary" placeholder="Placeholder"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="primary" value="Value"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="primary" value="Disabled" disabled></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input color="secondary" placeholder="Placeholder"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="secondary" value="Value"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="secondary" value="Disabled" disabled></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input color="danger" placeholder="Placeholder"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="danger" value="Value"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="danger" value="Disabled" disabled></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input color="dark" placeholder="Placeholder"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="dark" value="Value"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="dark" value="Disabled" disabled></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input color="light" placeholder="Placeholder" class="custom"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="light" value="Value" class="custom"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input color="light" value="Disabled" disabled class="custom"></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<ion-input placeholder="Placeholder" class="custom"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input value="Value" class="custom"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<ion-input value="Disabled" disabled class="custom"></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--color: green;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,14 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('input: standalone', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/input/test/standalone');
|
||||
});
|
||||
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`input-standalone-diff-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 90 KiB |
@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Item Divider - 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>
|
||||
<ion-item-divider>
|
||||
<ion-label>Item Divider</ion-label>
|
||||
<button slot="end">button</button>
|
||||
</ion-item-divider>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Item - 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>
|
||||
<ion-item>
|
||||
<ion-label>Item Text</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button color="danger">
|
||||
<ion-label>Item Tappable Danger</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button color="danger" class="ion-activated">
|
||||
<ion-label>Item Tappable Danger.activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h1>Item Multiline Text</h1>
|
||||
<h2>Heading</h2>
|
||||
<h3>Heading</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Icons</ion-label>
|
||||
<ion-icon name="heart" slot="end"></ion-icon>
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Button</ion-label>
|
||||
<button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</button>
|
||||
<button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Avatar</ion-label>
|
||||
<ion-avatar slot="start"
|
||||
><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
|
||||
</ion-avatar>
|
||||
<ion-avatar slot="end"
|
||||
><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
|
||||
</ion-avatar>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
<ion-thumbnail slot="start"
|
||||
><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
|
||||
</ion-thumbnail>
|
||||
<ion-thumbnail slot="end"
|
||||
><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
|
||||
</ion-thumbnail>
|
||||
</ion-item>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('item: standalone', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/item/test/standalone`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`item-standalone-diff-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 30 KiB |