forked from fanruan/fineui
Zhenfei.Li
2 years ago
39 changed files with 1190 additions and 895 deletions
@ -1,6 +1,9 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
|
||||
/** |
||||
* 横向填满布局 |
||||
*/ |
||||
BI.HorizontalFillLayout = function () { |
||||
}; |
||||
BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); |
||||
@shortcut() |
||||
export class HorizontalFillLayout { |
||||
static xtype = "bi.horizontal_fill"; |
||||
} |
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
|
||||
/** |
||||
* 纵向填满布局 |
||||
*/ |
||||
BI.VerticalFillLayout = function () { |
||||
}; |
||||
BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout); |
||||
@shortcut() |
||||
export class VerticalFillLayout { |
||||
static xtype = "bi.vertical_fill"; |
||||
} |
||||
|
||||
@ -0,0 +1,4 @@
|
||||
export { AutoVerticalTapeLayout } from "./auto.vtape"; |
||||
export { HorizontalFillLayout } from "./fill.horizontal"; |
||||
export { VerticalFillLayout } from "./fill.vertical"; |
||||
export { FloatHorizontalFillLayout } from "./float.fill.horizontal"; |
||||
@ -0,0 +1,7 @@
|
||||
export { FlexCenterLayout } from "./flex.center"; |
||||
export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center"; |
||||
export { FlexHorizontalLayout } from "./flex.horizontal"; |
||||
export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center"; |
||||
export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center"; |
||||
export { FlexVerticalLayout } from "./flex.vertical"; |
||||
export * from "./wrapper"; |
||||
@ -0,0 +1,5 @@
|
||||
export { FlexWrapperCenterLayout } from "./flex.wrapper.center"; |
||||
export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center"; |
||||
export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal"; |
||||
export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center"; |
||||
export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical"; |
||||
@ -1,36 +1,42 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { extend, isFunction } from "@/core/2.base"; |
||||
import { Layout } from "../../layout"; |
||||
|
||||
/** |
||||
* absolute实现的居中布局 |
||||
* @class BI.FloatAbsoluteCenterLayout |
||||
* @extends BI.Layout |
||||
* @class FloatAbsoluteCenterLayout |
||||
* @extends Layout |
||||
*/ |
||||
BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { |
||||
@shortcut() |
||||
export class FloatAbsoluteCenterLayout extends Layout { |
||||
static xtype = "bi.absolute_center_float"; |
||||
|
||||
props() { |
||||
return extend(super.props(...arguments), { |
||||
baseCls: "bi-abs-c-fl", |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
render: function () { |
||||
BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { |
||||
self.populate(newValue); |
||||
render() { |
||||
super.render(...arguments); |
||||
const o = this.options; |
||||
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { |
||||
this.populate(newValue); |
||||
}) : o.items; |
||||
this.populate(items); |
||||
}, |
||||
} |
||||
|
||||
_addElement: function (i, item) { |
||||
var o = this.options; |
||||
var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); |
||||
_addElement(i, item) { |
||||
const w = super._addElement(...arguments); |
||||
w.element.addClass("bi-abs-c-item").css({ |
||||
position: "absolute", |
||||
}); |
||||
|
||||
return w; |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); |
||||
populate(items) { |
||||
super.populate(...arguments); |
||||
this._mount(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout); |
||||
} |
||||
|
||||
@ -0,0 +1,5 @@
|
||||
export { FloatAbsoluteCenterLayout } from "./float.absolute.center"; |
||||
export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal"; |
||||
export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical"; |
||||
export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical"; |
||||
export { FloatHorizontalLayout } from "./float.horizontal"; |
||||
@ -0,0 +1,4 @@
|
||||
export { CenterLayout } from "./middle.center"; |
||||
export { FloatCenterLayout } from "./middle.float.center"; |
||||
export { HorizontalCenterLayout } from "./middle.horizontal"; |
||||
export { VerticalCenterLayout } from "./middle.vertical"; |
||||
@ -1,72 +1,80 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { extend, each } from "@/core/2.base"; |
||||
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||
import { Layout } from "../../layout"; |
||||
|
||||
/** |
||||
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
||||
* @class BI.CenterLayout |
||||
* @extends BI.Layout |
||||
* @class CenterLayout |
||||
* @extends Layout |
||||
*/ |
||||
BI.CenterLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), { |
||||
@shortcut() |
||||
export class CenterLayout extends Layout { |
||||
static xtype = "bi.center"; |
||||
|
||||
props() { |
||||
return extend(super.props(...arguments), { |
||||
baseCls: "bi-center", |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
bgap: 0, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
render: function () { |
||||
BI.CenterLayout.superclass.render.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
var list = [], items = o.items; |
||||
BI.each(items, function (i) { |
||||
render() { |
||||
super.render(...arguments); |
||||
const o = this.options; |
||||
const list = [], items = o.items; |
||||
each(items, i => { |
||||
list.push({ |
||||
column: i, |
||||
row: 0, |
||||
el: BI._lazyCreateWidget({ |
||||
el: _lazyCreateWidget({ |
||||
type: "bi.default", |
||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
||||
}) |
||||
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||
}), |
||||
}); |
||||
}); |
||||
BI.each(items, function (i, item) { |
||||
each(items, (i, item) => { |
||||
if (item) { |
||||
var w = BI._lazyCreateWidget(item); |
||||
const w = _lazyCreateWidget(item); |
||||
w.element.css({ |
||||
position: "absolute", |
||||
left: self._optimiseGap(o.hgap + o.lgap), |
||||
right: self._optimiseGap(o.hgap + o.rgap), |
||||
top: self._optimiseGap(o.vgap + o.tgap), |
||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
||||
left: this._optimiseGap(o.hgap + o.lgap), |
||||
right: this._optimiseGap(o.hgap + o.rgap), |
||||
top: this._optimiseGap(o.vgap + o.tgap), |
||||
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||
width: "auto", |
||||
height: "auto" |
||||
height: "auto", |
||||
}); |
||||
list[i].el.addItem(w); |
||||
} |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.grid", |
||||
ref: function (_ref) { |
||||
self.layout = _ref; |
||||
ref: _ref => { |
||||
this.layout = _ref; |
||||
}, |
||||
columns: list.length, |
||||
rows: 1, |
||||
items: list |
||||
items: list, |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
resize: function () { |
||||
resize() { |
||||
// console.log("center布局不需要resize");
|
||||
}, |
||||
} |
||||
|
||||
addItem: function (item) { |
||||
addItem(item) { |
||||
// do nothing
|
||||
throw new Error("不能添加子组件"); |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
this.layout.populate.apply(this.layout, arguments); |
||||
populate(items) { |
||||
this.layout.populate(...arguments); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.center", BI.CenterLayout); |
||||
} |
||||
|
||||
@ -1,71 +1,80 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { extend, each } from "@/core/2.base"; |
||||
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||
import { Layout } from "../../layout"; |
||||
|
||||
/** |
||||
* 浮动布局实现的居中容器 |
||||
* @class BI.FloatCenterLayout |
||||
* @extends BI.Layout |
||||
* @class FloatCenterLayout |
||||
* @extends Layout |
||||
*/ |
||||
BI.FloatCenterLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), { |
||||
@shortcut() |
||||
export class FloatCenterLayout extends Layout { |
||||
static xtype = "bi.float_center"; |
||||
|
||||
props() { |
||||
return extend(super.props(...arguments), { |
||||
baseCls: "bi-float-center", |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
bgap: 0, |
||||
}); |
||||
}, |
||||
render: function () { |
||||
BI.FloatCenterLayout.superclass.render.apply(this, arguments); |
||||
var self = this, o = this.options, items = o.items; |
||||
var list = [], width = 100 / items.length; |
||||
BI.each(items, function (i) { |
||||
var widget = BI._lazyCreateWidget({ |
||||
type: "bi.default" |
||||
} |
||||
|
||||
render() { |
||||
super.render(...arguments); |
||||
const o = this.options, items = o.items; |
||||
const list = [], width = 100 / items.length; |
||||
each(items, i => { |
||||
const widget = _lazyCreateWidget({ |
||||
type: "bi.default", |
||||
}); |
||||
widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({ |
||||
width: width + "%", |
||||
height: "100%" |
||||
widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({ |
||||
width: `${width}%`, |
||||
height: "100%", |
||||
}); |
||||
list.push({ |
||||
el: widget |
||||
el: widget, |
||||
}); |
||||
}); |
||||
BI.each(items, function (i, item) { |
||||
each(items, (i, item) => { |
||||
if (item) { |
||||
var w = BI._lazyCreateWidget(item); |
||||
const w = _lazyCreateWidget(item); |
||||
w.element.css({ |
||||
position: "absolute", |
||||
left: self._optimiseGap(o.hgap + o.lgap), |
||||
right: self._optimiseGap(o.hgap + o.rgap), |
||||
top: self._optimiseGap(o.vgap + o.tgap), |
||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
||||
left: this._optimiseGap(o.hgap + o.lgap), |
||||
right: this._optimiseGap(o.hgap + o.rgap), |
||||
top: this._optimiseGap(o.vgap + o.tgap), |
||||
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||
width: "auto", |
||||
height: "auto" |
||||
height: "auto", |
||||
}); |
||||
list[i].el.addItem(w); |
||||
} |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
ref: function (_ref) { |
||||
self.layout = _ref; |
||||
ref: _ref => { |
||||
this.layout = _ref; |
||||
}, |
||||
items: list |
||||
items: list, |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
resize: function () { |
||||
resize() { |
||||
// console.log("floatcenter布局不需要resize");
|
||||
}, |
||||
} |
||||
|
||||
addItem: function (item) { |
||||
addItem(item) { |
||||
// do nothing
|
||||
throw new Error("不能添加子组件"); |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
this.layout.populate.apply(this.layout, arguments); |
||||
populate(items) { |
||||
this.layout.populate(...arguments); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.float_center", BI.FloatCenterLayout); |
||||
} |
||||
|
||||
@ -1,70 +1,79 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { extend, each } from "@/core/2.base"; |
||||
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||
import { Layout } from "../../layout"; |
||||
|
||||
/** |
||||
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
||||
* @class BI.HorizontalCenterLayout |
||||
* @extends BI.Layout |
||||
* @class HorizontalCenterLayout |
||||
* @extends Layout |
||||
*/ |
||||
BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), { |
||||
@shortcut() |
||||
export class HorizontalCenterLayout extends Layout { |
||||
static xtype = "bi.horizontal_center"; |
||||
|
||||
props() { |
||||
return extend(super.props(...arguments), { |
||||
baseCls: "bi-h-center", |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
bgap: 0, |
||||
}); |
||||
}, |
||||
render: function () { |
||||
BI.HorizontalCenterLayout.superclass.render.apply(this, arguments); |
||||
var self = this, o = this.options, items = o.items; |
||||
var list = []; |
||||
BI.each(items, function (i) { |
||||
} |
||||
|
||||
render() { |
||||
super.render(...arguments); |
||||
const o = this.options, items = o.items; |
||||
const list = []; |
||||
each(items, i => { |
||||
list.push({ |
||||
column: i, |
||||
row: 0, |
||||
el: BI._lazyCreateWidget({ |
||||
el: _lazyCreateWidget({ |
||||
type: "bi.default", |
||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
||||
}) |
||||
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||
}), |
||||
}); |
||||
}); |
||||
BI.each(items, function (i, item) { |
||||
each(items, (i, item) => { |
||||
if (item) { |
||||
var w = BI._lazyCreateWidget(item); |
||||
const w = _lazyCreateWidget(item); |
||||
w.element.css({ |
||||
position: "absolute", |
||||
left: self._optimiseGap(o.hgap + o.lgap), |
||||
right: self._optimiseGap(o.hgap + o.rgap), |
||||
top: self._optimiseGap(o.vgap + o.tgap), |
||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
||||
width: "auto" |
||||
left: this._optimiseGap(o.hgap + o.lgap), |
||||
right: this._optimiseGap(o.hgap + o.rgap), |
||||
top: this._optimiseGap(o.vgap + o.tgap), |
||||
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||
width: "auto", |
||||
}); |
||||
list[i].el.addItem(w); |
||||
} |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.grid", |
||||
ref: function (_ref) { |
||||
self.layout = _ref; |
||||
ref: _ref => { |
||||
this.layout = _ref; |
||||
}, |
||||
columns: list.length, |
||||
rows: 1, |
||||
items: list |
||||
items: list, |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
resize: function () { |
||||
resize() { |
||||
// console.log("horizontal_center布局不需要resize");
|
||||
}, |
||||
} |
||||
|
||||
addItem: function (item) { |
||||
addItem(item) { |
||||
// do nothing
|
||||
throw new Error("不能添加子组件"); |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
this.layout.populate.apply(this.layout, arguments); |
||||
populate(items) { |
||||
this.layout.populate(...arguments); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout); |
||||
} |
||||
|
||||
@ -1,71 +1,79 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { extend, each } from "@/core/2.base"; |
||||
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||
import { Layout } from "../../layout"; |
||||
|
||||
/** |
||||
* 垂直方向都居中容器, 非自适应，用于高度不固定的面板 |
||||
* @class BI.VerticalCenterLayout |
||||
* @extends BI.Layout |
||||
* @class VerticalCenterLayout |
||||
* @extends Layout |
||||
*/ |
||||
BI.VerticalCenterLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), { |
||||
@shortcut() |
||||
export class VerticalCenterLayout extends Layout { |
||||
static xtype = "bi.vertical_center"; |
||||
|
||||
props() { |
||||
return extend(super.props(...arguments), { |
||||
baseCls: "bi-v-center", |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
bgap: 0, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
render: function () { |
||||
BI.VerticalCenterLayout.superclass.render.apply(this, arguments); |
||||
var self = this, o = this.options, items = o.items; |
||||
var list = []; |
||||
BI.each(items, function (i) { |
||||
render() { |
||||
super.render(...arguments); |
||||
const self = this, o = this.options, items = o.items; |
||||
const list = []; |
||||
each(items, i => { |
||||
list.push({ |
||||
column: 0, |
||||
row: i, |
||||
el: BI._lazyCreateWidget({ |
||||
el: _lazyCreateWidget({ |
||||
type: "bi.default", |
||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
||||
}) |
||||
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||
}), |
||||
}); |
||||
}); |
||||
BI.each(items, function (i, item) { |
||||
each(items, (i, item) => { |
||||
if (item) { |
||||
var w = BI._lazyCreateWidget(item); |
||||
const w = _lazyCreateWidget(item); |
||||
w.element.css({ |
||||
position: "absolute", |
||||
left: self._optimiseGap(o.hgap + o.lgap), |
||||
right: self._optimiseGap(o.hgap + o.rgap), |
||||
top: self._optimiseGap(o.vgap + o.tgap), |
||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
||||
height: "auto" |
||||
height: "auto", |
||||
}); |
||||
list[i].el.addItem(w); |
||||
} |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.grid", |
||||
ref: function (_ref) { |
||||
self.layout = _ref; |
||||
ref: _ref => { |
||||
this.layout = _ref; |
||||
}, |
||||
columns: 1, |
||||
rows: list.length, |
||||
items: list |
||||
items: list, |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
resize: function () { |
||||
resize() { |
||||
// console.log("vertical_center布局不需要resize");
|
||||
}, |
||||
} |
||||
|
||||
addItem: function (item) { |
||||
addItem(item) { |
||||
// do nothing
|
||||
throw new Error("不能添加子组件"); |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
this.layout.populate.apply(this.layout, arguments); |
||||
populate(items) { |
||||
this.layout.populate(...arguments); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout); |
||||
} |
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal"; |
||||
export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal"; |
||||
export { ResponsiveInlineLayout } from "./responsive.inline"; |
||||
@ -1,57 +1,59 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { each } from "@/core/2.base"; |
||||
import { HorizontalAlign } from "@/core/constant"; |
||||
import { Resizers } from "@/base"; |
||||
import { FlexHorizontalLayout } from "../flex"; |
||||
|
||||
/** |
||||
* 横向响应式布局 |
||||
* Created by GUY on 2016/12/2. |
||||
* |
||||
* @class BI.ResponsiveFlexHorizontalLayout |
||||
* @extends BI.FlexHorizontalLayout |
||||
* @class ResponsiveFlexHorizontalLayout |
||||
* @extends FlexHorizontalLayout |
||||
*/ |
||||
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { |
||||
// props: function () {
|
||||
// return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
|
||||
// // extraCls: "bi-responsive-f-h"
|
||||
// });
|
||||
// },
|
||||
@shortcut() |
||||
export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout { |
||||
static xtype = "bi.responsive_flex_horizontal"; |
||||
|
||||
mounted: function () { |
||||
var self = this, o = this.options; |
||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
||||
mounted() { |
||||
const o = this.options; |
||||
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||
return; |
||||
} |
||||
var defaultResize = function () { |
||||
const defaultResize = () => { |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth <= 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
self._handleReverseGap(child, o.items[i], i | 0); |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
this._handleReverseGap(child, o.items[i], i | 0); |
||||
}); |
||||
self.element.css("flex-direction", "column"); |
||||
} |
||||
this.element.css("flex-direction", "column"); |
||||
} |
||||
} |
||||
} |
||||
var resize = function () { |
||||
}; |
||||
const resize = () => { |
||||
defaultResize(); |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth > 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
}) |
||||
self.resize(); |
||||
self.element.css("flex-direction", "row"); |
||||
} |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
}); |
||||
this.resize(); |
||||
this.element.css("flex-direction", "row"); |
||||
} |
||||
} |
||||
} |
||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
||||
}; |
||||
this.unResize = Resizers.add(this.getName(), resize); |
||||
defaultResize(); |
||||
}, |
||||
} |
||||
|
||||
destroyed: function () { |
||||
destroyed() { |
||||
this.unResize?.(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); |
||||
} |
||||
|
||||
@ -1,59 +1,61 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { each } from "@/core/2.base"; |
||||
import { HorizontalAlign } from "@/core/constant"; |
||||
import { Resizers } from "@/base"; |
||||
import { FlexWrapperHorizontalLayout } from "../flex"; |
||||
|
||||
/** |
||||
* 横向响应式布局 |
||||
* Created by GUY on 2016/12/2. |
||||
* |
||||
* @class BI.ResponsiveFlexWrapperHorizontalLayout |
||||
* @extends BI.FlexWrapperHorizontalLayout |
||||
* @class ResponsiveFlexWrapperHorizontalLayout |
||||
* @extends FlexWrapperHorizontalLayout |
||||
*/ |
||||
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { |
||||
// props: function () {
|
||||
// return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
|
||||
// extraCls: "bi-responsive-f-h"
|
||||
// });
|
||||
// },
|
||||
@shortcut() |
||||
export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout { |
||||
static xtype = "bi.responsive_flex_scrollable_horizontal"; |
||||
|
||||
mounted: function () { |
||||
var self = this, o = this.options; |
||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
||||
mounted() { |
||||
const o = this.options; |
||||
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||
return; |
||||
} |
||||
var defaultResize = function () { |
||||
const defaultResize = () => { |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth <= 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
self._handleReverseGap(child, o.items[i], i | 0); |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
this._handleReverseGap(child, o.items[i], i | 0); |
||||
}); |
||||
self.element.css("flex-direction", "column"); |
||||
self.$wrapper.element.css("flex-direction", "column"); |
||||
} |
||||
this.element.css("flex-direction", "column"); |
||||
this.$wrapper.element.css("flex-direction", "column"); |
||||
} |
||||
} |
||||
} |
||||
var resize = function () { |
||||
}; |
||||
const resize = () => { |
||||
defaultResize(); |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth > 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
}) |
||||
self.resize(); |
||||
self.element.css("flex-direction", "row"); |
||||
self.$wrapper.element.css("flex-direction", "row"); |
||||
} |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
}); |
||||
this.resize(); |
||||
this.element.css("flex-direction", "row"); |
||||
this.$wrapper.element.css("flex-direction", "row"); |
||||
} |
||||
} |
||||
} |
||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
||||
}; |
||||
this.unResize = Resizers.add(this.getName(), resize); |
||||
defaultResize(); |
||||
}, |
||||
} |
||||
|
||||
destroyed: function () { |
||||
destroyed() { |
||||
this.unResize(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); |
||||
} |
||||
|
||||
@ -1,50 +0,0 @@
|
||||
/** |
||||
* 横向响应式布局 |
||||
* Created by GUY on 2016/12/2. |
||||
* |
||||
* @class BI.ResponsiveInlineLayout |
||||
* @extends BI.InlineLayout |
||||
*/ |
||||
BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { |
||||
mounted: function () { |
||||
var self = this, o = this.options; |
||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
||||
return; |
||||
} |
||||
var defaultResize = function () { |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
if (clientWidth <= 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
self._handleReverseGap(child, o.items[i], i | 0); |
||||
child.elemenet.css("display", ""); |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
var resize = function () { |
||||
defaultResize(); |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
var clientWidth = document.body.clientWidth; |
||||
if(self.element.width() > 2/3 * clientWidth){ |
||||
if (clientWidth > 768) { |
||||
BI.each(self._children, function (i, child) { |
||||
self._clearGap(child); |
||||
}) |
||||
self.resize(); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
||||
defaultResize(); |
||||
}, |
||||
|
||||
destroyed: function () { |
||||
this.unResize(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); |
||||
@ -0,0 +1,58 @@
|
||||
import { shortcut } from "@/core/decorator"; |
||||
import { each } from "@/core/2.base"; |
||||
import { HorizontalAlign } from "@/core/constant"; |
||||
import { Resizers } from "@/base"; |
||||
import { InlineLayout } from "../layout.inline"; |
||||
|
||||
/** |
||||
* 横向响应式布局 |
||||
* Created by GUY on 2016/12/2. |
||||
* |
||||
* @class ResponsiveInlineLayout |
||||
* @extends InlineLayout |
||||
*/ |
||||
@shortcut() |
||||
export class ResponsiveInlineLayout extends InlineLayout { |
||||
static xtype = "bi.responsive_inline"; |
||||
|
||||
mounted() { |
||||
const o = this.options; |
||||
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||
return; |
||||
} |
||||
const defaultResize = () => { |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth <= 768) { |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
this._handleReverseGap(child, o.items[i], i | 0); |
||||
child.element.css("display", ""); |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
const resize = () => { |
||||
defaultResize(); |
||||
if (o.scrollable !== true && o.scrollx !== true) { |
||||
const clientWidth = document.body.clientWidth; |
||||
if (this.element.width() > 2 / 3 * clientWidth) { |
||||
if (clientWidth > 768) { |
||||
each(this._children, (i, child) => { |
||||
this._clearGap(child); |
||||
}); |
||||
this.resize(); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
this.unResize = Resizers.add(this.getName(), resize); |
||||
defaultResize(); |
||||
} |
||||
|
||||
destroyed() { |
||||
this.unResize(); |
||||
} |
||||
} |
||||
@ -0,0 +1,2 @@
|
||||
export { HorizontalStickyLayout } from "./sticky.horizontal"; |
||||
export { VerticalStickyLayout } from "./sticky.vertical"; |
||||
Loading…
Reference in new issue