পুনঃব্যবহারযোগ্য উপাদানগুলির সাথে Vue-তে শীর্ষে স্ক্রোল করুন

যেকোন ওয়েবসাইটের ওয়েব পৃষ্ঠাগুলিতে প্রচুর বিষয়বস্তু সহ ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, ফ্রন্টএন্ড ডেভেলপারদের জন্য একটি বোতামের মাধ্যমে একটি স্ক্রল-টু-টপ কার্যকারিতা প্রয়োগ করা সাধারণ ব্যাপার, যাতে ব্যবহারকারীদের জন্য জিনিসগুলি আরও উপভোগ্য এবং সুবিধাজনক হয়৷

ব্যবহারকারীরা একটি কীবোর্ডে কমান্ড + আপ তীর ব্যবহার করতে পারে, এটি সম্ভাব্যভাবে মনে রাখাও গুরুত্বপূর্ণ আপনার ব্যবহারকারীদের অর্ধেকেরও বেশি হয়তো মোবাইল ডিভাইস ব্যবহার করছেন এবং আপনার ওয়েবসাইটে স্ক্রোল করার সময় তাদের ফোনের সাথে সংযুক্ত একটি কীবোর্ড ব্যবহার করবেন না। ছোট স্ক্রিনগুলি প্রায়শই আরও স্ক্রল করার প্রয়োজন হয়, যা নীচে থেকে শীর্ষে নেভিগেশনকে শ্রমসাধ্য করে তোলে।

এই নির্দেশিকায়, আমরা Vue 3 ব্যবহার করে একটি স্ক্রল-টু-টপ বোতাম প্রয়োগ করব – ধাপে ধাপে। পুনঃব্যবহারযোগ্য উপাদানের পাশাপাশি, আমরা একটি নিউজ অ্যাপ তৈরি করব যা বিভিন্ন উত্স থেকে ব্রেকিং নিউজ সরবরাহ করে সংবাদ API.

প্রকল্প সেটআপ

Vue.JS ফ্রেমওয়ার্ক দিয়ে শুরু করা সহজ একটি HTML ফাইলে একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা। কিন্তু একটি বাস্তব-বিশ্ব এবং বড় আকারের অ্যাপ্লিকেশনের জন্য, vue-cli শুরু করার সেরা উপায়! আমরা ব্যবহার করব vue-cli আমাদের আজকের টিউটোরিয়ালে।

আসুন প্রকল্পটি তৈরি করুন এবং এটির নাম দিন vue-scroll-to-top, নীচের কমান্ড ব্যবহার করে:

$ vue create vue-scroll-to-top

এটি আমাদের প্রকল্প নির্মাণ শুরু করার জন্য একটি টেমপ্লেট তৈরি করে। আপনি প্রকল্পে গিয়ে আবেদন শুরু করতে পারেন:

$ cd vue-scroll-to-top

এবং serve এটি সুতা বা NPM দিয়ে:

$ yarn serve

স্বর্ণ:

$ npm run serve

On localhost, বন্দরে 8080 - আপনার আবেদন পরিবেশন করা হবে:

উপাদান নির্মাণ

টেমপ্লেটটি তৈরি হওয়ার সাথে সাথে - আমরা পুনরায় ব্যবহারযোগ্য স্ক্রোল-টু-টপ কম্পোনেন্ট তৈরি করা শুরু করতে পারি, যা আপনি তৈরি করতে চান এমন যেকোনো অ্যাপকে সাধারণ করে তোলে। কম্পোনেন্ট সংজ্ঞায়িত করার আগে, এর প্রিয়ার এবং পরিষ্কার করা যাক App.vue স্টার্টার আমরা Vue CLI দিয়ে তৈরি করেছি।

Vue প্রকল্প পরিষ্কার করা

অধীনে src/App.vue, আমরা শীঘ্রই-এর উপাদান হিসাবে নিবন্ধন করব৷ AppButton:

<template>
	<section class="app-container">
		<AppButton />
	</section>
</template>

<script>
import AppButton from "./components/AppButton.vue";

