خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه با Swiper رابط های Swipeable را در برنامه React خود ایجاد کنیم

ارشیا یوسفی ادیب ۹ مرداد, ۱۴۰۲ 4 min read

بیاموزید که چگونه این کتابخانه راحت می‌تواند با حداقل تلاش، یک رابط قابل کشیدن در برنامه‌های شما فعال کند.

همانطور که دستگاه های تلفن همراه محبوب تر می شوند، رابط های قابل کشیدن انگشت به یک روش استاندارد برای تعامل با برنامه ها تبدیل شده اند. رابط های قابل کشیدن برای ارائه بهترین تجربه کاربری به کاربران تلفن همراه ضروری هستند.

Swiper یک کتابخانه همه کاره است که به شما امکان می دهد در برنامه های React خود رابط های قابل کشیدن را ایجاد کنید. کشف کنید که چگونه می توانید با استفاده از Swiper رابط های قابل کشیدن در برنامه React خود ایجاد کنید.

نصب Swiper

Swiper یکی از کتابخانه‌هایی است که می‌توانید برای سفارشی کردن برنامه React خود از آن استفاده کنید. برای شروع کار با Swiper، باید آن را در برنامه React خود نصب کنید. می توانید این کار را با دستور ترمینال زیر که باید در دایرکتوری ریشه پروژه خود اجرا کنید انجام دهید:

npm install swiper

هنگامی که Swiper را نصب کردید، می توانید از آن در برنامه خود استفاده کنید.

ایجاد رابط های کش رفتن

پس از نصب Swiper در برنامه React خود، می توانید رابط های قابل کشیدن را ایجاد کنید. با وارد کردن اجزای Swiper و SwiperSlide از کتابخانه Swiper شروع کنید.

جزء Swiper جزء اصلی کتابخانه Swiper است. ساختار، رفتار و عملکرد عناصر قابل کشیدن را تعریف می کند. مولفه SwiperSlide یک جزء فرزند از مولفه Swiper است. اسلایدهای جداگانه ای را که در مولفه Swiper هستند تعریف می کند.

در اینجا یک نمونه از یک رابط قابل کشیدن با استفاده از اجزای Swiper و SwiperSlide آورده شده است:

import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';

function App() {
  return (
    <div>
      <Swiper>
        <SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
      </Swiper>
    </div>
  )
}

export default App

علاوه بر مؤلفه‌های Swiper و SwiperSlide، این بلوک کد، برگه سبک پیش‌فرض Swiper را با استفاده از ماژول swiper/css وارد می‌کند.

مطلب مرتبط:   چگونه نمودارهای پری دریایی را در پروژه GitHub خود بگنجانیم

سپس این مثال یک جزء Swiper را در اطراف چهار مؤلفه فرزند SwiperSlide می‌پیچد. هر SwiperSlide حاوی یک عنصر div با ویژگی className است. می توانید از className برای استایل دادن به عناصر div استفاده کنید:

.element {
  inline-size: 100px;
  border-radius: 12px;
  padding: 1rem;
  color: #333333;
  background-color: #e2e2e2;
  font-family: cursive;
}

سفارشی کردن رابط قابل کشیدن خود

پس از ایجاد موفقیت آمیز یک رابط قابل کشیدن، می توانید ظاهر و عملکرد آن را متناسب با نیازهای خود ارتقا دهید.

با Swiper، می‌توانید رفتار و ظاهر رابط را با استفاده از گزینه‌های مختلف سفارشی کنید. شما این گزینه ها را به عنوان ابزار در React به کامپوننت Swiper منتقل می کنید:

import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';

function App() {
  return (
    <div>
      <Swiper
        spaceBetween={30}
        slidesPerView={2}
        loop={ true }
      >
        <SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
        <SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
      </Swiper>
    </div>
  )
}

export default App

در این مثال، مولفه Swiper دارای سه ویژگی است: spaceBetween، slidesPerView و loop. prop spaceBetween فضای بین هر اسلاید را تعیین می کند، در این مورد 30 پیکسل.

با استفاده از پایه slidesPerView، می توانید تعداد اسلایدهای قابل مشاهده را به طور همزمان تنظیم کنید. در این حالت، پایه slidesPerView روی 2 تنظیم می شود که باعث می شود مولفه Swiper دو اسلاید را به طور همزمان نمایش دهد.

در نهایت، loop prop مشخص می کند که آیا اسلایدها باید بی نهایت حلقه شوند یا خیر. در این مثال، اسلایدها تا بی نهایت حلقه می زنند زیرا مقدار حلقه prop درست است.

پیکربندی رابط‌های قابل کشیدن با ماژول‌ها

می‌توانید رفتار رابط قابل کشیدن خود را با ماژول‌های جاوا اسکریپت ارائه شده توسط کتابخانه Swiper پیکربندی کنید. برخی از ماژول هایی که ارائه می دهد عبارتند از: ناوبری، پخش خودکار، صفحه بندی و نوار اسکرول.

