xp-fab

floating action button group
553
Install
npm install xp-fab
Latest Version:0.2.6
License:MIT
Last Updated:Jan 4, 2017
Links: GitHub  ·  npm
Maintainer: donfo

getting started

fab是个vue组件

安装

npm install --save xp-fab

引用

import FloatButtons from 'xp-fab'

使用

<float-buttons :links="fabLinks"></float-buttons>
fabLinks: [
          {
            'url': null,
            'bgcolor': 'red',
            'icon': '<svg> | <icon>',   // 直接使用字符目前支持不好
            'width': '40px',
            'height': '40px',
            'iconSize': '30px',
            'right': 15,
            'bottom': 15
          },
          {
            'url': '#/moments/user/001228',
            'bgcolor': 'orange',
            'title': '很长的发生的结果卡机',
            'icon': '+'
          },
          {
            'url': '#/member',
            'bgcolor': 'yellow',
            'icon': '+'
          },
          {
            'url': '#/member',
            'bgcolor': 'yellow',
            'icon': '+'
          },
          {
            'url': '#/member',
            'bgcolor': 'yellow',
            'icon': '+'
          }
        ]

caveat

  • right/bottom设定初始位置时,只能使用数字类型

more

remark

  • 图标(icon)使用了非安全的{{{}}}解析,当其用户可配时要考虑XSS攻击

release

  • 0.2.1 添加可拖动特性
  • 0.2.5 位置记录相关问题修复

Related Packages

@opentiny/vue-mobile

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as...

1,965 2,267
@json-canvas-viewer/vue

An extensible web-based viewer for JSON Canvas in the form of a Vue component, e...

1,740 86
pckg-app-frontend

Frontend pckg package

5,788 0

Version History

Version Released License
0.2.6 MIT
0.2.5 MIT
0.2.4 MIT
0.2.3 MIT
0.2.2 MIT