i-rubik
Version:
A Vue.js 2.0+ UI Components Framework
1 lines • 5.17 kB
JavaScript
webpackJsonp([21,29],{228:function(e,a,n){n(312);var r=n(0)(n(254),n(336),"data-v-6241d19e",null);e.exports=r.exports},254:function(e,a,n){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={name:"badge"}},289:function(e,a,n){a=e.exports=n(59)(),a.push([e.i,"h3[data-v-6241d19e]{margin-bottom:1rem}.badge-demo[data-v-6241d19e],.badge-icons[data-v-6241d19e]{display:inline-block;margin:0 20px;text-align:center}.badge-demo[data-v-6241d19e]{width:42px;height:42px;background:#eee;border-radius:6px}","",{version:3,sources:["/./example/views/Badge.vue"],names:[],mappings:"AACA,oBACE,kBAAoB,CACrB,AAMD,2DAJE,qBAAsB,AACtB,cAAe,AACf,iBAAmB,CAUpB,AARD,6BAEE,WAAY,AACZ,YAAa,AAEb,gBAAiB,AACjB,iBAAmB,CAEpB",file:"Badge.vue",sourcesContent:["\nh3[data-v-6241d19e] {\n margin-bottom: 1rem;\n}\n.badge-icons[data-v-6241d19e] {\n display: inline-block;\n margin: 0 20px;\n text-align: center;\n}\n.badge-demo[data-v-6241d19e] {\n display: inline-block;\n width: 42px;\n height: 42px;\n margin: 0 20px;\n background: #eee;\n border-radius: 6px;\n text-align: center;\n}"],sourceRoot:"webpack://"}])},312:function(e,a,n){var r=n(289);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(226)("7e20b932",r,!0)},336:function(e,a){e.exports={render:function(){var e=this,a=e.$createElement,n=e._self._c||a;return n("article",[n("h1",[e._v("徽标 Badge")]),e._v(" "),n("h2",[e._v("例子")]),e._v(" "),n("p",[e._v("\n 所有徽标默认显示在右边\n ")]),e._v(" "),n("h3",[e._v("放在图标上")]),e._v(" "),n("r-icon",{directives:[{name:"badge",rawName:"v-badge:10.inner",arg:"10",modifiers:{inner:!0}}],staticClass:"badge-icons red-after",attrs:{large:""}},[e._v("call")]),e._v(" "),n("r-icon",{directives:[{name:"badge",rawName:"v-badge:star.inner.icon",arg:"star",modifiers:{inner:!0,icon:!0}}],staticClass:"badge-icons",attrs:{large:""}},[e._v("face")]),e._v(" "),n("r-icon",{directives:[{name:"badge",rawName:"v-badge:navigation.inner.icon.left",arg:"navigation",modifiers:{inner:!0,icon:!0,left:!0}}],staticClass:"badge-icons green-after",attrs:{large:""}},[e._v("camera")]),e._v(" "),n("h3",[e._v("放在普通元素上")]),e._v(" "),n("p",[e._v("数字")]),e._v(" "),n("span",{directives:[{name:"badge",rawName:"v-badge:55.left",arg:"55",modifiers:{left:!0}}],staticClass:"badge-demo"}),e._v(" "),n("span",{directives:[{name:"badge",rawName:"v-badge:20.inner.right",arg:"20",modifiers:{inner:!0,right:!0}}],staticClass:"badge-demo pink-after"}),e._v(" "),n("p",[e._v("小圆点")]),e._v(" "),n("span",{directives:[{name:"badge",rawName:"v-badge:dot",arg:"dot"}],staticClass:"badge-demo red-after"}),e._v(" "),n("span",{directives:[{name:"badge",rawName:"v-badge:dot.left",arg:"dot",modifiers:{left:!0}}],staticClass:"badge-demo orange-after"}),e._v(" "),n("h3",[e._v("放在链接/文字上")]),e._v(" "),n("a",{directives:[{name:"badge",rawName:"v-badge:dot",arg:"dot"}],staticClass:"badge-link red-after"},[e._v("This is a link")]),e._v(" "),n("br"),e._v(" "),n("span",{directives:[{name:"badge",rawName:"v-badge:dot.left",arg:"dot",modifiers:{left:!0}}],staticClass:"badge-link orange-after"},[e._v("This is text")]),e._v(" "),n("h2",[e._v("API")]),e._v(" "),n("h3",[e._v("参数")]),e._v(" "),e._m(0),e._v(" "),n("h3",[e._v("指令说明")]),e._v(" "),e._m(1),e._v(" "),n("Markup",{attrs:{lang:"html"}},[e._v('\n <r-icon class="red-after" large v-badge:10.inner>call</r-icon>\n <r-icon large v-badge:star.inner.icon>face</r-icon>\n <span class="badge-demo" v-badge:star.icon.left></span>\n <a class="badge-link red-after" v-badge:dot>This is a link</a>\n ')])],1)},staticRenderFns:[function(){var e=this,a=e.$createElement,n=e._self._c||a;return n("p",[e._v("\n 添加了 v-badge 指令的元素可以添加颜色 class: '[color]-after' (color 为色值) "),n("br"),e._v("\n PS: 因为徽标存在于伪类 after 上，所以用 [color]-after 调整颜色 \n ")])},function(){var e=this,a=e.$createElement,n=e._self._c||a;return n("table",{staticClass:"bordered responsive-table"},[n("thead",[n("th",[e._v("指令")]),e._v(" "),n("th",[e._v("说明")])]),e._v(" "),n("tbody",[n("tr",[n("td",[e._v("v-badge:star.inner.icon "),n("br"),e._v(" 指令的参数 arg")]),e._v(" "),n("td",[e._v("\n 指令的参数 arg (即 star) 对应 徽标显示的内容"),n("br"),e._v("\n 如果徽标是 icon，则指令的 arg 为 icon-font 对应的值\n ")])]),e._v(" "),n("tr",[n("td",[e._v("v-badge:navigation.inner.icon.left "),n("br"),e._v(" 指令的 modifiers ")]),e._v(" "),n("td",[e._v("\n inner: 徽标显示在元素内 "),n("br"),e._v("\n icon: 徽标是否为 icon "),n("br"),e._v(" \n left: 徽标显示位置\n ")])]),e._v(" "),n("tr",[n("td",[e._v("v-badge:55.left "),n("br"),e._v(" 指令的参数 arg ")]),e._v(" "),n("td",[e._v("\n 此指令的 arg 为 55，徽标显示为纯数字 55\n ")])]),e._v(" "),n("tr",[n("td",[e._v("v-badge:dot "),n("br"),e._v(" 指令的参数 arg ")]),e._v(" "),n("td",[e._v("\n 此指令的 arg 为 dot，徽标显示为一个点 (可做提示用)\n ")])])])])}]}}});