assignment_late
为什么捐赠
travel_explore
API 浏览器
widgets
Vue 组件
Ajax Bar Ajax 进度条
Avatar 头像
Badge 徽标
Banner 横幅
Bar 工具栏
Breadcrumbs 面包屑
Card 卡片
Carousel 轮播
Chat Message 聊天消息
Chip 纸片
Circular Progress 环形进度条
Color Picker 颜色选择器
Dialog 对话框
Editor WYSIWYG 编辑器
Expansion Item 展开项
Floating Action Button 浮动操作按钮
Icon 图标
Img 图片
Infinite Scroll 无限滚动
Inner Loading 内部加载
Intersection 交叉观察
Knob 旋钮
Linear Progress 线性进度条
List & List Items 列表与列表项
Markup Table 标记表格
Menu 菜单
No SSR
Observers 观察者
Pagination 分页
Parallax 视差
Popup Edit 弹出编辑
Popup Proxy 弹出代理
Pull to Refresh 下拉刷新
Rating 评分
Responsive 响应式
Scroll Area 滚动区域
Separator 分隔线
Skeleton 骨架屏
Slide Item 滑动项
Slide Transition 滑动过渡
Space 间隔
Spinners 加载动画
Splitter 分割面板
Stepper 步骤条
Table 表格
Tabs 标签页
Tab Panels 标签面板
Timeline 时间线
Toolbar 工具栏
Tooltip 提示框
Tree 树形控件
Uploader 上传器
Video 视频
Virtual Scroll 虚拟滚动
alternate_email
联系站长
QCard 组件非常适合用来展示重要的分组内容。这种设计模式正在迅速成为应用、网站预览和邮件内容的核心设计范式。它帮助用户整理和组织信息,同时建立可预期的视觉层次。
在需要同时展示大量内容而屏幕空间又十分有限的情况下,卡片已经成为包括 Google 和 Twitter 在内的众多公司首选的设计模式。
QCard 组件设计上非常轻量,本质上是一个容器元素,能够承载任何适合的其他组件。
正在加载 QCard API...
正在加载 QCardSection API...
正在加载 QCardActions API...
用法
TIP
您可以利用卡片内的排版样式来创建精美的卡片。
基础用法
基础卡片
带操作按钮
带操作按钮的卡片
下面展示了一些可以通过 align 属性设置的自定义对齐方式:
操作按钮对齐
媒体内容
带媒体内容的卡片
带视频的卡片
带视差效果的卡片
水平布局
在下面的示例中,请注意设置了 horizontal 属性的 QCardSection,它包裹了其他 QCardSection。另外,您可以直接在水平 QCardSection 的子元素上使用 col-* 类来控制尺寸。
在处理水平 QCardSection 时,建议使用 QImg 组件而不是原生的 <img> 标签。
基础水平布局
更复杂的示例
多样内容
多样内容
表格
选项卡
可展开
在下面的示例中,点击右下角的圆形按钮可以看到展开效果。
可展开
发现错误?在浏览器中编辑此页
1. Introduction
2. QCard API
3. QCardSection API
4. QCardActions API
5. 用法
5.1. 基础用法
5.2. 带操作按钮
5.3. 媒体内容
5.4. 水平布局
5.5. 多样内容
5.6. 可展开