How to implement the corner card component using Vue?

In web development, card layout has always been one of the popular design trends. Now, as more and more applications start to use Vue.js, developers are also beginning to explore how to use Vue.js to implement card components.

This article will introduce how to use Vue.js to implement the corner card component, and also demonstrate how to make the card component more vivid by adding transition effects.

What is the dog-eared card component?

The Cornered Card component is a visually appealing UI design that creates a unique shape by folding the top corners of a card, like this:

< img src="https://i.imgur.com/2j9ewm5.png" alt="Corner Card Component" style="width: 500px;"/>

Corner Card Component usually has a title and A description and a button to guide the user to a specific action. In this article, we will implement a simple dog-eared card component and add transition effects to make page elements appear and hide more smoothly.

Preparation

Before you start implementing the code, you need to prepare the following:

• Vue CLI3: This will help us easily create a new Vue application .
• FontAwesome: This will be the vector icon library we use.
• Code Editor: It is recommended to use a popular and easy-to-use text editor such as Visual Studio Code or Sublime Text.

Okay, let’s get started!

Creating a Vue application

Creating a new Vue application using Vue CLI3 is the fastest and most convenient way. First, make sure you have Vue CLI3 installed locally. If not, please use the following command to install it:

npm install -g @vue/cli

After the installation is complete, you can use the following command to create a new Vue application:

vue create my-app

Here "my-app" is yours project name. Make sure you change to the correct directory on the command line and change my-app to the name you want.

Vue CLI3 will automatically create a new Vue application in your folder, which contains some basic templates and files.

Create a dog-eared card component

In order to create a dog-eared card component, we will add a new component to the Vue template. This component will contain all elements of the card, including title, description, and buttons. Let’s start by creating a new Vue Single File Component (SFC) named FoldCard.vue.

<template>
  <div class="fold-card">
    <div class="fold-card-header">
      <h2>{{ title }}</h2>
      <a href="#" class="fold-card-close" @click="closeCard">
        <i class="fas fa-times"></i>
      </a>
    </div>
    <div class="fold-card-content">
      <slot></slot>
    </div>
    <div class="fold-card-footer">
      <a href="#" class="button">{{ buttonText }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldCard',
  props: {
    title: String,
    buttonText: String
  },
  methods: {
    closeCard() {
      this.$emit('close-card');
    }
  }
};
</script>

<style scoped>
...
</style>

This component contains all the basic elements of the dog-eared card component, including a card header title, description, close button, and a button to indicate the action the user should perform. We also added a method called closeCard() to close the card.

We will also use Font Awesome to add a close icon. To use Font Awesome, you need to add the following code to index.html of your Vue CLI3 project.

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-gfdkzPd1SlsUB7XvyH+K9CQv5gW5ceXw981FeynX+11mZsJ6oO8WQI5Tzya/vRLB"
  crossorigin="anonymous"
/>

Implementing the chamfer

Now, we will add the chamfer. To do this, we need to add a pseudo-element to two adjacent corners of the card.

.framed {
  position: relative;
}

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #7386D5 transparent transparent;
}

.framed::after {
  right: -2px;
  border-width: 0 78px 80px 0;
  border-color: transparent #ADC7FF transparent transparent;
  z-index: -1;
}

We use boder-style to create a slash with zero width and height, allowing it to cover all four corners. We also specify the color of the corners using border-color.

Add styles

We will use CSS styles to add styles to all elements in fold-card so that they appear as card effects on the page:

.fold-card {
  width: 320px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background-color: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

Here, we added the basic style of the card, including the rounded border, shadow effect and background color of the card.

Next, we will add styles for the header, content, and footer of the card:

.fold-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #7386D5;
}

.fold-card-header h2 {
  color: white;
  font-size: 22px;
  margin: 0;
}

.fold-card-header .fold-card-close {
  color: white;
}

.fold-card-content {
  padding: 20px;
}

.fold-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #E5E5E5;
}

.fold-card-footer .button {
  background-color: #7386D5;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
}

Here, we add the background color, text style for the header, content, and footer and button styles.

Add transition effects

To make the card component more vivid, we will use Vue transition and animation effects. This will add smooth transitions as the component appears and disappears from the page.

First, add the following code in main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Then, we will < in App.vue Use the <transition> tag in template> to add transition effects:

<template>
  <div id="app">
    <div class="container">
      <transition name="fold">
        <FoldCard v-if="showCard" @close-card="closeCard">
          <p>{{ description }}</p>
        </FoldCard>
      </transition>
      <button class="button" @click="showCard = true">显示折角卡片</button>
    </div>
  </div>
</template>

Here, we use Vue’s v-if to achieve dynamic display and hidden card components. We also set the name fold to the <transition> to achieve a smooth corner transition. Finally, we use the @close-card event to close the card.

Add animation

In order to use the animation effect, add the following style in App.vue:

.fold-enter-active,
.fold-leave-active {
  transition-duration: 0.3s;
  transition-property: transform, opacity;
  transition-timing-function: ease;
}

.fold-enter {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

.fold-leave-to {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

Here, we added animation for the transition , including animation effects such as rotation and translation.

Okay, now, we have completed the design and implementation of the corner card component. You can try it yourself and see how it goes. When using it, you simply pass the properties title, description, and buttonText to the component.

Just implementing the card component is not enough, you also need to add it to your application so that users can see and use it. In this example, App.vue contains a button that opens or closes the dog-eared card component.

This ends the tutorial on how to use Vue to implement the corner card component. I hope this simple example can help you quickly master the basics of Vue.js, and will also serve as a reference for your future development projects.

The above is the detailed content of How to implement the corner card component using Vue?. For more information, please follow other related articles on the PHP Chinese website!