Card

Vuexy Admin have custom card component to enhance viewing experience and UX.
Vuexy Admin具有自定义卡片组件，可增强观看体验和UX。

Overview

Component Name: vx-card
Use case: Create advanced cards 创建高级卡片
Path: src/components/vx-card/VxCard.vue
Is Globally Registered: true
vx-card component have is built with simplicity & flexibility in mind. It is really easy to work with and provides you enough customization to make card however you like.
vx-card组件的构建考虑了简单性和灵活性。 它真的很容易使用，并为您提供足够的自定义设置，让您随心所欲地制作卡片。

vx-card have such nice transitions to make your cards collapsible and to be removed.
vx-card具有出色的过渡效果，可以使您的卡片可折叠并可被移除。

vx-card supports three actions: 支持3种时间

• Collapse: Collapse content for more space 折叠内容以获取更多空间
• Refresh: Refresh card content for requesting data from API 从API获得数据来刷新卡片内容
• Remove: Remove card 移除卡片

vx-card component comes with 5 slots to give flexibility in creating card however you like.
Changing the style of card is also made easy with just passing props. This props are listed below:
vx-card组件带有5个插槽，可根据您的喜好灵活地创建卡片。
只需通过props即可轻松更改卡片的样式。 该props如下：

• no-shadow: Remove card shadow 移除卡片阴影
• no-radius: Remove card radius 移除卡片圆角
• card-border: create bordered cards instead of shadow. Gives ability to use card inside of card. 创建带有边框得卡片而不是阴影。允许在卡片内使用卡片。

  Default

  You can create simple card by wrapping your content around vx-card tag.
  您可以通过将内容包装在vx-card标签上来创建简单的卡片。

  Title

  You can card with title using title prop. If you want to add subtitle you can also add that using subtitle prop.
  您可以使用tilte prop定义卡片标题。 如果要添加副标题，也可以使用subtitle prop添加。
  

  With Action Buttons 带有操作的按钮

  Creating card with actions like collapse, refresh/reload & remove made easy with this custom card component. You just have to pass prop actionButtons.
  借助此自定义卡片组件，可以轻松创建具有折叠，刷新/重新加载和删除等操作的卡片。您只需要传递prop actionButtons。
  

  With Single/Multiple Actions 带有单个/多个操作

  You can also add single/multiple actions as per your requirements. To add actions you have to add them using props. Prop for each action is listed below:
  您还可以根据需要添加单个/多个操作。要添加操作，您必须传递props。下面列出了每个操作的prop

1. collapseAction
2. refreshContentAction
3. removeCardAction

Let’s take an example of how you can create card with only collapse action.
让我们举个例子，说明如何仅使用折叠动作即可创建卡片。

To add another prop, just pass prop for that action. e.g.
要添加另一个操作，只需为该操作传递prop即可。例如

<vx-card title="Card Title" collapseAction removeCardAction>

Customizing Card 自定义卡片

vx-card have various to customize the look and feel of card component. You can remove shadow, add border etc. to bend it to your needs. Such options can be applied by passing them as prop:
vx-card具有各种可自定义卡片组件外观的功能。 您可以删除阴影，添加边框等以使其适应您的需要。 可以通过将它们作为prop来应用这些选项：

1. noShadow: Remove shadow from card
2. noRadius: Remove border radius from card
3. cardBorder: Add card border

In this exmaple we will create card which will have card border but no shadow.

Code Toggler 代码切换器

Vuexy Admin uses custom card’s code-toggler feature to show you code along side of demo. Which you already seen in demo. To implement this code-toggler feature you just have to add code-toggler prop to your card & some code in HTML entites inside of codeContainer slot.
If above explanation seems confusing lets look at example.
Vuexy Admin使用自定义卡的代码切换功能在演示过程中向您显示代码。 您已经在演示中看到了。 要实现此代码触发功能，您只需向卡中添加代码触发prop，并在codeContainer插槽内的HTML实体中添加一些代码即可。
如果以上解释似乎令人困惑，那就看例子。

WARNING
Style may look different due to some issues. But you can always check Vuexy Admin demo for proper style of how everything will look in your app.

Actions Slot

If you also add your custom content instead of card actions. Like remaining time or time elapsed or whatever you like using actions slot.
如果您还添加自定义内容而不是卡片操作。像剩余时间或已用时间或使用操作栏的任何方式。
Let’s see how you can add elapsed time to your card using actions slot.
让我们看看如何使用actions 插槽将经过的时间添加到卡片中。

No Body Slot

In some scenarios you may not want padding in card content. For that we have no-body slot. Which will let you add content without padding.
在某些情况下，您可能不希望填充卡片内容。为此，我们提供了no-body 插槽。这将使您添加不带padding的内容。

Let’s try that out as well.
让我们也试试。

TIP
To give rounded corners on top to img in vx-card component, add card-img-top class to image as shown in above code.
Another use case of this slot can be one we see in our demo of statistics card .
TIP
If you have no-body slot with regular content(with padding) then this slot with be on top of regular content. To create content with no padding below the regular content use no-body-bottom slot.

Footer Slot

You can also add footer to your card using footer slot. Footer of the card can be different for different use cases thats way we create very generic footer slot.
您也可以使用页脚插槽将页脚添加到您的卡片中。对于不同的用例，卡片的页脚可能会有所不同，这就是我们创建非常通用的页脚插槽的方式。

This slot’s content is wrapped in vx-card__footer class and it will be at the end of all content. Which gives you full control over how you want your footer to look like.
该插槽的内容包裹在vx-card__footer类中，它将在所有内容的末尾。这使您可以完全控制页脚的外观。

Let’s create simple footer with links in it.

TIP
It does not matter where you define your footer slot. it will always get rendered below all content.

Overlay Card 卡片遮罩

With all these customization and functionality things, vx-card card always provide fancy way to attract your users using overlay card.
有了所有这些自定义和功能性功能，vx-card始终可以提供一种吸引人的方式来使用overlay card吸引用户。
You can create overlay image card like below using this component.

Beautiful Overlay

Cake sesame snaps cupcake gingerbread danish I love gingerbread.

TIP
You can find more demo of using card on Vuexy Admin demo

Make API call on refresh 刷新来进行API调用

As our custom card component provide refresh action. You can use that event for reloading your card content.
作为我们的自定义卡组件，提供刷新操作。您可以使用该事件来重新加载卡中的内容。

WARNING You have to close refresh animation after refresh button is clicked, via card’s > removeRefreshAnimation method. 单击刷新按钮后，您必须通过卡的removeRefreshAnimation方法关闭刷新动画。>

Events 事件

Card component emit’s 3 events. 卡片组件触发3个事件

1. toggleCollapse
2. refresh
3. remove

1. toggleCollapse
This event is emitted when card content is collapsed or expanded. It passes isContentCollapsed to event for checking if content is collapsed or expanded.
当卡片内容折叠或拉伸时会触发此事件。它将isContentCollapsed传递给事件对象，以检查内容是否被折叠或拉伸。
2. refresh
This event is emitted when card is refreshed via refresh/reload action. It passes card component to event for removing it’s animation after API call finishes.
当卡片通过刷新/重新加载操作刷新时，将触发此事件。它将卡片组件传递给事件对象，以便在API调用完成后删除其动画。
3. remove
This event is emitted when card is remove via close/remove action.
当通过关闭/移除操作移除卡时，会发出此事件。
Here’s simple demo of using events

Please check how to remove animation when refresh is triggered in above section - Make API call on refresh

Dependencies

• vue-prism-component library
• feather-icon component
• Tailwind