npm:silver-button

README

是什么

TV端button组件

如何使用

通过tnpm引入模块

npm install silver-button --save

const SilverButton = require('silver-button')

全局提供对象window.tvcnpt.SilverButton

组件内部HTML展示

initView(style, data) {
  let node = document.createElement('div')
  node.className = 'silver-button'
  node.setAttribute('fe-role', 'Widget')
  return node
}
renderView(node, style, data) {
  node.innerHTML = '<div class="button-block">' +
      '<p class="button-text">' + '&nbsp;&nbsp;&nbsp;&nbsp;'+(data.text || '')+'&nbsp;&nbsp;&nbsp;&nbsp;' + '</p>' +
      (data.HTML || '')
    '</div>'
}

使用实例

var btn = new SilverButton({
  target: DOM,      // 必传，目标节点
  data: {           // data参数上面可以自定义一些自己需要的数据，this.getViewData()中可以获取data参数
    text: '',       // 选传，btn文案
    HTML: ''        // 选传，自定义btn内部html
  },
  width: 291,       // 选传，宽度，不传文字去撑
  height: 134,      // 选传，高度，不传文字去撑
  top: 200,         // 选传，定位top
  left: 0,          // 选传，定位left
  zIndex: 1,        // 选传，定位z-index
  outlineColor: 'transparent',  // 选传，外边框颜色
  inlineColor: 'transparent',   // 选传，内边框颜色
  outlineColorFocus: '#fff',    // 选传，外边框focus颜色
  inlineColorFocus: 'blue',     // 选传，内边框focus颜色
  outlineWidth: 4,              // 选传，外边框宽度
  inlineWidth: 1,               // 选传，内边框宽度
  radius: 30,                   // 选传，圆角
  fontSize: 50,                 // 选传，btn文案font-size
  fontColor: 'blue',            // 选传，btn文案颜色
  bgImg: '',                    // 选传，btn背景图
  bgImgFocus: '',               // 选传，btn focus背景图
  showText: true                // 选传，是否显示文案，默认true
})

api接口

destroy() 删除组件

  btn.destroy()
  
  // return undefined

Usage no npm install needed!

README

是什么

如何使用