Vue、Tailwindとララベルで再利用可能なアニメーションドロップダウンを行います

44260 ワード

tutorial tailwindcss laravel vue テキストリンク

皆さんこんにちは👋,
再利用可能なコンポーネントが開発者の生活を容易にする主要なキーの1つであることは疑いありません.それだけでなく、コードエレガントでセクシーになりますて🌶️, しかし、それは複数のプロジェクトで使用することができますだけでいくつかの微調整とVil - il!あなたのコンポーネントの別のバージョンを楽にしている.この記事では、私はVUE JS 3ドロップダウンコンポーネントを作成するのに役立ちます.我々のコンポーネントは、再利用可能で、ダイナミックで、同様に生き生きとしています.
我々は何を作成するのピークを取る👇 :
私はあなたがこれより良いスタイルをすることができます確信して、私はちょうどあなたのオプションの様々を表示したい.
コードのもう一つのピーク👇 :

<Dropdown title="Users Dropdown">
  <Dropdowncontent>
    @foreach ($users as $user)
    <Dropdownitems item="{{ $user->name }}" 
                   href="/users/{{ $user->id }}">
    </Dropdownitems>
    @endforeach
  </Dropdowncontent>
</Dropdown>

始める前に、質問があれば手を挙げてください.

🙋‍♂️ あなたは“再利用”に言及し続ける、それはどういう意味ですか?

再使用可能なコンポーネントは、アプリケーションのさまざまな部分で使用できるコンポーネントです.たとえば、一度我々のドロップダウンを構築する今日、あなたのWebアプリケーションで使用することができます多くの倍のようにあなたのコードを複製することなく.

目次
1- Prerequisites:
2- Allow Tailwind to read Vue files
3- Create a general Dropdown.vue component
4- Create component parts
5- Slice Dropdown.vue
6- Provide/Inject
7- Pass the data from Blade to Vue
8- Adding animation and styles
9- Extracting UsersDropdown blade component

1 -前提条件:

I'm expecting that you have very basic knowledge of Vue composition API, Tailwind CSS and Laravel. If you don't, just come along for the ride and follow each step carefully and I guarantee you'll be able to do it by yourself by the time you finish this one.

I will build the reusable component from scratch continuing on using the same REPO 私たちは前の記事で作成した.

あなたが私のrepoなしで沿ってコード化したいならば、ちょうどlaravel、tailwindとvue js 3をインストールするようにしてください.また、ユーザーテーブルを使用してデータベースを作成したり、テーブルにループするように接続します.方法に関する指示は、中にあります...

コマンドを実行していることを確認してくださいnpm run watch 常に.

2 - uwindファイルを読み込むためにtarwindを許可します.

