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"; |
||||
@ -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