javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): cascade mode from parent to child components (#19369)

Browse Source 
fixes #18285
This commit is contained in:
Brandy Carney
2019-10-08 15:46:59 -04:00
parent dbf6a448ff
commit 3dd5f05760
8 changed files with 268 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,19 @@
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 Normal file
View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html 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>
<ion-segment-button>iOS</ion-segment-button>
<ion-segment-button checked>Segment</ion-segment-button>
</ion-segment>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-segment>
<ion-segment-button>MD</ion-segment-button>
<ion-segment-button checked>Segment</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>