MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
Avatar 头像Badge 徽标BottomAppBar 底部应用栏Button 按钮ButtonIcon 图标按钮Card 卡片Checkbox 复选框Chip 纸片CircularProgress 圆形进度指示器Collapse 折叠面板Dialog 对话框Divider 分割线Dropdown 下拉组件Fab 浮动操作按钮Icon 图标Layout 布局LinearProgress 线性进度指示器List 列表Menu 菜单NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏Radio 单选框RangeSlider 范围滑块Select 选择框SegmentedButton 分段按钮Slider 滑块Snackbar 消息条Switch 开关切换Tabs 选项卡TextField 文本框Tooltip 工具提示TopAppBar 顶部应用栏
工具函数
独立包

Badge 徽标

徽标用于展示动态信息,如计数或状态指示。它可以包含文字或数字。

使用方法

按需导入组件:

import 'mdui/components/badge.js';

按需导入组件的 TypeScript 类型:

import type { Badge } from 'mdui/components/badge.js';

使用示例:

12
<mdui-badge>12</mdui-badge>

示例

形状

使用 variant 属性来设置徽标的形状。当 variantlarge 时,将显示大型徽标。你可以在 default slot 中指定要显示的文本。

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
variantvariant'small' | 'large''large'

徽标的形状。可选值包括:

  • small:小型徽标,不显示文本
  • large:大型徽标,会显示文本

Slots

名称
默认

徽标中显示的文本

CSS 自定义属性

名称
--shape-corner

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

本页目录