Skip to content

组件

Vuetify 组件是用于创建用户界面的交互式模块。

容器组件 (Containment)

容器组件用于将其它组件囊括起来,并提供额外的一系列功能。它们通常被用于提供统一的布局或设计。

Button component

按钮组件使用户只需轻点一下即进行动作或做出选择。

Card components

卡片组件是功能强大的一片功能块,能为标题、文本、图像和动作提供一个简单的界面

List components

列表组件用于显示多个项目

Chip component

Chips(纸片组件)在需要显示一小片信息时很有帮助

Divider components

Dividers(分隔线)用于将内容分成独立的部分或组

Expansion panel components

Expansion Panel(可扩展面板)能以紧凑的布局显示更多的内容

Menu component

菜单组件用于显示用户可以执行的操作列表

Dialog component

对话框组件向用户通知特定任务,并且可能包含关键信息

Bottom sheet component

对话组件通知用户有关特定任务的信息,并可能包含重要信息

Overlay component

覆盖组件用于显示自定义遮罩层,位于应用程序的顶部

Toolbar components

工具栏用于标注内容区域和/或显示用户可以执行的操作列表

Tooltip component

工具提示在用户悬停于元素上时提供该元素的附加信息

Sheet component

表单组件是一张简单的纸张,可用于设计和自定义内容块


导航式组件 (Navigation)

导航组件用于在不同视图或页面之间进行导航。

App bars

应用栏用于顶级导航项和当前页面操作

FABs

浮动操作按钮用于应用程序中的推荐操作

Navigation drawers

导航抽屉包含主要应用程序导航链接

Pagination component

分页组件用于分隔长数据集

Bottom navigation

底部导航组件用于在移动设备上显示导航链接

Breadcrumbs components

面包屑是路由页面的导航辅助工具

Footer Component

页脚组件是一个简单的导航区域,具有站点内链接

Speed Dials

快速拨号组件是一个浮动操作按钮,当点击时可以显示额外的操作

System Bar

系统栏组件显示应用程序信息,包括图标、时间等

Tabs Components

选项卡用于将内容组织成可以独立查看的不同部分


表单输入和控制组件 (Form inputs and controls)

表单组件用于以各种方式收集用户输入。

Autocomplete Component

自动完成组件用于在用户输入时提供建议

Combobox Components

组合框组件用于从选项列表中选择一个值,并具有输入自定义值的能力

Text Field

文本输入框组件接受用户的文本输入,并替代了原生的文本输入元素

Checkbox Components

复选框组件是原生输入复选框的替代品

Switch Components

开关组件是样式上的复选框替代品

Radio Button

单选按钮组件是其原生对应物的替代品

File Input

文件输入组件用于从用户设备中选择文件,并替代了原生的文件输入元素

Form Component

表单组件用于包装表单元素,提供一致的样式和单一的验证源

Inputs Component

创建可与 v-model 指令一起使用的自定义输入

Number Input Component

数字输入组件用于从用户那里收集数值数据

OTP Input Component

OTP 输入组件用于通过输入字段进行 MFA 认证

Select Component

选择组件用于从选项列表中选择一个值,并替代了原生的选择元素

Slider Component

滑块用于通过移动滑块拇指从一系列值中选择一个值,并替代了原生的输入范围元素

Range Slider

范围滑块是具有选择范围功能的普通滑块

Textarea Component

文本域组件是原生文本域元素的替代品


布局

布局组件用于创建响应式布局。

grids

网格组件用于创建响应式布局


选择

这些组件允许用户从选项列表中选择一个或多个项目。

Carousel component

轮播组件用于显示多种形式的视觉内容

Button group

按钮组用于使用按钮组件在多个选项之间进行选择

Chip group

卡片组是一个包装组件,使卡片可交互,并允许它们被选中

Window components

窗口组件用于基于模型显示一个内容块

Stepper components

步进器组件是一种线性进度控制,用于将冗长的表单分解为较小的逻辑部分


数据展示组件

这些组件用于以各种方式显示数据和信息。

Confirm edit component

确认编辑组件用于确认对数据的更改

Data iterator component

数据迭代器组件提供了一个简单的界面,用于对数据进行分页和排序

Data table component

数据表用于在较小的空间中显示大量数据

Infinite scroll component

无限滚动组件是一个容器,在滚动时加载更多项目

Server side table component

服务器端数据表意在与服务器端数据源一起使用

Sparkline component

Sparkline 组件创建美观、简洁的图形,用于展示数值数据

Virtual Data table component

虚拟数据表组件用于显示非常大的数据子集

Table component

格组件是一个基本的表格,用于手动显示数据,是原生表格元素的替代品

Virtual scroll component

虚拟滚动组件使得在不牺牲性能的情况下渲染大量数据成为可能


反馈式组件

这些组件用于在内容内部、内容之上或响应用户操作时向用户提供反馈。

Alert component

警报向用户传达重要信息

Badge component

徽章将一个类似于头像的图标或文本作为上标或下标添加到内容中

Banner component

横幅用于向用户传达重要信息

Empty state component

空状态组件用于指示页面或页面上的区域没有内容

Skeleton loader component

在数据获取和渲染期间,显示内容,提升了感知性能

Snackbar component

Snackbar 组件用于向用户显示一条悬浮在现有内容上方的消息

Rating component

评分对于收集用户反馈很有用

Timeline components

时间线组件用于按时间顺序显示事件列表

Hover component

悬停组件是一个包装组件,允许您对悬停事件做出反应

Progress circular component

圆形进度是圆圈中数值数据的视觉指示器

Progress linear component

线性进度组件用于在水平线上显示数值数据


图像和图标组件

这些组件子集用于以各种方式显示媒体。

Aspect ratios component

宽高比组件强制执行一个定义好的比例

Avatar component

头像用于许多组件中,用于显示头像和个人资料图片

Icon component

图标组件是一个可重复使用的组件,用于显示图标

Image component

图像组件提供了一个灵活的界面,用于显示图像

Parallax component

创建一个 3D 效果,使图像看起来比前景移动得慢


选择器组件 (Pickers)

这些组件用于从特定样式的选项集中选择一个值。

Color picker component

颜色选择器组件用于从调色板中选择颜色

Date picker component

日期选择器组件用于从日历的月/年中选择单个日期


供应者组件 (Providers)

Defaults provider component

默认提供程序组件用于为模板中的所有组件设置默认值

Locale provider component

区域设置提供程序组件允许您更改其插槽内所有组件的语言

Theme provider component

主题提供程序组件允许您更改所有子组件的主题


杂项

这些组件不适合传统的分类,用途多种多样。

Lazy component

懒加载组件是一个包装组件,它防止其子组件在视口中可见之前渲染

No ssr component

这个组件用于防止其子组件在服务器上渲染

INFO

此页面正在进行设计构建,并将随着时间的推移更新缺失的图片