Head to tailwind.config.js and within the content array, be specific about your Vue files path.

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./resources/js/components/*.vue",
    "./resources/js/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Insure npm run watch is running in the terminal.

3 -一般的なドロップダウンを作成します.Vueコンポーネント

Head to resources/js/components and create new file called Dropdown.vue .
Within this file just build a normal drop-down component without looping over any data in database, just a toggle with showUsers function and some tailwind.
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <button
      class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
             text-sm font-semibold lg:inline-flex lg:w-48">
      Users
    </button>

    <!-- Content Container -->

    <div v-show="usersToggle" class="mt-2 w-full rounded-lg bg- 
                                     blue-100 py-2">
      <!-- Drop-down Items -->

      <a href="#" class="block text-sm my-1 mx-1"> 
           Random user name
      </a>
    </div>
  </div>
</template>

<script>
import vClickOutside from "click-outside-vue3";
import { ref } from "vue";
export default {
    name: "Dropdown",
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Import your component in resources/js/app.js .

require("./bootstrap");

import { createApp } from "vue";
import Dropdown from "./components/Dropdown";
import vClickOutside from "click-outside-vue3";

createApp({
  components: {
    Dropdown,
  },
})
  .use(vClickOutside)
  .mount("#app");

Just a reminder that the vClickOutside is an npm package we used in the previous tutorial to close the drop-down when we click anywhere on the screen.
With nothing else, if you run the command php artisan serve in your Laravel's main directory you will see a functional ugly drop-down 🍾 But don't worry, we will make it prettier later.

4 -コンポーネント部分を作成する

Now we're going to slice our component as we need 3 parts. One for the toggler, one for the content container and one for the drop-down items. But first we must create and import them.

Head to resources/js/components/ and create the other two files Dropdowncontent.vue and Dropdownitems.vue .
Just make them contain <template> and <script> tags and leave them empty for now.
Import them in resources/js/app.js like we did with the first one.
resources/js/app.js :

import { createApp } from "vue";
import Dropdown from "./components/Dropdown";
import Dropdowncontent from "./components/Dropdowncontent";
import Dropdownitems from "./components/Dropdownitems";
import vClickOutside from "click-outside-vue3";

createApp({
  components: {
    Dropdown,
    Dropdowncontent,
    Dropdownitems,
  },
})
  .use(vClickOutside)
  .mount("#app");

5 -スライスDropdown.vue :

Head to resources/js/components/Dropdown.vue and copy the div the contains the link and leave in it's place <slot /> tag and wrap the botton with <slot name="toggler"></slot> tags.
Head to resources/js/components/Dropdowncontent.vue and paste the div in the template. Then copy the link inside the div from Dropdowncontent.vue to Dropdownitems.vue and leave in it's place <slot /> tag as well.
Your components should look like this:
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <slot name="toggler">

      <button
        class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
               text-sm font-semibold lg:inline-flex lg:w-48">
        Users
      </button>

    </slot>

    <!-- Content Container -->

    <slot />

  </div>
</template>

Dropdowncontent.vue :

<template>
  <div v-show="usersToggle" class="mt-1 w-full rounded-xl bg-blue- 
                                   100 py-2">

    <slot />

  </div>
</template>

<script>
export default {
    name: "Dropdowncontent",
};
</script>

Dropdownitems.vue :

<template>
  <a href="#" class="block text-sm my-1 mx-1"> A user name </a>
</template>

<script>
export default {
    name: "Dropdownitems",
};
</script>

Head to welcome.blade.php and let's break it down in the body.
welcome.blade.php :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dropdown</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/app.js') }}" defer></script>
  </head>

  <body>
    <main class="max-w-6xl mx-auto mt-6 lg:mt-20 space-y-6" 
          id="app">
      <div class="max-w-xl mx-auto mt-10 text-center">
        <div class="space-y-2 lg:space-y-0 lg:space-x-4 mt-8">
          <div
            class="relative lg:inline-flex items-center bg-blue- 
                   100 rounded-xl">

            <Dropdown>

              <Dropdowncontent>

                <Dropdownitems></Dropdownitems>

              </Dropdowncontent>

            </Dropdown>

          </div>
        </div>
      </div>
    </main>
  </body>
</html>

Now if you check it on browser, you will see the same thing but the toggler won't work. You might be wondering about how the heck are we going to pass usersToggle value from Dropdown.vue to Dropdowncontent.vue and really it's pretty simply, we're going to use Vue's provide/inject.

6 -提供/注入:

Head to Dropdown.vue and import provide from vue, use it in the setup.
Dropdown.vue :

<script>
import vClickOutside from "click-outside-vue3";
import { provide, ref } from "vue";
export default {
    name: "Dropdown",
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        provide("usersToggle", usersToggle);

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Head to Dropdowncontent.vue and import inject, use it and return the value.
Dropdowncontent.vue :

<script>
import { inject } from "vue";
export default {
    name: "Dropdowncontent",

    setup() {
        const usersToggle = inject("usersToggle");

        return {
            usersToggle,
        };
    },
};
</script>

And just like that, our drop-down is working again.

7 -ブレードからVueへデータを渡します.

To make this component more reusable and dynamic, let's head to Dropdown.vue and instead of hard coding the word 'Users' leave instead {{ title }} and accept title as a prop in the script.
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <button
      class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
             text-sm font-semibold lg:inline-flex lg:w-48">

      {{ title }}

    </button>

    <!-- Content Container -->

    <slot />

  </div>
</template>

<script>
import vClickOutside from "click-outside-vue3";
import { provide, ref } from "vue";
export default {
    name: "Dropdown",
    props: ["title"],
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        provide("usersToggle", usersToggle);

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Head to Dropdownitems.vue and do the same. Remove 'A user name' and leave instead {{ itemName }} and accept it as a prop .
Dropdownitems.vue :

<template>
  <a href="#" class="block text-sm my-1 mx-1"> {{ item }} </a>
</template>

<script>
export default {
    name: "Dropdownitems",
    props: ["item"],
};
</script>

Head to welcome.blade.php and pass on the values.
welcome.blade.php :

<Dropdown title="Users Dropdown">

  <Dropdowncontent>

    <Dropdownitems item="Testing Items" href="#" />

  </Dropdowncontent>

</Dropdown>

Use loop to loop over all users in database and echo out their names.

<Dropdown title="Users Dropdown">

  <Dropdowncontent>

    @foreach ($users as $user)
    <Dropdownitems item="{{ $user->name }}" 
                   href="/users/{{ $user->id }}">
    </Dropdownitems>
    @endforeach

  </Dropdowncontent>

</Dropdown>

And there you go 🚀 This is a complete dynamic and reusable drop-down component. You can even add to classes by passing them from blade just like we did with title, item name and href.

8 -アニメーションとスタイルの追加

You can get SVG website そして、それをボタンに加えますDropdown.vue .

私はクラスを条件付きでそれを回転させるusersToggle が真.

また、Cookieのスタイルを変更することはほとんどありませんでした.

Dropdown.vue :

<template>
  <div class="relative" v-click-outside="onClickOutside" @click="showUsers">
    <slot name="toggler">
      <button
        class="text-white bg-gradient-to-r from-purple-600 to- 
               blue-500 rounded-xl flex max-h-52 w-full overflow- 
               auto py-2 pl-3 pr-9 text-sm font-semibold 
               lg:inline-flex lg:w-52">
        {{ title }}
        <svg
          class="absolute"
          :class="usersToggle
? '-rotate-90 transform transition duration-500 ease-in-out'
: 'rotate-90 transform transition duration-500 ease-in-out'"
          style="right: 12px"
          width="22"
          height="22"
          viewBox="0 0 22 22">
          <g fill="none" fill-rule="evenodd">
            <path
              stroke="#000"
              stroke-opacity=".012"
              stroke-width=".5"
              d="M21 1v20.16H.84V1z"
            ></path>
            <path
              fill="#222"
              d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"
            ></path>
          </g>
        </svg>
      </button>
    </slot>

    <slot />
  </div>
</template>

私はVueの<transition> タグは、風のドロップダウンのためのスムーズな効果を作るために風のCSSのクラスと組み合わせる.

Dropdwoncontent.vue :

<template>
  <transition
    :duration="1000"
    enter-active-class="transform transition duration-300 ease- 
    custom"
    enter-class="-translate-y-1/2 scale-y-0 opacity-0"
    enter-to-class="translate-y-0 scale-y-100 opacity-100"
    leave-active-class="transform transition duration-300 ease- 
    custom"
    leave-class="translate-y-0 scale-y-100 opacity-100"
    leave-to-class="-translate-y-1/2 scale-y-0 opacity-0">
    <div
      v-show="usersToggle"
      class="absolute left-0 right-0 z-50 mt-2 w-full rounded-lg 
             bg-gradient-to-r from-purple-600 to-blue-500 py-1 px- 
             3 text-left text-sm font-semibold text-white 
             transition duration-300 py-2">
      <slot />
    </div>
  </transition>
</template>

ドロップダウンアイテム.Vue

<template>
  <a
    href=""
    class="px-1 py-1 my-1 rounded-lg block hover:bg-gradient-to-bl 
           focus:bg-gradient-to-bl focus:ring-4 focus:ring-blue- 
           300 dark:focus:ring-blue-800">

    <slot>{{ item }}</slot>

  </a>
</template>

9 -ユーザーのドロップダウンコンポーネントの抽出

This is not necessary as the code still looks great but we can extract a blade component for it and.
Create new folder named components in resources/views and create inside it a new file named users-dropdown.blade.php .
Cut your drop-down code and paste it inside, leave in it's place <x-users-dropdown /> .
That will leave us with only this code in our welcome.blade.php:


          <!-- Only this -->

          <x-users-dropdown />

Congratulations 🥳 Now you have a Vue animated, dynamic, reusable and colorful drop-down component inside a blade component with a very elegant code and cool Tailwind styles.

That's it for this tutorial and I hope you enjoyed reading it as I made huge effort due to the article being deleted and I had to rewrite it again. If you liked it please leave a reaction and if you have any questions leave it below or send me a DM on directly.

Have a great day and happy coding 👋

Reference

この問題について(Vue、Tailwindとララベルで再利用可能なアニメーションドロップダウンを行います), 我々は、より多くの情報をここで見つけました https://dev.to/moose_said/make-reusable-and-animated-drop-down-with-vue-tailwind-and-laravel-4fp3

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

01.15関数の作成、whileの繰り返し

Androidクラッシュログ収集