javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(toolbar): migrate to Playwright (#26419)

Browse Source
This commit is contained in:
Amanda Johnston
2022-12-06 13:03:39 -06:00
committed by GitHub
parent fcfbcdbc20
commit aab63c25a5
44 changed files with 200 additions and 1888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/toolbar/test/basic/e2e.ts
View File

@ -1,19 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: basic', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/basic?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: basic', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/basic?ionic:_testing=true&rtl=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

87
core/src/components/toolbar/test/basic/index.html
View File

@ -17,11 +17,11 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-toolbar>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
@ -37,44 +37,30 @@
</ion-buttons>
<ion-title>Subheader</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" fullscreen="true">
<ion-card color="secondary">
<ion-card-header> Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-card class="rainbow-content">
<ion-card-header> Custom CSS Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Custom CSS Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-card color="primary">
<ion-card-header> Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-list id="dynamicList"> </ion-list>
</ion-content>
<ion-content id="content" fullscreen="true"> Content </ion-content>
<ion-footer>
<ion-toolbar>
@ -91,30 +77,5 @@
</ion-toolbar>
</ion-footer>
</ion-app>
<style>
.rainbow-content {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
color: white;
}
.rainbow-content ion-card-header,
.rainbow-content ion-card-title {
color: white;
}
</style>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push(i + 1);
}
const list = document.getElementById('dynamicList');
let html = '';
for (let item of items) {
html += `<ion-item>${item}</ion-item>`;
}
list.innerHTML = html;
</script>
</body>
</html>

12
core/src/components/toolbar/test/basic/toolbar.e2e.ts Normal file
View File

@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('toolbar: basic', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/toolbar/test/basic`);
// capture both header toolbars at once, but don't include all the white space in the ion-content
const header = page.locator('ion-header');
expect(await header.screenshot()).toMatchSnapshot(`toolbar-basic-${page.getSnapshotSettings()}.png`);
});
});

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

131
core/src/components/toolbar/test/collapse/index.html
View File

@ -1,131 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - 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>
</head>
<style>
#main ion-title {
transition: opacity ease-in-out 200ms;
}
.hide-title ion-title {
opacity: 0;
}
.my-class {
top: 0;
position: sticky;
z-index: 10;
}
.my-class ion-title {
text-align: left;
padding-left: 16px;
padding-right: 0;
font-size: 35px;
}
.two-class {
z-index: -1;
}
</style>
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary" id="main" style="--border-width: 0">
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-header>
<ion-toolbar color="primary" id="big-toolbar" class="my-class">
<ion-title>Title</ion-title>
</ion-toolbar>
<ion-toolbar color="primary" class="two-class">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-card color="secondary">
<ion-card-header> Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-card color="primary" class="rainbow-content">
<ion-card-header> Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-card color="primary">
<ion-card-header> Card Header </ion-card-header>
<ion-card-content>
<ion-card-title> Title </ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>Paragraph in content.</p>
<p>Another paragraph in content.</p>
</ion-card-content>
</ion-card>
<ion-list id="dynamicList"> </ion-list>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar> </ion-searchbar>
</ion-toolbar>
<ion-toolbar>
<ion-title> Footer </ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
<style>
.rainbow-content {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<script>
const i = new IntersectionObserver(
(e) => {
if (e[0].isIntersecting) {
document.querySelector('#main').classList.add('hide-title');
} else {
document.querySelector('#main').classList.remove('hide-title');
}
},
{
threshold: 0.5,
}
);
i.observe(document.querySelector('#big-toolbar'));
</script>
</body>
</html>

10
core/src/components/toolbar/test/colors/e2e.ts
View File

@ -1,10 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: colors', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/colors?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

399
core/src/components/toolbar/test/colors/index.html
View File

@ -17,258 +17,167 @@
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<div id="toolbars">
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button class="ion-focused" fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-button class="ion-focused" fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button class="ion-focused" fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button class="ion-focused" fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="outline">Outline</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Medium</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button class="ion-focused" fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="outline">Outline</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Medium</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Custom</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title color="secondary" class="custom-title">Secondary</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title class="custom-title">Custom</ion-title>
</ion-toolbar>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-button fill="solid" color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Custom</ion-title>
</ion-toolbar>
</div>
</ion-content>
</ion-app>
@ -277,10 +186,6 @@
--background: black;
--color: hotpink;
}
.custom-title {
--color: red;
}
</style>
</body>
</html>

12
core/src/components/toolbar/test/colors/toolbar.e2e.ts Normal file
View File

@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('toolbar: colors', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/toolbar/test/colors`);
// only capture the container to avoid extra white space
const container = page.locator('#toolbars');
expect(await container.screenshot()).toMatchSnapshot(`toolbar-colors-${page.getSnapshotSettings()}.png`);
});
});

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