مطلب مرتبط:   6 انجمن برنامه نویس دانشجویی برای پیگیری سریع حرفه برنامه نویسی شما

برای استفاده از هر یک از این ماژول ها در برنامه خود، باید آنها را از کتابخانه Swiper وارد کنید. همچنین باید سبک‌های CSS مربوطه را برای ماژول‌ها وارد کنید و نام آن‌ها را با استفاده از پایه ماژول‌ها به مؤلفه Swiper منتقل کنید.

به عنوان مثال، به این صورت است که می توانید از ماژول ناوبری برای پیکربندی رابط های قابل کشیدن خود استفاده کنید:

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";

function App() {
  return (
    <div>
      <Swiper
        spaceBetween={30}
        slidesPerView={2}
        modules={[Navigation]}
        loop={true}
        navigation={true}
      >
        <SwiperSlide><div className="element">Element 1</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 2</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 3</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 4</div></SwiperSlide>
      </Swiper>
    </div>
  );
}

export default App;

این بلوک کد ماژول Navigation و سبک CSS آن را وارد می‌کند، سپس ماژول را در قسمت ماژول‌های جزء Swiper مشخص می‌کند. ماژول ها ماژول های ارائه شده توسط کتابخانه Swiper را فعال و پیکربندی می کنند.

ماژول Navigation عملکرد ناوبری را برای مولفه Swiper فراهم می کند. دکمه های پیکان قبلی و بعدی را اضافه می کند که می توانید روی آنها کلیک کنید یا ضربه بزنید تا به اسلاید قبلی یا بعدی بروید.

مقدار prop navigation true است که باعث می شود دکمه های قبلی و بعدی روی صفحه نمایش داده شوند.

پیکربندی رابط‌های قابل کشیدن با قابلیت پخش خودکار

ماژول Autoplay به لغزنده اجازه می دهد تا بین اسلایدها به طور خودکار و بدون تعامل کاربر جابجا شود.

در اینجا مثالی از نحوه پیکربندی رابط قابل کشیدن با استفاده از ماژول پخش خودکار آورده شده است:

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";

function App() {
  return (
    <div>
      <Swiper
        spaceBetween={30}
        slidesPerView={2}
        modules={[Autoplay]}
        loop={true}
        autoplay={{ delay: 3000 }}
      >
        <SwiperSlide><div className="element">Element 1</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 2</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 3</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 4</div></SwiperSlide>
      </Swiper>
    </div>
  );
}

export default App;

با استفاده از پایه پخش خودکار، می توانید تاخیر را مشخص کنید. در این حالت روی 3000 میلی ثانیه تنظیم شده است.

مطلب مرتبط:   10 IDE پایتون که هر برنامه نویسی باید بداند

پیکربندی رابط های قابل کشیدن با صفحه بندی

یکی دیگر از ماژول های مهم Swiper صفحه بندی است. ماژول صفحه‌بندی به شما امکان می‌دهد تا گلوله‌های صفحه‌بندی یا نشانگرهای نوار پیشرفت را به لغزنده اضافه کنید و به کاربران نمایشی بصری از تعداد اسلایدها و موقعیت فعلی آنها در لغزنده ارائه دهید.

برای استفاده از ماژول صفحه‌بندی، باید آن را وارد کنید و در قسمت ماژول‌های جزء Swiper قرار دهید:

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";

function App() {
  return (
    <div>
      <Swiper
        spaceBetween={30}
        slidesPerView={2}
        modules={[Pagination]}
        loop={true}
        pagination={{ clickable: true }}
      >
        <SwiperSlide><div className="element">Element 1</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 2</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 3</div></SwiperSlide>
        <SwiperSlide><div className="element">Element 4</div></SwiperSlide>
      </Swiper>
    </div>
  );
}

export default App;

این بلوک کد قابلیت صفحه بندی را با ماژول صفحه بندی فراهم می کند. همچنین به کاربران اجازه می‌دهد تا با تنظیم ویژگی قابل کلیک صفحه‌بندی بر روی true روی گلوله‌های صفحه‌بندی کلیک کنند.

علاوه بر ماژول صفحه‌بندی کتابخانه Swiper، react-paginate یکی دیگر از گزینه‌های عالی برای ایجاد صفحه‌بندی در برنامه React شما است.

ساخت اپلیکیشن های قابل دسترس با React

رابط های قابل کشیدن، تجربه کاربری برنامه شما را برای کاربران صفحه لمسی بهبود می بخشد. Swiper انعطاف پذیری زیادی را ارائه می دهد و شما به راحتی می توانید آن را مطابق با نیازهای برنامه خود سفارشی کنید.

کتابخانه‌های مختلف رابط کاربری می‌توانند به دسترسی بیشتر برنامه‌های React شما کمک کنند. این کتابخانه ها ویژگی ها و عملکردهایی را ارائه می دهند که تجربه کاربری برنامه شما را بهبود می بخشد.

Tags: