webpackJsonp([17,37],{830:function(e,t,i){function a(e){i(914)}var o=i(1)(null,i(954),a,null,null);e.exports=o.exports},882:function(e,t,i){t=e.exports=i(795)(),t.push([e.i,".label-with-new-badge{font-weight:bolder}.new-badge{background-color:red;color:#fff;padding:3px;border-radius:3px}",""])},914:function(e,t,i){var a=i(882);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);i(796)("590a5d44",a,!0)},954:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("page-content",{attrs:{"page-title":"Components - Tabs"}},[i("docs-component",[i("div",{slot:"description"},[i("p",[e._v("Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.")]),e._v(" "),i("p",[e._v("The following classes can be applied to change the color palette:")]),e._v(" "),i("ul",{staticClass:"md-body-2"},[i("li",[i("code",[e._v("md-accent")])]),e._v(" "),i("li",[i("code",[e._v("md-warn")])]),e._v(" "),i("li",[i("code",[e._v("md-transparent")])])])]),e._v(" "),i("div",{slot:"api"},[i("api-table",{attrs:{name:"md-tabs"}},[i("md-table",{slot:"properties"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[e._v("Name")]),e._v(" "),i("md-table-head",[e._v("Type")]),e._v(" "),i("md-table-head",[e._v("Description")])],1)],1),e._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[e._v("md-fixed")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Make the tabs navigation fixed and elastic filling the whole space. Default "),i("code",[e._v("false")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-centered")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Align the tabs navigation to the center. Default "),i("code",[e._v("false")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-right")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Align the tabs navigation to the right. Default "),i("code",[e._v("false")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-dynamic-height")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Make the tab content to be resized based on the contents. Default "),i("code",[e._v("true")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-elevation")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Number")])]),e._v(" "),i("md-table-cell",[e._v("Add a shadow on the navigation with an whiteframe. Default "),i("code",[e._v("0")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-navigation")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Display the navigation arrows for horizontal scroll. Default "),i("code",[e._v("true")])])],1)],1)],1),e._v(" "),i("md-table",{slot:"slots"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[e._v("Name")]),e._v(" "),i("md-table-head",[e._v("Description")])],1)],1),e._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[e._v("header-item")]),e._v(" "),i("md-table-cell",[e._v("Change the template of the header item. Optional.")])],1)],1)],1),e._v(" "),i("md-table",{slot:"events"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[e._v("Name")]),e._v(" "),i("md-table-head",[e._v("Value")]),e._v(" "),i("md-table-head",[e._v("Description")])],1)],1),e._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[e._v("change")]),e._v(" "),i("md-table-cell",[e._v("Receive the tab index")]),e._v(" "),i("md-table-cell",[e._v("Triggered when a tab is activated.")])],1)],1)],1)],1),e._v(" "),i("api-table",{attrs:{name:"md-tab"}},[i("p",[e._v("You should wrap the "),i("code",[e._v("")]),e._v(" in a "),i("code",[e._v("")]),e._v(" as a direct parent.")]),e._v(" "),i("md-table",{slot:"properties"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[e._v("Name")]),e._v(" "),i("md-table-head",[e._v("Type")]),e._v(" "),i("md-table-head",[e._v("Description")])],1)],1),e._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[e._v("id")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("Unique id to each tab")])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-label")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("The tab text")])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-options")]),e._v(" "),i("md-table-cell",[i("code",[e._v("any")])]),e._v(" "),i("md-table-cell",[e._v("Any additional options (which can be used in "),i("code",[e._v("header-item")]),e._v(" slot of "),i("code",[e._v("md-tabs")]),e._v(")")])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-icon")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("Icon name on the "),i("a",{attrs:{href:"https://material.io/icons/",target:"_blank",rel:"noopener"}},[e._v("Material Icons")]),e._v(" docs.")])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-active")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Activate the tab. Default "),i("code",[e._v("false")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-disabled")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Disable the tab and prevent its actions. Default "),i("code",[e._v("false")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-tooltip")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("Add a tooltip on the tab header. Optional.")])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-tooltip-delay")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("Delay of the tab header tooltip. Default: "),i("code",[e._v("0")])])],1),e._v(" "),i("md-table-row",[i("md-table-cell",[e._v("md-tooltip-direction")]),e._v(" "),i("md-table-cell",[i("code",[e._v("String")])]),e._v(" "),i("md-table-cell",[e._v("Direction of the tab header tooltip. Default: "),i("code",[e._v("bottom")])])],1)],1)],1)],1)],1),e._v(" "),i("div",{slot:"example"},[i("example-box",{attrs:{"card-title":"Default"}},[i("div",{slot:"demo"},[i("md-tabs",{attrs:{"md-dynamic-height":!1}},[i("md-tab",{attrs:{id:"movies","md-label":"Movies"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{id:"music","md-label":"Music"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")]),e._v(" "),i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{id:"books","md-label":"Books"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"pictures","md-label":"Pictures"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"playlists","md-label":"Playlists"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"albums","md-label":"Albums"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"settings","md-label":"Settings"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"account","md-label":"Account"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])])],1)],1),e._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[e._v('\n \n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n
\n ')])],1)]),e._v(" "),i("example-box",{attrs:{"card-title":"Fixed"}},[i("div",{slot:"demo"},[i("md-tabs",{staticClass:"md-accent",attrs:{"md-dynamic-height":!1,"md-fixed":""}},[i("md-tab",{attrs:{id:"movies","md-label":"Movies"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{id:"music","md-label":"Music"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")]),e._v(" "),i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{id:"books","md-label":"Books"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{id:"pictures","md-label":"Pictures"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])])],1)],1),e._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[e._v('\n \n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n
\n ')])],1)]),e._v(" "),i("example-box",{attrs:{"card-title":"Centered with Text and Icon"}},[i("div",{slot:"demo"},[i("md-tabs",{staticClass:"md-warn",attrs:{"md-dynamic-height":!1,"md-centered":""}},[i("md-tab",{attrs:{"md-label":"Movies","md-icon":"ondemand_video"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-label":"Music","md-icon":"music_note"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")]),e._v(" "),i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-label":"Books","md-icon":"books"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])]),e._v(" "),i("md-tab",{attrs:{"md-label":"Pictures","md-icon":"photo"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])])],1)],1),e._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[e._v('\n \n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n
\n ')])],1)]),e._v(" "),i("example-box",{attrs:{"card-title":"Aligned to the right with only icons"}},[i("div",{slot:"demo"},[i("md-tabs",{staticClass:"md-transparent",attrs:{"md-dynamic-height":!1,"md-right":""}},[i("md-tab",{attrs:{"md-icon":"phone"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-icon":"favorite"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")]),e._v(" "),i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-icon":"near_me"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])])],1)],1),e._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[e._v('\n \n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n
\n ')])],1)]),e._v(" "),i("example-box",{attrs:{"card-title":"Header item templating"}},[i("div",{slot:"demo"},[i("md-tabs",{staticClass:"md-transparent",scopedSlots:e._u([{key:"header-item",fn:function(t){return[t.header.icon?i("md-icon",[e._v(e._s(t.header.icon))]):e._e(),e._v(" "),t.header.options&&t.header.options.new_badge?[t.header.label?i("span",{staticClass:"label-with-new-badge"},[e._v("\n "+e._s(t.header.label)+"\n "),i("span",{staticClass:"new-badge"},[e._v(e._s(t.header.options.new_badge))])]):e._e()]:[t.header.label?i("span",[e._v(e._s(t.header.label))]):e._e()]]}}])},[i("md-tab",{attrs:{"md-icon":"phone","md-label":"Phone"}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-icon":"favorite","md-label":"Favorite","md-options":{new_badge:3}}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")]),e._v(" "),i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.")])]),e._v(" "),i("md-tab",{attrs:{"md-icon":"near_me","md-label":"Near me","md-options":{new_badge:1}}},[i("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.")])])],1)],1),e._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[e._v('\n \n \n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.

\n
\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.

\n
\n
\n ')])],1)])],1)])],1)},staticRenderFns:[]}}});