10
core/src/components/toolbar/test/components/e2e.ts
View File

@ -1,10 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: components', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/components?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

118
core/src/components/toolbar/test/components/index.html
View File

@ -1,118 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Components</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>
<ion-app>
<ion-content id="content">
<!-- Left Side Menu Toggle Components -->
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left Side Menu Toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary" value="second">
<ion-segment-button value="first"> Segment </ion-segment-button>
<ion-segment-button value="second"> Component </ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Searchbar..."></ion-searchbar>
</ion-toolbar>
<!-- Right Side Menu Toggle Components -->
<ion-toolbar>
<ion-buttons slot="start">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right Side Menu Toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary" value="component">
<ion-segment-button value="segment"> Segment </ion-segment-button>
<ion-segment-button value="component"> Component </ion-segment-button>
</ion-segment>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Searchbar..."></ion-searchbar>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar color="light">
<ion-segment value="third">
<ion-segment-button value="first"> Light </ion-segment-button>
<ion-segment-button value="second"> Bar </ion-segment-button>
<ion-segment-button value="third"> Segment </ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="light">
<ion-segment color="primary" value="first">
<ion-segment-button value="first"> Light </ion-segment-button>
<ion-segment-button value="second"> Bar </ion-segment-button>
<ion-segment-button value="third"> Primary </ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>

19
core/src/components/toolbar/test/custom/e2e.ts
View File

@ -1,19 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: custom', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/custom?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: custom', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/custom?ionic:_testing=true&rtl=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

297
core/src/components/toolbar/test/custom/index.html
View File

@ -1,297 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Custom</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>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary" class="themed-colors component-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color: Themed</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary" class="themed-colors component-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color: Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="start">
<ion-back-button color="danger" default-href="/" text=""></ion-back-button>
<ion-menu-button color="danger" auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed w / Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="secondary">
<ion-button color="danger" fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button color="danger">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger" fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="danger" fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed w / Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="start">
<ion-back-button color="secondary" default-href="/" text=""></ion-back-button>
<ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars w/ Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="secondary">
<ion-button color="secondary" fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars w/ Color Buttons</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>
<style>
.themed-colors {
--ion-toolbar-background: #d9fae0;
--ion-toolbar-color: #b68928;
}
.component-colors {
--background: #fff4f5;
}
.component-colors,
.component-colors ion-back-button,
.component-colors ion-menu-button,
.component-colors ion-button {
--color: #aa3723;
}
.component-colors ion-button[fill='solid'] {
--background: #aa3723;
--color: #fff;
}
</style>
</body>
</html>

19
core/src/components/toolbar/test/modes/e2e.ts
View File

@ -1,19 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: modes', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/modes?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: modes', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/modes?ionic:_testing=true&rtl=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

84
core/src/components/toolbar/test/modes/index.html
View File

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Modes</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>
<ion-app>
<ion-content id="content">
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-title>iOS toolbar</ion-title>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-title>MD toolbar</ion-title>
</ion-toolbar>
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-title>iOS toolbar</ion-title>
<ion-buttons slot="secondary">
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>Clear</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-title>MD toolbar</ion-title>
<ion-buttons slot="secondary">
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>Clear</ion-button>
<ion-button fill="solid">Solid</ion-button>
</ion-buttons>
</ion-toolbar>
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-segment value="segment">
<ion-segment-button value="ios">iOS</ion-segment-button>
<ion-segment-button value="segment">Segment</ion-segment-button>
</ion-segment>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-segment value="segment">
<ion-segment-button value="md">MD</ion-segment-button>
<ion-segment-button value="segment">Segment</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>

