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

chore(header): finalize collapse API (#19276)

Browse Source 
* make requested changes

* add e2e

* add RTL support

* fix typo

* add info on how to make collapsable title

* add usage examples

* fix typo

* fix another typo

* fix typos

* update usage

* fix alpha order

* update api

* add class to collapse buttons

* merge

* update

* change back to collapse

* remove platform specific class

* update docs

* run build

* update api again

* run build
This commit is contained in:
Liam DeBeasi
2019-09-24 18:00:03 +01:00
committed by GitHub
parent 1e081c0a22
commit e90e960294
26 changed files with 873 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,19 @@
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();
});

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

@ -30,27 +30,9 @@
.create ion-icon {
transform: scale(0.9);
}
/*
ion-toolbar {
--background: red;
--border-color: #dfe1e0;
}
.main-content {
--background: #f1f2f6;
}
*/
</style>
</head>
<!--<ion-button slot="icon-only" class="more">
<ion-icon name="ios-more"></ion-icon>
</ion-button>
<ion-button slot="icon-only" class="create">
<ion-icon name="ios-create"></ion-icon>
</ion-button>-->
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
@ -71,7 +53,7 @@
</style>
<script>
class PageTwo extends HTMLElement {
class PageOne extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
@ -108,7 +90,7 @@
</ion-header>
<ion-content id="content" class="main-content">
<ion-header collapse>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Page Two</ion-title>
</ion-toolbar>
@ -122,48 +104,21 @@
`;
}
}
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Settings"></ion-back-button>
</ion-buttons>
<ion-title>Page main</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-nav-link component="page-two">
<ion-item button>
<ion-label>Go to Page Two</ion-label>
</ion-item>
</ion-nav-link>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
generateList() {
let html = '';
for (let i = 0; i < 100; i++) {
html += `
<ion-nav-link component="page-two">
<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>
</ion-nav-link>
<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;
@ -184,7 +139,7 @@
</ion-header>
<ion-content id="content" class="three-content" fullscreen color="dark">
<ion-header collapse color="dark">
<ion-header collapse="condense" color="dark">
<ion-toolbar color="dark">
<ion-title size="large">Page Three</ion-title>
</ion-toolbar>
@ -196,7 +151,6 @@
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</body>