javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popover): get md and wp displaying and add long popover tests

Browse Source
This commit is contained in:
Brandy Carney
2017-08-15 11:16:11 -04:00
parent ceac83addf
commit 838809a718
3 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/popover/popover.md.scss
View File

@ -47,6 +47,6 @@ $popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-col
} }
.popover-md .popover-viewport { .popover-md .popover-viewport {
opacity: 0; // opacity: 0;
transition-delay: 100ms; transition-delay: 100ms;
} }

2
packages/core/src/components/popover/popover.wp.scss
View File

@ -44,6 +44,6 @@ $popover-wp-background: $background-wp-color !default;
} }
.popover-wp .popover-viewport { .popover-wp .popover-viewport {
opacity: 0; // opacity: 0;
transition-delay: 100ms; transition-delay: 100ms;
} }

51
packages/core/src/components/popover/test/basic.html
View File

@ -23,6 +23,7 @@
<ion-content padding> <ion-content padding>
<ion-button block onclick="presentPopover('profile-page', event)">Show Popover</ion-button> <ion-button block onclick="presentPopover('profile-page', event)">Show Popover</ion-button>
<ion-button block onclick="presentPopover('list-page', event)">Show Long List Popover</ion-button>
<ion-popover-controller></ion-popover-controller> <ion-popover-controller></ion-popover-controller>
</ion-content> </ion-content>
@ -52,32 +53,50 @@
class ProfilePage extends HTMLElement { class ProfilePage extends HTMLElement {
constructor() { constructor() {
super(); super();
}
const shadowRoot = this.attachShadow({ connectedCallback() {
mode: 'open' this.innerHTML = `
});
shadowRoot.innerHTML = `
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-list-header>Ionic</ion-list-header> <ion-list-header>Ionic</ion-list-header>
<ion-item onclick="connectedCallback(event)">Dismiss</ion-item>
<ion-item><ion-label>Item 0</ion-label></ion-item> <ion-item><ion-label>Item 0</ion-label></ion-item>
<ion-item><ion-label>Item 1</ion-label></ion-item>
<ion-item><ion-label>Item 2</ion-label></ion-item>
<ion-item><ion-label>Item 3</ion-label></ion-item>
</ion-list> </ion-list>
</ion-content>`; </ion-content>
} `;
connectedCallback(event) {
var ev = new CustomEvent('ionDismiss', {
composed: true,
bubbles: true
});
console.log('event', event);
// event.target.dispatchEvent(ev);
} }
} }
customElements.define('profile-page', ProfilePage); customElements.define('profile-page', ProfilePage);
class ListPage extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
let items = '';
for (var i = 0; i < 30; i++) {
items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
}
console.log(items);
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
` + items + `
</ion-list>
</ion-content>
`;
}
}
customElements.define('list-page', ListPage);
</script> </script>
</body> </body>