amis2/badge.md at d1a4cad4990c91a55b4743f7fb89cd16d28643da

test/amis2

mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 11:07:52 +08:00

* 样式细节调整，通过 gap 可以设置更多间距；radios 和 checkbox 默认 inline

* 统一一下命名

* 改回之前的写法

* 补充漏下的

* 恢复几个之前的大小

* 尝试修复跳转到示例有时候不生效问题

2021-04-08 23:19:23 +08:00

3.7 KiB

Raw Blame History

title	description	type	group	menuName	icon	order
Badge 角标		0	⚙ 组件	Badge		30

基本用法

部分组件可以设置 badge 属性来显示角标，目前只支持头像组件，后续将增加更多组件。

[
  {
    "type": "avatar",
    "badge": {
      "mode": "text",
      "text": 10
    }
  }
]

显示文字或数值

设置 mode 为 text，通过 text 属性来显示文字或数字，数值为零的时候将不显示。

[
  {
    "type": "avatar",
    "badge": {
      "mode": "text",
      "text": 10
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "mode": "text",
      "text": 0
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "mode": "text",
      "text": "new"
    }
  }
]

显示位置

通过 position 来控制角标显示位置，默认 top-right，还可以设置为 top-left、bottom-left、bottom-right。

[
  {
    "type": "avatar",
    "badge": {
      "position": "top-left"
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "position": "bottom-left"
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "position": "bottom-right"
    }
  }
]

动态数字

text 可以取上下文变量。

{
  "data": {
    "myData": 10
  },
  "type": "page",
  "body": [
    {
      "type": "avatar",
      "badge": {
        "mode": "text",
        "visibleOn": "this.myData > 1",
        "text": "${myData}"
      }
    }
  ]
}

动态控制是否显示角标

角标可以直接写表达式来判断是否显示

{
  "data": {
    "myData": 10
  },
  "type": "page",
  "body": [
    {
      "type": "avatar",
      "badge": "this.myData > 1"
    },
    {
      "type": "avatar",
      "className": "m-l",
      "badge": "this.myData > 10"
    }
  ]
}

还可以通过 visibleOn 表达式来动态控制，这样还能设置其他属性

{
  "data": {
    "myData": 10
  },
  "type": "page",
  "body": [
    {
      "type": "avatar",
      "badge": {
        "visibleOn": "this.myData > 1"
      }
    },
    {
      "type": "avatar",
      "className": "m-l",
      "badge": {
        "visibleOn": "this.myData > 10"
      }
    }
  ]
}

设置大小

通过 size 来控制大小

[
  {
    "type": "avatar",
    "badge": {
      "mode": "text",
      "text": 10,
      "size": 20
    }
  },
  {
    "type": "avatar",
    "className": "m-l"，
    "badge": {
      "mode": "text",
      "text": 10,
      "size": 12
    }
  },
  {
    "type": "avatar",
    "className": "m-l"
    "badge": {
      "size": 12
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "size": 4
    }
  }
]

自定义样式

通过 style 来控制展现样式，比如背景及文字的颜色

[
  {
    "type": "avatar",
    "badge": {
      "mode": "text",
      "text": 10,
      "style": {
        "background": "#46C93A"
      }
    }
  },
  {
    "type": "avatar",
    "className": "m-l",
    "badge": {
      "mode": "text",
      "text": 10,
      "style": {
        "background": "#1A5CFF"
      }
    }
  }
]

属性表

属性名	类型	说明
className	`string`	外层 dom 的类名
text	`text`	数字
mode	`string`	角标类型，可以是 dot/text
className	`string`	外层 dom 的类名
style	`object`	角标的自定义样式

3.7 KiB Raw Blame History Unescape Escape