/home/henzagold/admin_report/js/ Current File: /home/henzagold/admin_report/js/chunk-51c39039.d687df3a.js
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-51c39039"],{"41a7":function(s,e,t){"use strict";t("e4f6")},8983:function(s,e,t){"use strict";t.r(e);var n=function(){var s=this,e=s._self._c;return e("div",{attrs:{id:"vuexy-grid-demo"}},[e("grid-overview"),e("grid-design-concept"),e("grid-column-offset"),e("grid-flex-layout"),e("grid-flex-alignment"),e("grid-flex-order"),e("grid-responsive-layout")],1)},l=[],a=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Overview"}},[e("p",[s._v("Following is a brief look at how it works:")]),e("vx-list",{staticClass:"mt-5",attrs:{list:s.list}})],1)},i=[],r={data:function(){return{list:["Establish a set of column in the horizontal space defined by row (abbreviated col)","Your content elements should be placed directly in the col, and only col should be placed directly in row","The column grid system is a value from 1-12 to represent its range spans. For example, three columns of equal width can be created by .col-4 (33.3%)","If the sum of col spans in a row are more than 12, then the overflowing col as a whole will start a new line arrangement"]}}},v=r,c=t("2877"),o=Object(c["a"])(v,a,i,!1,null,null,null),d=o.exports,p=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Design Concept","code-toggler":""}},[e("p",[s._v("With the directive "),e("code",[s._v("vs-w")]),s._v(" define the width of the column ("),e("code",[s._v("vs-col")]),s._v(") its value is "),e("strong",[s._v("1-12")]),s._v(" an example of sizes would be: "),e("strong",[s._v("12 = 100%, 6 = 50%, 4 = 25%")])]),e("div",{staticClass:"grid-demo__layout-container"},[e("vs-row",[e("vs-col",{staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"12"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("100%")])])],1),e("vs-row",s._l(2,(function(t,n){return e("vs-col",{key:n,staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"6"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("50%")])])})),1),e("vs-row",s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"4"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("33.3%")])])})),1),e("vs-row",s._l(4,(function(t,n){return e("vs-col",{key:n,staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"3"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("25%")])])})),1),e("vs-row",s._l(6,(function(t,n){return e("vs-col",{key:n,staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("16.6%")])])})),1),e("vs-row",s._l(12,(function(t,n){return e("vs-col",{key:n,staticClass:"p-4 sm:p-2",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"1"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("8.3%")])])})),1)],1),e("template",{slot:"codeContainer"})],2)},u=[],f={},_=Object(c["a"])(f,p,u,!1,null,null,null),m=_.exports,y=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Column offset","code-toggler":""}},[e("p",[s._v("To give a distance with respect to the left we have the directive vs-offset that with the same measures 1-12 we add the space specified a serious example "),e("code",[s._v("12 = 100%")]),s._v(", "),e("code",[s._v("6 = 50%")]),s._v(", "),e("code",[s._v("4 = 25%")])]),e("div",{staticClass:"grid-demo__layout-container"},[e("vs-row",{attrs:{"vs-w":"12"}},[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-offset":"5","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"6"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("offset - 6")])])],1),e("vs-row",[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-offset":"0","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("offset - 2")])])],1),e("vs-row",[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-offset":"2","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"8"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("offset - 8")])])],1),e("vs-row",[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-offset":"10","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("offset - 7")])])],1),e("vs-row",[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-offset":"4","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"4"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("offset - 4")])])],1)],1),e("template",{slot:"codeContainer"})],2)},g=[],h={},x=Object(c["a"])(h,y,g,!1,null,null,null),w=x.exports,C=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Flex layout","code-toggler":""}},[e("p",[s._v("If we need to align the elements horizontally, use the "),e("code",[s._v("vs-justify")]),s._v(" directive that uses CSS attributes as parameters: "),e("code",[s._v("flex-start")]),s._v(", "),e("code",[s._v("center")]),s._v(", "),e("code",[s._v("flex-end")]),s._v(", "),e("code",[s._v("space-around")]),s._v(", "),e("code",[s._v("space-between")])]),e("div",{staticClass:"grid-demo__layout-container"},[e("vs-row",{attrs:{"vs-w":"12"}},s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-0 p-4 text-center",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("default")])])})),1),e("vs-row",{attrs:{"vs-type":"flex","vs-justify":"center"}},s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-0 p-4 text-center",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("center")])])})),1),e("vs-row",{attrs:{"vs-type":"flex","vs-justify":"flex-end"}},s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-0 p-4 text-center",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("flex-end")])])})),1),e("vs-row",{attrs:{"vs-type":"flex","vs-justify":"space-around"}},s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-0 p-4 text-center",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("space-around")])])})),1),e("vs-row",{attrs:{"vs-type":"flex","vs-justify":"space-between"}},s._l(3,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-0 p-4 text-center",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("space-between")])])})),1)],1),e("template",{slot:"codeContainer"})],2)},j=[],b={},k=Object(c["a"])(b,C,j,!1,null,null,null),O=k.exports,F=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Flex alignment"}},[e("p",[s._v("To align the elements vertically we have the directive "),e("code",[s._v("vs-align")]),s._v(" that as parameters the same known values of css: "),e("code",[s._v("center")]),s._v(", "),e("code",[s._v("flex-end")]),s._v(", "),e("code",[s._v("flex-start")]),s._v(".")]),e("div",{staticClass:"mt-5"},[e("flex-alignment-top"),e("flex-alignment-center"),e("flex-alignment-bottom")],1)])},A=[],G=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Align Top","code-toggler":"","no-shadow":"","card-border":""}},[e("div",{staticClass:"grid-demo__layout-container--block"},[e("vs-row",{attrs:{"vs-align":"flex-start","vs-type":"flex","vs-justify":"center","vs-w":"12"}},s._l(4,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-2 p-4",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("col - 3")])])})),1)],1),e("template",{slot:"codeContainer"})],2)},T=[],z={},I=Object(c["a"])(z,G,T,!1,null,null,null),B=I.exports,D=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Align Center","code-toggler":"","no-shadow":"","card-border":""}},[e("div",{staticClass:"grid-demo__layout-container--block"},[e("vs-row",{attrs:{"vs-align":"center","vs-type":"flex","vs-justify":"center","vs-w":"12"}},s._l(4,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-2 p-4",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("col - 3")])])})),1)],1),e("template",{slot:"codeContainer"})],2)},J=[],L={},R=Object(c["a"])(L,D,J,!1,null,null,null),S=R.exports,q=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Align Bottom","code-toggler":"","no-shadow":"","card-border":""}},[e("div",{staticClass:"grid-demo__layout-container--block"},[e("vs-row",{attrs:{"vs-align":"flex-end","vs-type":"flex","vs-justify":"center","vs-w":"12"}},s._l(4,(function(t,n){return e("vs-col",{key:n,staticClass:"sm:p-2 p-4",attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"2"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("col - 3")])])})),1)],1),e("template",{slot:"codeContainer"})],2)},E=[],W={},Y=Object(c["a"])(W,q,E,!1,null,null,null),H=Y.exports,K={components:{FlexAlignmentTop:B,FlexAlignmentCenter:S,FlexAlignmentBottom:H}},M=K,N=Object(c["a"])(M,F,A,!1,null,null,null),P=N.exports,Q=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Flex Order","code-toggler":""}},[e("p",[s._v("In some cases, we want to order the elements to our liking. To do this, use the directive "),e("code",[s._v("vs-order")]),s._v(" that has a parameter you just have to pass the number in which we want to order the "),e("code",[s._v("vs-col")]),s._v(" with respect to his brothers "),e("code",[s._v("vs-col")])]),e("div",{staticClass:"grid-demo__layout-container"},[e("vs-row",{attrs:{"vs-type":"flex"}},[e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-order":"3","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"3"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("1 / order ")]),e("span",[s._v("3")])]),e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-order":"1","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"3"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("2 / order ")]),e("span",[s._v("1")])]),e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-order":"4","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"3"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("3 / order ")]),e("span",[s._v("4")])]),e("vs-col",{staticClass:"sm:p-2 p-4",attrs:{"vs-order":"2","vs-type":"flex","vs-justify":"center","vs-align":"center","vs-w":"3"}},[e("span",{staticClass:"sm:inline hidden"},[s._v("4 / order ")]),e("span",[s._v("2")])])],1)],1),e("template",{slot:"codeContainer"})],2)},U=[],V={},X=Object(c["a"])(V,Q,U,!1,null,null,null),Z=X.exports,$=function(){var s=this,e=s._self._c;return e("vx-card",{attrs:{title:"Responsive layout","code-toggler":""}},[e("p",{staticClass:"mb-5"},[s._v("There are some measures that can only be added in a specific size of the device, the directives are:")]),e("vx-list",{attrs:{list:s.list}}),e("div",{staticClass:"grid-demo__layout-container"},[e("vs-row",{attrs:{"vs-w":"12"}},[e("vs-col",{attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-lg":"2","vs-sm":"4","vs-xs":"12"}},[s._v('\n                vs-lg="2" ')]),e("vs-col",{attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-lg":"8","vs-sm":"4","vs-xs":"12"}},[s._v('\n                vs-lg="8" ')]),e("vs-col",{attrs:{"vs-type":"flex","vs-justify":"center","vs-align":"center","vs-lg":"2","vs-sm":"4","vs-xs":"12"}},[s._v('\n                vs-lg="2" ')])],1)],1),e("template",{slot:"codeContainer"})],2)},ss=[],es={data:function(){return{list:["<code>vs-lg</code> : is for large devices such as desktops or laptops (large)","<code>vs-sm</code> : is for medium devices such as laptops or tablets","<code>vs-xs</code> : is for small devices such as tablets (small) and phones"]}}},ts=es,ns=Object(c["a"])(ts,$,ss,!1,null,null,null),ls=ns.exports,as={components:{GridOverview:d,GridDesignConcept:m,GridColumnOffset:w,GridFlexLayout:O,GridFlexAlignment:P,GridFlexOrder:Z,GridResponsiveLayout:ls}},is=as,rs=(t("41a7"),Object(c["a"])(is,n,l,!1,null,null,null));e["default"]=rs.exports},e4f6:function(s,e,t){}}]);
//# sourceMappingURL=chunk-51c39039.d687df3a.js.map