@mas.io/mas-fab NPM

安装

tnpm install --save @alipay/mas-fab

组件介绍

行业小程序悬浮菜单组件，可以悬浮在页面中的四个角落，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

属性	必填	参数类型	参数说明	默认值	示例
pattern	否	object	悬浮菜单展开后的元素样式	{}	-
horizontal	是	string	悬浮按钮水平方向的位置定位	left	(left、right)
vertical	是	string	悬浮按钮垂直方向的位置定位	bottom	(bottom、top)
direction	是	string	悬浮按钮点击后菜单展开的方向	horiontal	(horiontal、vertical)
content	是	array	展开菜单内容配置项	[]	-
show	否	boolean	设置悬浮菜单是否默认展开	false	-
activeIndex	否	number	悬浮菜单条目中目前处于激活状态的index数值	-1	-
autoClose	选填	boolean	点击悬浮按钮菜单条目后，是否自动关闭菜单展示	true	-
onItemTap	选填	Function	点击悬浮按钮菜单条目后的回调函数，activeIndex完全受控于props设置，需要在当前函数中进行组件设置的props更新	-	-

在小程序中使用

{
  "usingComponents": {
    "mas-fab": "@alipay/mas-fab/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <mas-fab
    horizontal="right"
    vertical="bottom"
    activeIndex="{{ activeIndex }}"
    direction="horizontal"
    content="{{ content }}"
    onItemTap="onItemTap"
    pattern="{{ color: '#7A7E83',backgroundColor: '#fff', selectedColor: '#007AFF', buttonColor: '#007AFF' }}"
    content="{{ iconPath: '/images/cart.png', selectedIconPath: '/images/cart_active.png', text: '购物车', }, { iconPath: '/images/home.png', selectedIconPath: '/images/home_active.png', text: '主页', }, { iconPath: '/images/order.png', selectedIconPath: '/images/order_active.png', text: '订单', }}"
    ...
  />

在 page.js 中配置mas-fab组件相关属性

Page({
  data: {
    content: [{
      iconPath: '/images/cart.png', // 未选中时的图片地址
      selectedIconPath: '/images/cart_active.png', // 选中后的
      text: '购物车',
    }]
  },
  onItemTap (e) {
    console.log(e);
  }
});

样式覆盖推荐方式说明

可以通过在外层的view上套一个class来增加内部元素的样式优先级，达到样式覆盖的目的例如

.custom-xxx-container {
  .mas-fab-container {
    .mas-fab {
      width: 700rpx;

      .mas-fab__content {
        height: 100rpx;
      }
    }
  }
}

Badges

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

0.0.2

4 years ago