Components.Badges.
商店
企业版
生态系统
支持
介绍
入门指南
定制
样式和动画
UI 组件
API explorer(API 概览)
Browse components(浏览组件)
Alerts(提示框)
Application(应用程序)
Aspect ratios(长宽比)
Avatars(头像)
Badges(徽章)
Banners(横幅)
Bars(栏)
Bottom navigation(底部导航栏)
Bottom sheets(底部表单)
Breadcrumbs(面包屑导航)
Buttons(按钮)
Buttons: Floating action buttons(按钮:浮动按钮)
Calendars(日历)
Cards(卡片)
Carousels(轮播)
Chips(纸片)
Dialogs(对话框)
Dividers(分隔线)
Expansion panels(扩展面板)
Footer(页脚)
Form inputs & controls(表单和控制)
Grids(栅格)
Groups(组)
Hover(悬停)
Icons(图标)
Images(图像)
Lazy(懒加载)
Lists(列表)
Menus(菜单)
Navigation drawers(导航抽屉)
Overlays(遮罩层)
Paginations(分页)
Parallax(视差)
Pickers(选择器)
Progress(进度条)
Ratings(评分)
Sheets(延展纸)
Skeleton Loaders(骨架装载器)
Snackbars(消息条)
Sparklines(迷你图表)
Steppers(步骤条)
Subheaders(副标题)
Tables(表格)
Tabs(选项卡)
Timelines(时间线)
Tooltips(提示)
Treeview(树形视图)
Virtual scrollers
Directives(指令)
专业支持
付费主题
Vue 工作
v-badge 组件的上标或下标是一个类似头像的图标或文本,用于向用户突出显示信息或将注意力吸引到特定元素上。徽章内的内容通常包含数字或图标。
v-badge
最简单形式的徽章显示在它包装的内容的右上角,并且需要徽章插槽。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
去掉了 badge 插槽中使用 v-avatar 的徽章边距。
v-avatar
当使用 dot 属性时,默认情况下会在徽章上应用一个 2px 和它的周围应用一个 1.5px 的边框。
将组件向底部对齐。
将指定的颜色应用于控件 - 它可以是 material color 的名称(例如 success 或者 purple)或 css 颜色 (#033 或 rgba(255, 0, 0, 0.5))。 你可以在 colors page 中找到内置类的列表。
success
purple
#033
rgba(255, 0, 0, 0.5)
任何你想要的内容都可以作为文字注入到徽章中。
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
缩小徽章的尺寸并隐藏其内容
指定徽章中使用的具体图标。
移动徽章,使其与包装元素保持一致。支持使用 left prop。
用于徽章的 aria-label
将组件向左边对齐。
为组件设置浅色主题。
设置转换模式(不应用于转换组)。你可以在 Vue 文档浏览更多 for transition modes。
将徽章在 x 轴上偏移。
将徽章在 y 轴上偏移。
设置元素上的动画原点。您可以在 MDN 文档上浏览更多 for transition origin
与组件顶部的开槽内容重叠。
删除组件的 border-radius。
设置组件转换。可以是一个 built in transitions 或者是自己自定义的。
控制组件可见还是隐藏。
用于标记内容的插槽。
默认Vue 插槽。
10px !default;
2px !default;
map-get($shades, 'white') !default;
4.5px;
1.5px !default;
9px !default;
$body-font-family !default;
12px !default;
20px !default;
0 -2px !default;
4px 6px !default;
0 !default;
1 !default;
auto !default;
0 4px !default;
下面是一些简单到复杂的例子。
徽章有助于以各种方式向用户传递信息。
你可以用可见性控制做很多事情,例如,在鼠标悬停时显示徽章。
你可以将徽章与动态内容合并,以创建通知系统之类的东西。
v-badge 组件是灵活的,可以在各种使用场景中使用,并可以在众多元素上使用。还可以通过 offset-x 和 offset-y props 来调整位置。
想要了解更多?继续阅读:
在此页面上