Ribbon 丝带

此组件用于显示丝带图标，通常用于促销活动，品牌标识，节日主题等场景。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

此组件是一个绝对定位，在使用的时候需要外层嵌套一个view容器设置相对定位，并设置高度和宽度。

<template>
    <view class="ribbon-wrap">
        <fu-ribbon></fu-ribbon>
    </view>
</template>

<style lang="scss" scoped>
    .ribbon-wrap {
        width: 200px; 
        height: 300px;
        position: relative;
        border: 1px solid #BBB;
        background: #EEE;
        margin: 30rpx auto;
    }
</style>

设置位置类型

通过 mode 属性设置显示位置，可选值：

• left 左侧显示
• right 右侧显示（默认）

<fu-ribbon mode="left"></fu-ribbon>

自定义样式

• 通过 bgColor 属性设置背景色
• 通过 size 属性设置字体大小
• 通过 color 属性设置字体颜色

<fu-ribbon bgColor="#2979ff" size="20" color="#FFFFFF"></fu-ribbon>

API

Ribbon Props

属性名	说明	类型	默认值	可选值
mode	显示位置类型	String	right	left
bgColor	背景色	String	-	-
size	字体大小	String｜Number	10	-
color	字体颜色	String	-	-