javascript - EnyoJS TopBottom Arranger -
I am working on an enyo application where on one page I have a top bottle arranger, which is swipe on the next panel Should be changed on .
The problem is facing, the panels are not taking full screen height and when I am on a particular panel, I can see some segments of the previous panel. I'm getting rid of it and a panel capturing the entire screen.
Here is a BELD example.
(make sure to type "top bottom arrangeer" in the dropdown on the top left corner)
The code is like this
Enyo.kind ({name: "enyo.sample.MyGridArranger", kind: "GridArranger", colHeight: "150", colWidth: "150"}); Enyo.kind ({name: "enyo.sample.PanelsSample", kind: "FittableRows", classes: "enyo-fit", component: [{kind: "fittable columns", any breed: true, classes: " Oyeix-toolbar oynex toggle-inline ", component: [{type:" scroller ", thumb: wrong, fit: right, touch: right, vertical:" hidden ", style:" margin: 0; ", component: [ {Class: "Onyx.MenuDecorator", component: [[Content: "Arranger"}, {name: "Ernie Picture"}, "{class: oinix-toolbar-inline", style: "white-space: aboper; ", Type:" Onyx.menu ", maxHeight: 360, floating: true, on Select: "next", ontap: "prevPanel"}, {kind: "onyx", "content": "next", ontop: "type"; ontx: Next type "", {type: "onyx.input", value: 0, onchange: "gotoPanel"}}, {type: "onyx.InputDecorator", style: "width: 60px;", component: [ : "Onxx.button", content: "go" ontap: "gotoPanel"}, {type: "onyx.button", content: "add", ontap: "addpanel"}, {kind: "onyx.button" Content: "Delete", OnTap: "RemovedApplications"}]}] []: {{Content: 0, Style: "Panels", "Panels", Name: "Sample Pans", Fit: True, True Time Fit: True , Classes: "panel-sample- Panels- enyo-border-box "" background: red; "}, {content: 1, style:" background: orange; "}, {content: 2, style:" background: yellow; "}, {content: 3 , Style: "Background: green; "}, {Content: 4, style:" background: blue; "}, {Content: 5, Style:" Background: Indigo; "}, {Content: 6, style:" background: violet; "Name:" CardSlideInArranger "}, {Name:" CarouselArranger ", arrangerKind:" CarouselArranger "," CardArranger ", [name:" CardArranger ", arrangerKind:" CardArranger "}, {name:" CardSlideInArranger ", arrangerKind: Classes: "panel-sampling width"}, {name: "CollapsingArranger", arrangerKind: "CollapsingArranger", classes: "Panel sample-collapse"}, {name: "LeftRightArranger", arrangerKind: "LeftRightArranger"}, {name : "TopBottomArranger", Arrangerand: "Topbottom Arranger", Classes: "Panel-Sample-Top Bottom"}, {Name: "Spiral Arranger", Anger Kend: "Spiral Arranger", Category: "Panel-SM Example Spiral"}, {Name: "GridArranger", arrangerKind: "enyo.sample.MyGridArrange Range ":" Columns-Sampled-Compressed "}, BG Color: [" Red "," Orange "," Yellow "," green "," blue "," indigo "," violet "], create: function () {this.inherited (argument); for (var i = 0; i & lt; this.panelArrangers.length ; I ++) {This. $ ArrangerPicker.createComponent ({content: this.panelArrangers [i] .name}); } This.panelCount = this. $ SamplePanels.getPanels () Length; }, Sung: function () {this.inherited (argument); }, Annexe selected: function (in-sender, event) {var sp = this. $ SamplePanels; Var p = this.panelArrangers [inEvent.originator.indexInContainer () - 1]; If (this.currentClass) {sp.removeClass (this.currentClass); } If (P classes) {sp.addClass (P. Classes); This.currentClass = p.classes; } Sp.setArrangerKind (p.arrangerKind); If (enyo.Panels.isScreenNarrow ()) {this.setIndex (1); }}, // Panelsplatzpell: function () {this. $ SamplePanels.previous (); .. The $ input.setValue (. $ $ SamplePanels.index.); }, NextPanel: function () {this. $ SamplePanels.next (); .. The $ input.setValue (. $ $ SamplePanels.index.); }, Goto fanel: function () {this. $ SamplePanels.setIndex (this. $ .Input.getValue ()); }, Panelcount: 0, adepenel: function () {var sp = this. $ SamplePanels; Var i = this.panelCount ++; Var p = sp.createComponent ({style: "background:" + this.bgcolors [i% this.bgcolors.length], content: i}); P.render (); Sp.reflow (); Sp.setIndex (i); }, DeletePanel: function () {var p = this. $ SamplePanels.getActive (); If (p) {p.destroy (); }}}); TIA
margins < The property of Code> TopBottomArranger should be set to 0 instead of 40, which is inherited from the LeftRightArranger . I have added a custom customer that applies at the end of the arranged list in Belal:
Comments
Post a Comment