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 () { |
@shortcut() |
||||||
}; |
export class HorizontalFillLayout { |
||||||
BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); |
static xtype = "bi.horizontal_fill"; |
||||||
|
} |
||||||
|
|||||||
@ -1,6 +1,9 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 纵向填满布局 |
* 纵向填满布局 |
||||||
*/ |
*/ |
||||||
BI.VerticalFillLayout = function () { |
@shortcut() |
||||||
}; |
export class VerticalFillLayout { |
||||||
BI.shortcut("bi.vertical_fill", BI.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实现的居中布局 |
* absolute实现的居中布局 |
||||||
* @class BI.FloatAbsoluteCenterLayout |
* @class FloatAbsoluteCenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class FloatAbsoluteCenterLayout extends Layout { |
||||||
return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.absolute_center_float"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-abs-c-fl", |
baseCls: "bi-abs-c-fl", |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); |
super.render(...arguments); |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { |
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { |
||||||
self.populate(newValue); |
this.populate(newValue); |
||||||
}) : o.items; |
}) : o.items; |
||||||
this.populate(items); |
this.populate(items); |
||||||
}, |
} |
||||||
|
|
||||||
_addElement: function (i, item) { |
_addElement(i, item) { |
||||||
var o = this.options; |
const w = super._addElement(...arguments); |
||||||
var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); |
|
||||||
w.element.addClass("bi-abs-c-item").css({ |
w.element.addClass("bi-abs-c-item").css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
}); |
}); |
||||||
|
|
||||||
return w; |
return w; |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); |
super.populate(...arguments); |
||||||
this._mount(); |
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"; |
||||||
@ -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. |
* Created by GUY on 2016/12/2. |
||||||
* |
* |
||||||
* @class BI.ResponsiveFlexHorizontalLayout |
* @class ResponsiveFlexHorizontalLayout |
||||||
* @extends BI.FlexHorizontalLayout |
* @extends FlexHorizontalLayout |
||||||
*/ |
*/ |
||||||
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { |
@shortcut() |
||||||
// props: function () {
|
export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout { |
||||||
// return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
|
static xtype = "bi.responsive_flex_horizontal"; |
||||||
// // extraCls: "bi-responsive-f-h"
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||||
return; |
return; |
||||||
} |
} |
||||||
var defaultResize = function () { |
const defaultResize = () => { |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth <= 768) { |
if (clientWidth <= 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
self._handleReverseGap(child, o.items[i], i | 0); |
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(); |
defaultResize(); |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth > 768) { |
if (clientWidth > 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
}) |
}); |
||||||
self.resize(); |
this.resize(); |
||||||
self.element.css("flex-direction", "row"); |
this.element.css("flex-direction", "row"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
}; |
||||||
|
this.unResize = Resizers.add(this.getName(), resize); |
||||||
defaultResize(); |
defaultResize(); |
||||||
}, |
} |
||||||
|
|
||||||
destroyed: function () { |
destroyed() { |
||||||
this.unResize?.(); |
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. |
* Created by GUY on 2016/12/2. |
||||||
* |
* |
||||||
* @class BI.ResponsiveFlexWrapperHorizontalLayout |
* @class ResponsiveFlexWrapperHorizontalLayout |
||||||
* @extends BI.FlexWrapperHorizontalLayout |
* @extends FlexWrapperHorizontalLayout |
||||||
*/ |
*/ |
||||||
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { |
@shortcut() |
||||||
// props: function () {
|
export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout { |
||||||
// return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
|
static xtype = "bi.responsive_flex_scrollable_horizontal"; |
||||||
// extraCls: "bi-responsive-f-h"
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||||
return; |
return; |
||||||
} |
} |
||||||
var defaultResize = function () { |
const defaultResize = () => { |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth <= 768) { |
if (clientWidth <= 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
self._handleReverseGap(child, o.items[i], i | 0); |
this._handleReverseGap(child, o.items[i], i | 0); |
||||||
}); |
}); |
||||||
self.element.css("flex-direction", "column"); |
this.element.css("flex-direction", "column"); |
||||||
self.$wrapper.element.css("flex-direction", "column"); |
this.$wrapper.element.css("flex-direction", "column"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
var resize = function () { |
}; |
||||||
|
const resize = () => { |
||||||
defaultResize(); |
defaultResize(); |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth > 768) { |
if (clientWidth > 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
}) |
}); |
||||||
self.resize(); |
this.resize(); |
||||||
self.element.css("flex-direction", "row"); |
this.element.css("flex-direction", "row"); |
||||||
self.$wrapper.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(); |
defaultResize(); |
||||||
}, |
} |
||||||
|
|
||||||
destroyed: function () { |
destroyed() { |
||||||
this.unResize(); |
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