19
core/src/components/toolbar/test/scenarios/e2e.ts
View File

@ -1,19 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: scenarios', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/scenarios?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: scenarios', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/scenarios?ionic:_testing=true&rtl=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

195
core/src/components/toolbar/test/scenarios/index.html
View File

@ -1,195 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Scenarios</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>
<ion-app>
<ion-content id="content">
<ion-toolbar class="ion-no-padding">
<ion-title>This should have no padding</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button class="ion-activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" class="ion-activated">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="solid">
<ion-icon slot="start" name="person-circle"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button href="#" fill="solid" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="solid" class="ion-activated">
<ion-icon slot="start" name="person-circle"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary" class="ion-activated">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="start" name="star"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline" class="ion-activated">
<ion-icon slot="start" name="star"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="ion-activated">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="start" name="person-circle"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button href="#">
Edit
<ion-icon slot="end" name="create"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button> Go Back </ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button href="#"> Edit </ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-title>This is an iOS toolbar</ion-title>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-title>This is an MD toolbar</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>
<script>
function buttonClick(ev) {}
</script>
</body>
</html>

10
core/src/components/toolbar/test/spec/e2e.ts
View File

@ -1,10 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: spec', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/spec?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

291
core/src/components/toolbar/test/spec/index.html
View File

@ -1,291 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Spec</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>
<ion-app>
<ion-content>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="download"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="print"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="bookmark"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Standard</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-back-button default-href="/" text="February"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" ios="list-outline" md="list-sharp"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="search-outline" md="search-sharp"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="add-outline" md="add-sharp"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button> Clearing </ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button> Done </ion-button>
</ion-buttons>
<ion-title>Text</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button> Start </ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button> Pri </ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button> End </ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button> Sec </ion-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="call"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="call"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-back-button default-href="#"></ion-back-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Text</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-segment value="all">
<ion-segment-button value="all">All</ion-segment-button>
<ion-segment-button value="favorites">Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment value="all">
<ion-segment-button value="all">All</ion-segment-button>
<ion-segment-button value="favorites">Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-segment value="all">
<ion-segment-button value="all">All</ion-segment-button>
<ion-segment-button value="favorites">Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-segment value="all">
<ion-segment-button value="all">All</ion-segment-button>
<ion-segment-button value="favorites">Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-progress-bar value=".4"></ion-progress-bar>
</ion-toolbar>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title> Click to Add Text </ion-title>
<ion-buttons slot="end">
<ion-button id="changeText" onClick="toggleText()">
<ion-icon slot="start" name="refresh"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
<script>
const button = document.getElementById('changeText');
function toggleText() {
const hasText = button.querySelector('#childText');
if (hasText) {
button.removeChild(hasText);
} else {
var text = document.createElement('span');
text.innerHTML = 'Toggle';
text.id = 'childText';
button.appendChild(text, button);
}
}
</script>
<style>
ion-toolbar {
margin-bottom: 10px;
}
</style>
</ion-app>
</body>
</html>

19
core/src/components/toolbar/test/title/e2e.ts
View File

@ -1,19 +0,0 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: title', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/title?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: title', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/title?ionic:_testing=true&rtl=true',
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

185
core/src/components/toolbar/test/title/index.html
View File

