mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
remove layout
This commit is contained in:
@@ -1,58 +0,0 @@
|
||||
|
||||
layout,
|
||||
[layout] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[flex] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ele-qry {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -99;
|
||||
}
|
||||
|
||||
|
||||
@mixin element-query($mq) {
|
||||
$mq: "'" + $mq + "'";
|
||||
|
||||
$attr: str-replace($mq, ':', '-');
|
||||
$attr: str-replace($attr, ' ', '-');
|
||||
$attr: str-replace($attr, '--', '-');
|
||||
$attr: str-replace($attr, '(', '');
|
||||
$attr: str-replace($attr, ')', '');
|
||||
|
||||
&.#{$attr} {
|
||||
@content;
|
||||
}
|
||||
|
||||
.ele-qry {
|
||||
font-family: $mq;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
div {
|
||||
|
||||
@include element-query( (min-width: 300px) ) {
|
||||
background: blue;
|
||||
};
|
||||
|
||||
@include element-query( (min-width: 400px) And (max-width: 800px) ) {
|
||||
background: green;
|
||||
};
|
||||
|
||||
}
|
||||
*/
|
||||
@@ -1,53 +0,0 @@
|
||||
import {Component, View, ElementRef} from 'angular2/angular2'
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'layout,[layout]'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<ng-content></ng-content>
|
||||
<object class="ele-qry" data="about:blank"></object>
|
||||
`
|
||||
})
|
||||
export class Layout {
|
||||
constructor(
|
||||
@ElementRef() elementRef:ElementRef
|
||||
) {
|
||||
this.ele = ngElement.nativeElement
|
||||
this.eqEle = this.ele.lastElementChild
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
this.initLayout()
|
||||
})
|
||||
}
|
||||
|
||||
initLayout() {
|
||||
this.mqs = {}
|
||||
|
||||
|
||||
for (let x = 0; x < this.ele.attributes.length; x++) {
|
||||
let attr = this.ele.attributes[x]
|
||||
let val = attr.nodeValue
|
||||
let mqClassname = attr.nodeName
|
||||
|
||||
if (val.indexOf('(') > -1 && val.indexOf(')') > -1) {
|
||||
let mql = this.eqEle.contentDocument.defaultView.matchMedia(val)
|
||||
|
||||
if (mql.media !== 'not all') {
|
||||
this.mqs[mql.media] = (mql) => {
|
||||
console.log(mql.media, mql.matches, mqClassname)
|
||||
window.requestAnimationFrame(() => {
|
||||
this.ele.classList[mql.matches ? 'add' : 'remove'](mqClassname)
|
||||
})
|
||||
}
|
||||
|
||||
this.mqs[mql.media](mql)
|
||||
mql.addListener(this.mqs[mql.media])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
@@ -1,15 +0,0 @@
|
||||
|
||||
<layout style="width:80%;"
|
||||
abc="(min-width: 400px)"
|
||||
def="(min-width: 500px)"
|
||||
ghi="(min-width: 600px)">
|
||||
|
||||
<div flex>A</div>
|
||||
|
||||
<div flex>B</div>
|
||||
|
||||
<div flex>C</div>
|
||||
|
||||
<div flex>D</div>
|
||||
|
||||
</layout>
|
||||
@@ -30,7 +30,6 @@
|
||||
"components/form/form",
|
||||
"components/form/label",
|
||||
"components/form/input",
|
||||
"components/layout/layout",
|
||||
"components/list/list",
|
||||
"components/modal/modal",
|
||||
"components/nav-bar/nav-bar",
|
||||
|
||||
Reference in New Issue
Block a user