export default {
	name: "App",

	components: {
		AppButton
	},

	setup() {
		return {};
	}
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font: inherit;
}
html {
	font-family: "Nunito", sans-serif;
}
body {
	font-size: 15px;
	color: #000000;
	background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000000;
}
img {
	max-width: 100%;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	display: inline-block;
}
.app-container {
	max-width: 82rem;
	margin: auto;
	padding: 3rem 1rem;
}
</style>

বোতাম UI তৈরি করা হচ্ছে

যে পৃষ্ঠাটি বোতাম (এবং সংবাদ) প্রদর্শন করবে তার সাথে - আমরা উপাদানগুলি তৈরি করা শুরু করতে পারি। এর বোতাম দিয়ে শুরু করা যাক!

মধ্যে components ফোল্ডার, একটি তৈরি করুন AppButton.vue ফাইল বোতামে, আমরা একটি আইকন অন্তর্ভুক্ত করব যা বোঝায় আপ তীর দৃশ্যত কার্যকারিতা জানাতে. আইকনের জন্য, আমরা একটি আইকন লাইব্রেরি ব্যবহার করব যাকে বলা হয় ফন্ট জট্টিল যার 19.000টি শৈলী এবং ব্র্যান্ডের 6টির বেশি আইকন রয়েছে, যদিও এটি একটি সাধারণ ক্যারেট সাইন দিয়ে প্রতিস্থাপিত হতে পারে (^), একটি কাস্টম আইকন বা অন্যান্য লাইব্রেরি থেকে একটি আইকন যদি আপনি অন্য নির্ভরতা প্রবর্তন করতে না চান।

আপনার পছন্দের নির্ভরতা পরিচালক ব্যবহার করে, আইকনগুলিকে কাজ করার জন্য সমস্ত ইউটিলিটি ধারণ করে এমন মূল প্যাকেজটি ইনস্টল করুন:

$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core

পরবর্তী, আমরা ইনস্টল করব বিনামূল্যে কঠিন SVG আইকন (একাধিক উপলব্ধ "সেট" বা শৈলীগুলির মধ্যে একটি), নিম্নলিখিত কমান্ড ব্যবহার করে:

$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons

এবং অবশেষে, আমরা ইনস্টল করব ফন্ট অসাধারন Vue উপাদান Vue 3 এর জন্য, নিম্নলিখিত কমান্ড ব্যবহার করে:

$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]

আমরা আমাদের বোতামে আমাদের আইকন রেন্ডার করতে পারার আগে, আমরা যে নির্দিষ্ট আইকন নামটি ব্যবহার করতে চাই তা সহ আমাদের প্রজেক্টে ইনস্টল করা ফন্ট অসাধারণ নির্ভরতাগুলি আমদানি করতে হবে। এর আপডেট করা যাক main.js ফাইল:

import { createApp } from 'vue'
import App from './App.vue'


import { library } from '@fortawesome/fontawesome-svg-core'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faArrowUp } from '@fortawesome/free-solid-svg-icons'

library.add(faArrowUp)

createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

আমরা এখন তীর আপ আইকন কল করতে পারেন, হিসাবে faArrowUp, এ AppButton.vue UI এ রেন্ডার করতে! আমরা কম্পোনেন্ট ফাইল থেকে বোতামটি স্টাইল করতে পারি:

<template>
  <button class="app-button">
    <font-awesome-icon icon="fa-solid fa-arrow-up" />
  </button>
</template>

<style scoped>
.app-button {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 4px;
  box-shadow: 2px 2px #e9e9e9;
  cursor: pointer;
  position: fixed;
  right: 40px;
  bottom: 40px;
}
</style>

DOM-এ, আমাদের স্ক্রোল-টু-টপ বোতামটি এইরকম হওয়া উচিত, যখন আপনি আপনার অ্যাপ্লিকেশনটি চালু করবেন localhost:8080:

নিউজ ফিড UI তৈরি করা

ম্যানুয়ালি স্ক্রল করার পরিবর্তে একজন ব্যবহারকারী বোতামটি ব্যবহার করতে চাইতে পারে এমন একটি পরিবেশ তৈরি করতে - আসুন ফ্রি নিউজ এপিআই থেকে প্রচুর সংবাদ সামগ্রী নিয়ে আসি। আনার অনুরোধ করার জন্য, আমরা এর সুবিধা নেব axios প্যাকেজ।

