mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-03-16 22:10:27 +00:00
1 line
No EOL
15 KiB
JavaScript
1 line
No EOL
15 KiB
JavaScript
webpackJsonp([30,34],{488:function(e,t,i){var a=i(0)(null,i(574),null,null);e.exports=a.exports},574: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)],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("<md-tab>")]),e._v(" in a "),i("code",[e._v("<md-tabs>")]),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-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 his 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","md-tooltip":"This is the pictures tab!"}},[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 <md-tabs>\n <md-tab id="movies" md-label="Movies">\n <p>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.</p>\n </md-tab>\n\n <md-tab id="music" md-label="Music">\n <p>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.</p>\n <p>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.</p>\n </md-tab>\n\n <md-tab id="books" md-label="Books">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n\n <md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n </md-tabs>\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 <md-tabs md-fixed>\n <md-tab id="movies" md-label="Movies">\n <p>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.</p>\n </md-tab>\n\n <md-tab id="music" md-label="Music">\n <p>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.</p>\n <p>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.</p>\n </md-tab>\n\n <md-tab id="books" md-label="Books">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n\n <md-tab id="pictures" md-label="Pictures">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n </md-tabs>\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 <md-tabs md-centered>\n <md-tab md-label="Movies" md-icon="ondemand_video">\n <p>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.</p>\n </md-tab>\n\n <md-tab md-label="Music" md-icon="music_note">\n <p>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.</p>\n <p>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.</p>\n </md-tab>\n\n <md-tab md-label="Books" md-icon="books">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n\n <md-tab md-label="Pictures" md-icon="photo">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n </md-tabs>\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 <md-tabs md-right>\n <md-tab md-icon="phone">\n <p>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.</p>\n </md-tab>\n\n <md-tab md-icon="favorite">\n <p>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.</p>\n <p>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.</p>\n </md-tab>\n\n <md-tab md-icon="near_me">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>\n </md-tab>\n </md-tabs>\n ')])],1)])],1)])],1)},staticRenderFns:[]}}}); |