test(many): remove unnecessary standalone tests (#26047)
@ -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>
|
||||