|
|
|
@ -5,8 +5,14 @@ |
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/> |
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/> |
|
|
|
<script src="../dist/2.0/fineui.js"></script> --> |
|
|
|
<script src="../dist/2.0/fineui.js"></script> --> |
|
|
|
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> |
|
|
|
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> |
|
|
|
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script> |
|
|
|
<!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script> --> |
|
|
|
|
|
|
|
<script src="http://localhost:9001/fineui.js"></script> |
|
|
|
</head> |
|
|
|
</head> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
.my-parent { |
|
|
|
|
|
|
|
--css-scale: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<body> |
|
|
|
<body> |
|
|
|
<div id="wrapper"></div> |
|
|
|
<div id="wrapper"></div> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
@ -14,7 +20,8 @@ |
|
|
|
var Model = BI.inherit(BI.Model, { |
|
|
|
var Model = BI.inherit(BI.Model, { |
|
|
|
state: function () { |
|
|
|
state: function () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
expand: false |
|
|
|
expand: false, |
|
|
|
|
|
|
|
cssScale: 2.0 |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
childContext: ["text"], |
|
|
|
childContext: ["text"], |
|
|
|
@ -33,6 +40,18 @@ |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.model("demo.model", Model); |
|
|
|
BI.model("demo.model", Model); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var oldFormat = BI.pixFormat; |
|
|
|
|
|
|
|
BI.pixFormat = function (pix, border) { |
|
|
|
|
|
|
|
var context = BI.useContext("cssScale"); |
|
|
|
|
|
|
|
if (!context) { |
|
|
|
|
|
|
|
return oldFormat.apply(this, arguments); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!BI.isNumber(pix)) { |
|
|
|
|
|
|
|
return pix; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return `calc(var(--css-scale) * ${pix}px - ${border || 0}})`; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var Child = BI.inherit(BI.Widget, { |
|
|
|
var Child = BI.inherit(BI.Widget, { |
|
|
|
render: function () { |
|
|
|
render: function () { |
|
|
|
var label; |
|
|
|
var label; |
|
|
|
@ -45,6 +64,7 @@ |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.label", |
|
|
|
type: "bi.label", |
|
|
|
|
|
|
|
height: 30, |
|
|
|
ref: function (_ref) { |
|
|
|
ref: function (_ref) { |
|
|
|
label = _ref; |
|
|
|
label = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -60,6 +80,9 @@ |
|
|
|
BI.shortcut("demo.child", Child); |
|
|
|
BI.shortcut("demo.child", Child); |
|
|
|
|
|
|
|
|
|
|
|
var Widget = BI.inherit(BI.Widget, { |
|
|
|
var Widget = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
props: { |
|
|
|
|
|
|
|
baseCls: "my-parent" |
|
|
|
|
|
|
|
}, |
|
|
|
_store: function () { |
|
|
|
_store: function () { |
|
|
|
return BI.Models.getModel("demo.model"); |
|
|
|
return BI.Models.getModel("demo.model"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -67,6 +90,7 @@ |
|
|
|
var child; |
|
|
|
var child; |
|
|
|
var store = BI.useStore(); |
|
|
|
var store = BI.useStore(); |
|
|
|
return function () { |
|
|
|
return function () { |
|
|
|
|
|
|
|
this.element[0].style.setProperty('--css-scale', store.model.cssScale); |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.vertical", |
|
|
|
type: "bi.vertical", |
|
|
|
vgap: 20, |
|
|
|
vgap: 20, |
|
|
|
|
guy
2 years ago