আপনি যদি এটি ইতিমধ্যেই ইনস্টল না করে থাকেন, তাহলে আপনি সুতা বা NPM এর মাধ্যমে তা করতে পারেন:

$ yarn add axios
# Or
$ npm install axios

News API ব্যবহার করতে, আপনাকে একটি নিবন্ধন করতে হবে৷ হিসাব - একটি API কী অর্জন করতে যা উন্নয়ন পরিবেশের জন্য বিনামূল্যে। এই ডেমোর জন্য, আমরা বিটকয়েন সম্পর্কে সমস্ত নিবন্ধ আনার মাধ্যমে জিনিসগুলিকে সহজ রাখব। মধ্যে components ফোল্ডার, এর নামক একটি নতুন ফাইল তৈরি করা যাক NewsList.vue. মধ্যে NewsList.vue, আমরা বিটকয়েন সংবাদ নিবন্ধগুলির একটি তালিকা তৈরি করব যা আমরা API থেকে প্রতিক্রিয়া হিসাবে পাব।

NewsList.vue এখন নিম্নলিখিত কোড অন্তর্ভুক্ত করা উচিত:

<template>
  <section>
    <ul class="news-list">
      <li class="news-card" v-for="newsItem in newsList" :key="newsItem.id">
        <p><span class="heading">Title</span>: {{ newsItem.title }}</p>
        <p><span class="heading">Author</span>: {{ newsItem.author }}</p>
        <p>
          <span class="heading">Description</span>: {{ newsItem.description }}
        </p>
        <p><span class="heading">Source</span>: {{ newsItem.source.name }}</p>
      </li>
    </ul>
  </section>
</template>

<script>
import axios from "axios";
import { onMounted, ref } from "vue";

