vue-material/dist/docs/rating-bar.1729e0fe.js

webpackJsonp([8,37],{820:function(a,t,e){function n(a){e(919)}var r=e(1)(e(850),e(959),n,null,null);a.exports=r.exports},850:function(a,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{rating1:3.5,rating2:6,rating3:7*.2,rating4:5.88,rating5:7*.7,rating6:3.5,rating7:4.5,rating8:4.5,rating9:5*.18,rating10:2.25,rating11:4.1,rating12:2.5,rating13:3.5,rating14:2}}},a.exports=t.default},887:function(a,t,e){t=a.exports=e(795)(),t.push([a.i,".fa{font-size:19px!important;line-height:1.3em!important;padding-left:.1em}.fa.md-size-2x{font-size:38px!important}.fa.md-size-3x{font-size:57px!important}.fa.md-size-4x{font-size:76px!important}.fa.md-size-5x{font-size:95px!important}i[class*=ion-]{padding-left:.1em}",""])},919:function(a,t,e){var n=e(887);"string"==typeof n&&(n=[[a.i,n,""]]),n.locals&&(a.exports=n.locals);e(796)("3dbcfe4b",n,!0)},959:function(a,t){a.exports={render:function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("page-content",{attrs:{"page-title":"Components - Rating Bar"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[a._v("Rating Bar can be used to show a rating to user or capture a rating from user.")]),a._v(" "),e("p",[a._v("The following classes can be applied to change the color palette:")]),a._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[a._v("md-primary")])]),a._v(" "),e("li",[e("code",[a._v("md-accent")])]),a._v(" "),e("li",[e("code",[a._v("md-warn")])])])]),a._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-rating-bar"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[a._v("Name")]),a._v(" "),e("md-table-head",[a._v("Type")]),a._v(" "),e("md-table-head",[a._v("Description")])],1)],1),a._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[a._v("v-model")]),a._v(" "),e("md-table-cell",[e("code",[a._v("Number")])]),a._v(" "),e("md-table-cell",[a._v("A required model object to bind the value. The value is limited by range [0, "),e("code",[a._v("md-max-rating")]),a._v("].")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-max-rating")]),a._v(" "),e("md-table-cell",[e("code",[a._v("Number")])]),a._v(" "),e("md-table-cell",[a._v("Max rating allowed. Default "),e("code",[a._v("5")]),a._v(".")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-full-icon")]),a._v(" "),e("md-table-cell",[e("code",[a._v("String")])]),a._v(" "),e("md-table-cell",[a._v("The icon used to represent full star. Can be a material icon from google font or src of the image file (svg or png). Default "),e("code",[a._v("star")]),a._v(".")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-empty-icon")]),a._v(" "),e("md-table-cell",[e("code",[a._v("String")])]),a._v(" "),e("md-table-cell",[a._v("The icon used to represent empty star. Can be a material icon from google font or src of the image file (svg or png). Default "),e("code",[a._v("star")]),a._v(".")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-full-iconset")]),a._v(" "),e("md-table-cell",[e("code",[a._v("String")])]),a._v(" "),e("md-table-cell",[a._v("The font icon set used on full star. Example: "),e("code",[a._v('md-iconset="fa fa-heart"')]),a._v(" for font awesome.")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-empty-iconset")]),a._v(" "),e("md-table-cell",[e("code",[a._v("String")])]),a._v(" "),e("md-table-cell",[a._v("The font icon set used on empty star. Example: "),e("code",[a._v('md-iconset="fa fa-heart-o"')]),a._v(" for font awesome.")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("md-icon-size")]),a._v(" "),e("md-table-cell",[e("code",[a._v("Number")])]),a._v(" "),e("md-table-cell",[a._v("Change the icon size. From 1 to 5, it corresponds the 1x to 5x of the md-size-{type} class in md-icon, where in 1x, the icon has "),e("code",[a._v("24px")]),a._v(". Default "),e("code",[a._v("1")]),a._v(".")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("disabled")]),a._v(" "),e("md-table-cell",[e("code",[a._v("Boolean")])]),a._v(" "),e("md-table-cell",[a._v("Disable the rating and prevent his actions. Default "),e("code",[a._v("false")])])],1)],1)],1),a._v(" "),e("md-table",{slot:"events"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[a._v("Name")]),a._v(" "),e("md-table-head",[a._v("Value")]),a._v(" "),e("md-table-head",[a._v("Description")])],1)],1),a._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[a._v("change")]),a._v(" "),e("md-table-cell",[a._v("Receive the new rating")]),a._v(" "),e("md-table-cell",[a._v("Triggered when the rating changes his value by user interaction.")])],1),a._v(" "),e("md-table-row",[e("md-table-cell",[a._v("hover")]),a._v(" "),e("md-table-cell",[a._v("Receive the pointer rating")]),a._v(" "),e("md-table-cell",[a._v("Triggered when the user points over a new rating.")])],1)],1)],1)],1)],1),a._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{slot:"demo"},[e("md-rating-bar",{attrs:{disabled:""},model:{value:a.rating1,callback:function(t){a.rating1=t},expression:"rating1"}}),a._v(" "),e("md-rating-bar",{attrs:{"md-max-rating":10,disabled:""},model:{value:a.rating2,callback:function(t){a.rating2=t},expression:"rating2"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-max-rating":7,disabled:""},model:{value:a.rating3,callback:function(t){a.rating3=t},expression:"rating3"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-accent",attrs:{"md-max-rating":7,disabled:""},model:{value:a.rating4,callback:function(t){a.rating4=t},expression:"rating4"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-warn",attrs:{"md-max-rating":7,disabled:""},model:{value:a.rating5,callback:function(t){a.rating5=t},expression:"rating5"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-max-rating":7,"md-empty-icon":"star_border"},model:{value:a.rating6,callback:function(t){a.rating6=t},expression:"rating6"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-warn",attrs:{"md-max-rating":5,"md-empty-icon":"panorama_fish_eye","md-full-icon":"lens"},model:{value:a.rating7,callback:function(t){a.rating7=t},expression:"rating7"}})],1),a._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[a._v('\n            <md-rating-bar v-model="rating1" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating2" :md-max-rating="10" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating3" :md-max-rating="7" class="md-primary" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating4" :md-max-rating="7" class="md-accent" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating5" :md-max-rating="7" class="md-warn" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating6" :md-max-rating="7" class="md-primary" :md-empty-icon="\'star_border\'"></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating7" :md-max-rating="5" class="md-warn" :md-empty-icon="\'panorama_fish_eye\'" :md-full-icon="\'lens\'"></md-rating-bar>\n          ')])],1)]),a._v(" "),e("example-box",{attrs:{"card-title":"Themes"}},[e("div",{slot:"demo"},[e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-theme":"orange",disabled:""},model:{value:a.rating8,callback:function(t){a.rating8=t},expression:"rating8"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-theme":"brown",disabled:""},model:{value:a.rating9,callback:function(t){a.rating9=t},expression:"rating9"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-theme":"light-blue"},model:{value:a.rating10,callback:function(t){a.rating10=t},expression:"rating10"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-theme":"teal","md-empty-icon":"star_border"},model:{value:a.rating11,callback:function(t){a.rating11=t},expression:"rating11"}})],1),a._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[a._v('\n            <md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-empty-icon="\'star_border\'"></md-rating-bar>\n          ')])],1)]),a._v(" "),e("example-box",{attrs:{"card-title":"Sizes"}},[e("div",{slot:"demo"},[e("md-rating-bar",{model:{value:a.rating12,callback:function(t){a.rating12=t},expression:"rating12"}}),a._v(" "),e("md-rating-bar",{attrs:{"md-icon-size":2},model:{value:a.rating12,callback:function(t){a.rating12=t},expression:"rating12"}}),a._v(" "),e("md-rating-bar",{attrs:{"md-icon-size":3},model:{value:a.rating12,callback:function(t){a.rating12=t},expression:"rating12"}})],1),a._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[a._v('\n            <md-rating-bar v-model="rating12" ></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating12" :md-icon-size="2" ></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating12" :md-icon-size="3" ></md-rating-bar>\n          ')])],1)]),a._v(" "),e("example-box",{attrs:{"card-title":"Images"}},[e("div",{slot:"demo"},[e("md-layout",{attrs:{"md-gutter":!0}},[e("md-layout",[e("strong",{staticClass:"md-body-2"},[a._v("SVG:")]),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-empty-icon":"assets/icon-home.svg","md-full-icon":"assets/icon-home.svg"},model:{value:a.rating13,callback:function(t){a.rating13=t},expression:"rating13"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-empty-icon":"assets/icon-home.svg","md-full-icon":"assets/icon-home.svg","md-icon-size":2},model:{value:a.rating13,callback:function(t){a.rating13=t},expression:"rating13"}})],1),a._v(" "),e("md-layout",[e("strong",{staticClass:"md-body-2"},[a._v("PNG:")]),a._v(" "),e("md-rating-bar",{attrs:{"md-empty-icon":"assets/icon-home-back.png","md-full-icon":"assets/icon-home-front.png"},model:{value:a.rating13,callback:function(t){a.rating13=t},expression:"rating13"}}),a._v(" "),e("md-rating-bar",{attrs:{"md-empty-icon":"assets/icon-home-back.png","md-full-icon":"assets/icon-home-front.png","md-icon-size":2},model:{value:a.rating13,callback:function(t){a.rating13=t},expression:"rating13"}})],1)],1)],1),a._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[a._v('\n            <md-layout :md-gutter="true">'),e("br"),a._v("\n              <md-layout>"),e("br"),a._v('\n                <strong class="md-body-2">SVG:</strong>'),e("br"),a._v('\n                <md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="\'assets/icon-home.svg\'" :md-full-icon="\'assets/icon-home.svg\'"></md-rating-bar>'),e("br"),a._v('\n                <md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="\'assets/icon-home.svg\'" :md-full-icon="\'assets/icon-home.svg\'" :md-icon-size="2"></md-rating-bar>'),e("br"),a._v("\n              </md-layout>"),e("br"),a._v(" "),e("br"),a._v("\n              <md-layout>"),e("br"),a._v('\n                <strong class="md-body-2">PNG:</strong>'),e("br"),a._v('\n                <md-rating-bar v-model="rating13" :md-empty-icon="\'assets/icon-home-back.png\'" :md-full-icon="\'assets/icon-home-front.png\'"></md-rating-bar>'),e("br"),a._v('\n                <md-rating-bar v-model="rating13" :md-empty-icon="\'assets/icon-home-back.png\'" :md-full-icon="\'assets/icon-home-front.png\'" :md-icon-size="2"></md-rating-bar>'),e("br"),a._v("\n              </md-layout>"),e("br"),a._v("\n            </md-layout>\n          ")])],1)]),a._v(" "),e("example-box",{attrs:{"card-title":"Font Icons"}},[e("div",{slot:"demo"},[e("link",{attrs:{rel:"stylesheet",href:"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"}}),a._v(" "),e("div",[a._v("This first example uses "),e("a",{attrs:{href:"http://fontawesome.io/icons/",target:"fa_icons"}},[a._v("Font Awesome Icons")])]),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-empty-iconset":"fa fa-bell-o","md-full-iconset":"fa fa-bell"},model:{value:a.rating14,callback:function(t){a.rating14=t},expression:"rating14"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-warn",attrs:{"md-icon-size":2,"md-empty-iconset":"fa fa-heart-o","md-full-iconset":"fa fa-heart"},model:{value:a.rating14,callback:function(t){a.rating14=t},expression:"rating14"}}),a._v(" "),e("hr"),a._v(" "),e("link",{attrs:{rel:"stylesheet",href:"https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"}}),a._v(" "),e("div",[a._v("This second example uses "),e("a",{attrs:{href:"http://ionicons.com/",target:"ion_icons"}},[a._v("Ion Icons")])]),a._v(" "),e("md-rating-bar",{staticClass:"md-primary",attrs:{"md-empty-iconset":"ion-ios-bell-outline","md-full-iconset":"ion-ios-bell"},model:{value:a.rating14,callback:function(t){a.rating14=t},expression:"rating14"}}),a._v(" "),e("md-rating-bar",{staticClass:"md-warn",attrs:{"md-icon-size":2,"md-empty-iconset":"ion-android-favorite-outline","md-full-iconset":"ion-android-favorite"},model:{value:a.rating14,callback:function(t){a.rating14=t},expression:"rating14"}})],1),a._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[a._v('\n            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>'),e("br"),a._v('\n            <div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div>'),e("br"),a._v('\n            <md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="\'fa fa-bell-o\'" :md-full-iconset="\'fa fa-bell\'"></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating14" class="md-warn" :md-icon-size="2" :md-empty-iconset="\'fa fa-heart-o\'" :md-full-iconset="\'fa fa-heart\'"></md-rating-bar>'),e("br"),a._v('\n            <style type="text/css"><!-- offset fix to awesome icons-->'),e("br"),a._v("\n              .fa {"),e("br"),a._v("\n                font-size: 19px !important;"),e("br"),a._v("\n                line-height: 1.3em !important;"),e("br"),a._v("\n                padding-left: 0.1em;"),e("br"),a._v("\n              }"),e("br"),a._v("\n              .fa.md-size-2x {"),e("br"),a._v("\n                font-size: 38px !important;"),e("br"),a._v("\n              }"),e("br"),a._v(" "),e("br"),a._v("\n              .fa.md-size-3x {"),e("br"),a._v("\n                font-size: 57px !important;"),e("br"),a._v("\n              }"),e("br"),a._v(" "),e("br"),a._v("\n              .fa.md-size-4x {"),e("br"),a._v("\n                font-size: 76px !important;"),e("br"),a._v("\n              }"),e("br"),a._v(" "),e("br"),a._v("\n              .fa.md-size-5x {"),e("br"),a._v("\n                font-size: 95px !important;"),e("br"),a._v("\n              }"),e("br"),a._v("\n            </style>"),e("br"),a._v("\n            <hr/>"),e("br"),a._v('\n            <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>'),e("br"),a._v('\n            <div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div>'),e("br"),a._v('\n            <md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="\'ion-ios-bell-outline\'" :md-full-iconset="\'ion-ios-bell\'"></md-rating-bar>'),e("br"),a._v('\n            <md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-empty-iconset="\'ion-android-favorite-outline\'" :md-full-iconset="\'ion-android-favorite\'"></md-rating-bar>'),e("br"),a._v('\n            <style type="text/css"> <!-- offset fix to ion icons-->'),e("br"),a._v('\n              i[class*="ion-"]{'),e("br"),a._v("\n                padding-left: 0.1em;"),e("br"),a._v("\n              }"),e("br"),a._v("\n            </style>\n          ")])],1)])],1)])],1)},staticRenderFns:[]}}});