Vue を使用してコーナー カード コンポーネントを実装するにはどうすればよいですか?

Web 開発では、カード レイアウトは常に人気のあるデザイン トレンドの 1 つです。現在、Vue.js を使用するアプリケーションがますます増えているため、開発者も Vue.js を使用してカード コンポーネントを実装する方法を検討し始めています。

この記事では、Vue.js を使用してコーナー カード コンポーネントを実装する方法を紹介し、トランジション効果を追加してカード コンポーネントをより鮮明にする方法も示します。

犬耳カードのコンポーネントとは何ですか?

Cornered Card コンポーネントは、次のようにカードの上隅を折りたたむことで独特の形状を作成する、視覚的に魅力的な UI デザインです:

dfcb03b09c5b105313c4524a15e0202b

コーナー カード コンポーネントには通常、タイトル、説明、およびユーザーをガイドするボタンがあります。特定のアクションに。この記事では、単純な犬の耳のカード コンポーネントを実装し、ページ要素をよりスムーズに表示および非表示にするトランジション効果を追加します。

準備

コードの実装を開始する前に、次のものを準備する必要があります:

• Vue CLI3: これは、新しい Vue アプリケーションを簡単に作成するのに役立ちます。
• FontAwesome: これは、使用するベクター アイコン ライブラリになります。
• コード エディター: Visual Studio Code や Sublime Text などの、一般的で使いやすいテキスト エディターを使用することをお勧めします。

さて、始めましょう!

Vue アプリケーションの作成

Vue CLI3 を使用して新しい Vue アプリケーションを作成するのが最も速くて便利な方法です。まず、Vue CLI3 がローカルにインストールされていることを確認します。そうでない場合は、次のコマンドを使用してインストールしてください:

npm install -g @vue/cli

インストールが完了したら、次のコマンドを使用して新しい Vue アプリケーションを作成できます:

vue create my-app

Here "my-app " はあなたのプロジェクト名です。コマンドラインで正しいディレクトリに変更し、my-app を希望の名前に変更していることを確認してください。

Vue CLI3 は、いくつかの基本的なテンプレートとファイルを含む新しい Vue アプリケーションをフォルダーに自動的に作成します。

犬の耳カード コンポーネントを作成する

犬の耳カード コンポーネントを作成するには、Vue テンプレートに新しいコンポーネントを追加します。このコンポーネントには、タイトル、説明、ボタンなど、カードのすべての要素が含まれます。まず、FoldCard.vue という名前の新しい Vue Single File Component (SFC) を作成します。

<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>

このコンポーネントには、カード ヘッダーのタイトル、説明、閉じるボタン、ユーザーが実行するアクションを示すボタンなど、犬の耳カード コンポーネントのすべての基本要素が含まれています。また、カードを閉じるための closeCard() というメソッドも追加しました。

また、Font Awesome を使用して閉じるアイコンを追加します。 Font Awesome を使用するには、Vue CLI3 プロジェクトの index.html に次のコードを追加する必要があります。

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

面取りの実装

次に、面取りを追加します。これを行うには、カードの隣接する 2 つの角に擬似要素を追加する必要があります。

.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;
}

boder-style を使用して、幅と高さがゼロのスラッシュを作成し、四隅すべてをカバーできるようにします。 border-color を使用して角の色も指定します。

スタイルの追加

CSS スタイルを使用して fold-card 内のすべての要素にスタイルを追加し、ページ上でカード効果として表示されるようにします:

.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;
}

ここでは、カードの丸い枠線、影の効果、背景色など、カードの基本スタイルを追加しました。

次に、カードのヘッダー、コンテンツ、フッターのスタイルを追加します。

.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;
}

ここでは、ヘッダー、コンテンツ、フッターの背景色、テキスト スタイルを追加します。ボタンのスタイル。

トランジション効果の追加

カード コンポーネントをより鮮明にするために、Vue トランジション効果とアニメーション効果を使用します。これにより、コンポーネントがページに表示されたり、ページから消えたりする際のスムーズな遷移が追加されます。

まず、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');

次に、App.vue で b57f851e6dfec74d20f5f1fceb2bc003<code> タグ> でトランジション効果を追加します:

<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>

ここでは、Vue の v-if を使用して動的な表示と非表示を実現します。カードのコンポーネント。また、スムーズなコーナー遷移を実現するために、名前 fold を 300ff3b250bc578ac201dd5fb34a0004 に設定します。最後に、@close-card イベントを使用してカードを閉じます。

アニメーションの追加

アニメーション効果を使用するには、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);
}

ここでは、アニメーションを追加しました。回転や移動などのアニメーション効果を含むトランジション。

さて、これでコーナーカードコンポーネントの設計と実装が完了しました。自分で試してみて、どうなるかを確認してください。これを使用する場合は、プロパティ title、description、および buttonText をコンポーネントに渡すだけです。

カード コンポーネントを実装するだけでは十分ではありません。ユーザーが表示して使用できるように、カード コンポーネントをアプリケーションに追加する必要もあります。この例では、App.vue に、犬の耳カード コンポーネントを開閉するボタンが含まれています。

これで、Vue を使用してコーナー カード コンポーネントを実装する方法に関するチュートリアルは終了です。この簡単な例が Vue.js の基本をすぐにマスターするのに役立ち、将来の開発プロジェクトの参考にもなれば幸いです。

以上がVue を使用してコーナー カード コンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。