@ -1,185 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Title</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>
.more,
.create {
--dimension: 28px;
width: var(--dimension);
height: var(--dimension) !important;
--border-radius: var(--dimension) !important;
}
.more {
--background: #e9e9ea;
}
.create {
--background: #3777ff;
--color: white !important;
}
.create ion-icon {
transform: scale(0.9);
}
.main-toolbar {
--background: rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-item {
--padding-start: 10px;
}
.item-badge {
padding: 0;
margin-top: 14px;
margin-right: 10px;
width: 14px;
height: 14px;
}
</style>
<script>
class PageOne extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
html += `
<ion-nav-link component="page-three">
<ion-item button>
<ion-badge slot="start" class="item-badge ion-align-self-start">&nbsp;</ion-badge>
<ion-label>
<h2>Heading ${i}</h2>
<h3>Smaller heading ${i}</h2>
<p>Paragraph ${i}</p>
</ion-label>
</ion-item>
</ion-nav-link>
`;
}
return html;
}
connectedCallback() {
this.innerHTML = `
<ion-header class="main-header" translucent>
<ion-toolbar class="main-toolbar">
<ion-segment>
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar class="main-toolbar">
<ion-segment>
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar class="main-toolbar">
<ion-buttons collapse>
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
<ion-buttons slot="end">
<ion-button>Hello Page 2</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="main-content" fullscreen>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Page Two</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-list id="dynamicList">${this.generateList()}</ion-list>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
html += `
<ion-item button color="dark">
<ion-badge slot="start" class="item-badge ion-align-self-start">&nbsp;</ion-badge>
<ion-label>
<h2>Heading ${i}</h2>
<h3>Smaller heading ${i}</h2>
<p>Paragraph ${i}</p>
</ion-label>
</ion-item>
`;
}
return html;
}
connectedCallback() {
this.innerHTML = `
<ion-header class="three-header" color="dark" translucent>
<ion-toolbar color="dark">
<ion-buttons>
<ion-back-button default-href="/" text="Page Two"></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
<ion-buttons slot="end" collapse>
<ion-button>Hello Page 3</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="three-content" fullscreen color="dark">
<ion-header collapse="condense" color="dark">
<ion-toolbar color="dark">
<ion-title size="large">Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-list id="dynamicList">${this.generateList()}</ion-list>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-three', PageThree);
</script>
</body>
</html>

152
core/src/components/toolbar/test/translucent/index.html
View File

@ -1,152 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Toolbar - Translucent</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>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Toolbar - Translucent</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="6">
<f class="red"></f>
</ion-col>
<ion-col size="6">
<f class="green"></f>
</ion-col>
<ion-col size="6">
<f class="blue"></f>
</ion-col>
<ion-col size="6">
<f class="yellow"></f>
</ion-col>
<ion-col size="6">
<f class="pink"></f>
</ion-col>
<ion-col size="6">
<f class="purple"></f>
</ion-col>
<ion-col size="6">
<f class="black"></f>
</ion-col>
<ion-col size="6">
<f class="orange"></f>
</ion-col>
</ion-row>
</ion-grid>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam
risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia
porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce
felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi
arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla
nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis
nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis
eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec
tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex,
et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae
interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor
ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non
vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor
risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus
mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis
aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque
scelerisque nisl eu suscipit consectetur.
</p>
<ion-grid>
<ion-row>
<ion-col size="6">
<f class="red"></f>
</ion-col>
<ion-col size="6">
<f class="green"></f>
</ion-col>
<ion-col size="6">
<f class="blue"></f>
</ion-col>
<ion-col size="6">
<f class="yellow"></f>
</ion-col>
<ion-col size="6">
<f class="pink"></f>
</ion-col>
<ion-col size="6">
<f class="purple"></f>
</ion-col>
<ion-col size="6">
<f class="black"></f>
</ion-col>
<ion-col size="6">
<f class="orange"></f>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer translucent>
<ion-toolbar>
<ion-title>Toolbar - Translucent</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
<style>
f {
display: block;
height: 200px;
}
.red {
background-color: #ea445a;
}
.green {
background-color: #76d672;
}
.blue {
background-color: #3478f6;
}
.yellow {
background-color: #ffff80;
}
.pink {
background-color: #ff6b86;
}
.purple {
background-color: #7e34f6;
}
.black {
background-color: #000;
}
.orange {
background-color: #f69234;
}
</style>
</body>
</html>