Components.ChipGroups.
商店
企业版
生态系统
支持
介绍
入门指南
定制
样式和动画
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(组)
Button groups(按钮组)
Chip groups(纸片组)
Item groups(项目组)
List item groups(列表项目组)
Slide groups(幻灯片组)
Windows(窗口)
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-chip-group 通过提供可添加的功能来添加 v-chip 组件。它用于使用纸片创建选择组。
v-chip-group
v-chip
纸片组使用户可以方便地为更复杂的实现选择过滤选项。默认情况下,v-chip-group 将向右溢出,但可以更改为 column 模式。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
active-class 在子组件(children )被激活时应用。
强制选择的纸片居中
将指定的颜色应用于控件 - 它可以是 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 文档中找到更多有关信息。
为组件设置浅色主题。
强制始终选择一个值(如果可用)。
设置可以选择的最大数量。
允许多个选择。value 属性必须是 _array_。
指定用于下一个图标的图标
指定用于上一个图标的图标
强制显示分页箭头
组件的指定 model 值。
默认Vue 插槽。
当组件值被用户交互改变时发出。
any[] | any
4px 0 !default;
4px 8px 4px 0 !default;
.32 !default;
.22 !default;
下面是一些简单到复杂的例子。
带有 column 属性的纸片组可以包装其纸片。
column
具有 mandatory 属性的纸片组必须始终选择一个值。
mandatory
具有 multiple 属性的纸片组可以选择许多值。
multiple
纸片组允许创建自定义接口,这些接口执行与项组或单选控件相同的操作,但在风格上有所不同。
v-chip 组件可以具有用于其模型的显式值。这将传递给 v-chip-group 组件,在不希望使用纸片索引作为其值时非常有用。
使用 filter 属性轻松创建纸片组,以提供更多反馈。 这创建了一种替代的视觉风格,可以与用户交流选择了纸片的情况。
想要了解更多?继续阅读:
在此页面上