export default {
  name: "NewsList",
  setup() {
    const newsList = ref([]);

    const fetchNews = () => {
      axios
        .get(
          "https://newsapi.org/v2/everything?q=bitcoin&apiKey=94585b39692e4ea6b372bea15abf7dcc"
        )
        .then((response) => (newsList.value = response.data.articles));
    };

    onMounted(() => {
      fetchNews();
    });

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

<style scoped>
ul.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
ul li.news-card {
  padding: 10px;
  display: flex;
  border-radius: 8px;
  flex-direction: column;
  row-gap: 5px;
  box-shadow: 0px 4px 12px -1px rgba(120,116,120,0.79);
}
li p span.heading {
  font-weight: 600;
  font-size: 18;
}
</style>

তারপর, আমরা আপডেট নিশ্চিত করুন App.vue, যাতে সংবাদ নিবন্ধের তালিকা প্রদর্শিত হতে পারে:

<template>
  <section class="app-container">
    <AppButton />
    <NewsList />
  </section>
</template>

<script>
import AppButton from "./components/AppButton.vue";
import NewsList from "./components/NewsList.vue";
export default {
  name: "App",
  components: {
    AppButton,
    NewsList,
  },
  setup() {
    return{}
  }
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}
html {
  font-family: "Nunito", sans-serif;
}
body {
  font-size: 15px;
  color: #000000;
  background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  display: inline-block;
}
.app-container {
  max-width: 82rem;
  margin: auto;
  padding: 3rem 1rem;
}
</style>

সাধারণত - আপনি ফলাফলগুলিকে স্তূপাকার করার পরিবর্তে পেজিনেট করতে চান৷ যাইহোক, আমরা বিশেষভাবে একটি কেস তৈরি করছি যেখানে একটি স্ক্রল-টু-টপ দরকারী।

স্ক্রোল লিসেনার ব্যবহার করে শীর্ষ বোতামে স্ক্রোল দেখান/লুকান

ব্যবহারকারীর জন্য একটি আকর্ষক অভিজ্ঞতার অংশ হিসাবে, আসুন নিশ্চিত করি যে স্ক্রোল-টু-টপ বোতামটি শুধুমাত্র তখনই প্রকাশিত হয় যখন ব্যবহারকারী পৃষ্ঠাটি নীচে স্ক্রোল করতে শুরু করেন।

এটি অর্জন করার জন্য, আমাদের স্ক্রোল ইভেন্টটি শুনতে হবে যেখানে একজন ব্যবহারকারী পৃষ্ঠাটি নীচে স্ক্রোল করে।

প্রথমে, এর একটি রেফ সেট করে বোতাম উপাদানটিকে লক্ষ্য করা যাক। তারপর, আমরা ব্যবহার করতে beforeUnmount() স্ক্রোল লিসেনারের সাহায্যে DOM থেকে বোতাম যোগ এবং অপসারণের জন্য লাইফসাইকেল হুক - পৃষ্ঠাটি নীচে বা পৃষ্ঠার শীর্ষে স্ক্রোল করার পরে। আমরা যদি একজন ব্যবহারকারী পৃষ্ঠার শীর্ষে আছে কিনা তাও পরীক্ষা করতে পারি window.scrollY 0-এর চেয়ে বড়। এটির সাহায্যে, আমরা বাটনের দৃশ্যমানতা টগল করতে পারি, যেখানে প্রয়োজন।

এর আপডেট করা যাক AppButton.vue ব্যবহারকারী কতদূর স্ক্রোল করেছে তার উপর ভিত্তি করে বোতামটি প্রদর্শন বা লুকানোর উপাদান:

<template>
  <button ref="appButton" class="app-button">
    <font-awesome-icon icon="fa-solid fa-arrow-up" />
  </button>
</template>

<script>
import { onMounted, ref, onBeforeMount } from "vue";
export default {
  name: "AppButton",
  setup() {
    const appButton = ref();
    const userScroll = () => {
      if (window.scrollY > 0) {
        appButton.value.classList.add("showButton");
        console.log('scrolled');
      } else {
        appButton.value.classList.remove("showButton");
        console.log('top');
      }
    };
    onMounted(() => {
      window.addEventListener("scroll", userScroll);
    });
    onBeforeMount(() => {
      window.removeEventListener("scroll", userScroll);
    });
    return { appButton };
  },
};
</script>

<style scoped>
.app-button {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 4px;
  box-shadow: 2px 2px #e9e9e9;
  cursor: pointer;
  position: fixed;
  bottom: 40px;
  display: none;
  right: 40px;
}

.showButton {
  display: block;
}
</style>

স্ক্রোল ইভেন্ট বাস্তবায়ন

এই মুহুর্তে আমাদের জন্য যা বাকি আছে তা হল বোতামটিকে প্রকৃতপক্ষে পৃষ্ঠার শীর্ষে স্ক্রোল করা যখন একজন ব্যবহারকারী এটিতে ক্লিক করেন। এটি অর্জন করতে, এর একটি তৈরি করা যাক scrollToTop() পদ্ধতিতে AppButton.vue. এটি একটি পদ্ধতি যা আমরা যখন আহ্বান করব window.scrollY = 0. এখন, যখন scrollToTop() পদ্ধতি বলা হয়, আমাদের পৃষ্ঠাটি মসৃণভাবে উপরের অংশে স্ক্রোল করে, এবং স্ক্রোল-টপ-টপ বোতামটিও অদৃশ্য হয়ে যায়:

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

যখন কোডের এই স্নিপেট যোগ করা হয় AppButton.vue, আপনি দেখতে পাবেন যে আমরা আমাদের Vue অ্যাপে একটি স্ক্রল-টু-টপ কার্যকারিতা সফলভাবে প্রয়োগ করেছি যা আমরা যেকোন প্রকল্পে প্লাগ-ইন করতে পারি যেখানে আমাদের একই প্রয়োজন।

উপসংহার

খুব শেষ পর্যন্ত অনুসরণ করার জন্য অভিনন্দন! 🔥

এই টিউটোরিয়ালে, আমরা দেখেছি কিভাবে একটি Vue অ্যাপ্লিকেশনে স্ক্রল-টু-টপ কার্যকারিতা তৈরি করা যায়। এটি একটি পুনঃব্যবহারযোগ্য জেনেরিক উপাদান এবং সহজেই অন্যান্য প্রকল্পগুলিতেও চালু করা যেতে পারে।

প্রাসঙ্গিক সম্পদ