# Cards(卡片)

v-card 组件是一个可用于从面板到静态图像的多功能组件。 组件有许多帮助程序组件来尽可能简单地进行标记。 没有列出选项的组件使用Vue的功能组件来更快渲染并充当标记糖以使建筑变得更加容易。

# 使用

卡中有4个基本组件。 v-card-title, v-card-subtitle, v-card-textv-card-actions

# API

# 函数式组件

# v-card-actions

v-card-actions的空间可用于放置用于卡片的选项,例如v-btn按钮组件或者v-menu菜单组件。 它也在选项按钮上应用了特殊边距排版,使其能够和卡片上的其他内容正确排列起来。

# v-card-subtitle

v-card-subtitle组件能为卡片的小标或字幕提供其默认的字体大小填充排版。 字体大小可以使用文本和排版中的文字排版属性进行调整。

# v-card-text

v-card-text主要用于显示卡片中的文本内容。 它使卡片中的文本能够进行填充排版,并将字体大小减小至 .875rem 的大小。

# v-card-title

v-card-title为卡片的大标提供了默认的字体大小填充排版。 字体大小可以使用文本和排版中的文字排版属性进行调整。

# 示例

# 属性

# 加载

Cards can be set to a loading state when processing a user action. This disables further actions and provides visual feedback with an indeterminate v-progress-linear.

# 轮廓

An outlined card has 0 elevation and contains a soft border.

# 其他

# 卡片显示

Using v-expand-transition and a @click event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.

# 包含内容

The v-card component is useful for wrapping content.

# 自定义操作

With a simple conditional, you can easily add supplementary text that is hidden until opened.

# 布局组件 (Grids)

Using grids, you can create beautiful layouts.

# 水平卡片

Using v-col, you can create customized horizontal cards. Use the contain property to shrink the v-img to fit inside the container, instead of covering.

# 信息卡片

Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.

# 带文字的媒体

Using the layout system, we can add custom text anywhere within the background.

# Twitter 卡片

The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.

# 天气卡片

Using v-list-items and a v-slider, we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:10/07/2024, 11:31:37 AM