低代码高性能原生UI框架Badge 角标
组件类型：UxBadgeComponentPublicInstance
支持多种形状、支持圆点、反转显示，可配置超出显示样式
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | primary | 主题颜色 |
| value | Number | 0 | 角标数量 |
| max | Number | 99 | 最大值 |
| overflow | String | 'normal' | 超出显示样式 |
| shape | String | 'normal' | 形状 |
| dot | Boolean | false | 显示圆点 |
| inverted | Boolean | false | 反转色 |
| color | String | $ux.Conf.fontColor | 输入框字体颜色 |
| darkColor | String | - | 深色 |
| background | String | $ux.Conf.backgroundColor | 输入框背景颜色 |
| backgroundDark | String | - | 深色 |
| fixed | Boolean | true | 固定定位 |
| top | Number | 0 | 距上 |
| right | Number | 0 | 距右 |
| left | Number | 0 | 距左 |
| bottom | Number | 0 | 距下 |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
overflow
| 值 | 说明 |
|---|---|
| normal | 正常 |
| format | 格式化 |
shape
| 值 | 说明 |
|---|---|
| normal | 圆角 |
| lt | 左上角 |
| rt | 右上角 |
| rb | 右下角 |
| lb | 左下角 |
| ltrb | 左上右下角 |
| rtlb | 右上左下角 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="角标" :bold="true">
<ux-text text="支持多种形状、支持圆点、反转显示，可配置超出显示样式"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="角标" text="https://www.uxframe.cn/component/display/badge.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-badge :value="6" theme="primary" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="66" :size="16" theme="success" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="666" :size="18" theme="warning" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="666" :size="20" theme="error" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="形状" :bold="true">
<ux-text text="支持多种形状，可配置圆点显示" :mb="15"></ux-text>
<ux-row>
<ux-badge shape="circular" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="lt" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rt" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="lb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="ltrb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rtlb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge :dot="true" :value="15" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="文本格式化" :bold="true">
<ux-text text="支持配置最大值 + 、K、W 三种格式化方式" :mb="15"></ux-text>
<ux-row>
<ux-badge overflow="normal" :value="150" :max="120" :fixed="false" :right="10"></ux-badge>
<ux-badge overflow="format" :value="1500" :fixed="false" :right="10"></ux-badge>
<ux-badge overflow="format" :value="150000" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="颜色反转" :bold="true">
<ux-text text="支持颜色反转，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-badge :inverted="true" :value="15" theme="primary" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="16" theme="success" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="18" theme="warning" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="20" theme="error" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="定位" :bold="true">
<ux-text text="支持相对定位显示在任意位置" :mb="15"></ux-text>
<ux-row>
<ux-image src="/static/logo.png">
<ux-badge :right="2" :top="2" :value="100" theme="warning"></ux-badge>
</ux-image>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="角标" :bold="true">
<ux-text text="支持多种形状、支持圆点、反转显示，可配置超出显示样式"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="角标" text="https://www.uxframe.cn/component/display/badge.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-badge :value="6" theme="primary" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="66" :size="16" theme="success" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="666" :size="18" theme="warning" :fixed="false" :right="10"></ux-badge>
<ux-badge :value="666" :size="20" theme="error" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="形状" :bold="true">
<ux-text text="支持多种形状，可配置圆点显示" :mb="15"></ux-text>
<ux-row>
<ux-badge shape="circular" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="lt" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rt" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="lb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="ltrb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge shape="rtlb" :value="15" :fixed="false" :right="10"></ux-badge>
<ux-badge :dot="true" :value="15" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="文本格式化" :bold="true">
<ux-text text="支持配置最大值 + 、K、W 三种格式化方式" :mb="15"></ux-text>
<ux-row>
<ux-badge overflow="normal" :value="150" :max="120" :fixed="false" :right="10"></ux-badge>
<ux-badge overflow="format" :value="1500" :fixed="false" :right="10"></ux-badge>
<ux-badge overflow="format" :value="150000" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="颜色反转" :bold="true">
<ux-text text="支持颜色反转，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-badge :inverted="true" :value="15" theme="primary" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="16" theme="success" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="18" theme="warning" :fixed="false" :right="10"></ux-badge>
<ux-badge :inverted="true" :value="15" :size="20" theme="error" :fixed="false"></ux-badge>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="定位" :bold="true">
<ux-text text="支持相对定位显示在任意位置" :mb="15"></ux-text>
<ux-row>
<ux-image src="/static/logo.png">
<ux-badge :right="2" :top="2" :value="100" theme="warning"></ux-badge>
</ux-image>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>