چگونه کامپوننت های UIkit را به روز کنیم

در اینجا صفحه نمایشی است که می خواهیم برای نشان دادن موارد ایجاد کنیم:

حتماً صفحه را به پایین اسکرول کنید تا متوجه شوید که چگونه عناصر خاصی چسبناک می شوند.

پروژه آزمایشی

صفحه ما شامل بخش های زیر خواهد بود:

1. سربرگ
2. بنر قهرمان
3. پست ها

در اینجا چگونه به نظر خواهد رسید:

در اینجا بخش های مهم نشانه گذاری صفحه آورده شده است:

<header class="page-header">
  <div class="notification uk-background-muted uk-text-center uk-h4 uk-margin-remove">...</div>
  <nav uk-sticky>
    <div class="uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h3 uk-margin-remove">...</div>
    <div class="uk-background-muted uk-padding-small uk-padding-remove-horizontal uk-text-center uk-h4 uk-margin-remove uk-visible@m">...</div>
  </nav>
</header>
<section class="uk-background-cover" uk-height-viewport="offset-top: true" style="background-image: url(unsplash-posts.jpg);"></section>
<section class="uk-margin-large-bottom">
  <div class="post-filters uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h4">
    <div class="uk-container">
      <form class="post-filters-form uk-flex uk-flex-middle uk-flex-between">
        <div class="post-filters-form-inner uk-flex-1">
          <button class="uk-button uk-button-default" type="button">TOGGLE FILTERS</button>
          <div class="post-filters-dropdown" uk-dropdown="mode: click; boundary: .post-filters-form; pos: bottom-justify">ALL FILTERS HERE</div>
        </div>
        <button class="uk-button uk-button-default" type="submit">APPLY FILTERS</button>
      </form>
    </div>
  </div>
  <div class="uk-container uk-margin-large">
    <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
      <div class="uk-flex">
        <article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
          <h3 class="uk-text-center">...</h3>
          <p>...</p>
        </article>
      </div>
      <!-- more cards here -->
    </div>
  </div>
</section>

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

اگر کاملاً با UIkit آشنا نیستید، به شما توصیه می‌کنم ابزارهای توسعه‌دهنده مرورگر خود را باز کنید و عناصر مختلف را بررسی کنید تا بفهمید همه این کلاس‌ها چه کاری انجام می‌دهند.

به روز رسانی کامپوننت ها

با پرداختن به جزئیات بیشتر، سرصفحه صفحه از دو عنصر تشکیل شده است:

• یک نوار اعلان
• یک چسبنده nav عنصر با دو فرزند div عناصر. توجه داشته باشید که دوم div فقط در صفحاتی که عرض آنها حداقل 960 پیکسل است قابل مشاهده خواهد بود.

بخش پست ها شامل فیلترها و شبکه خواهد بود.

چسبنده

همانطور که صفحه را به پایین اسکرول می کنیم، فیلترها باید چسبناک باقی بمانند و زیر چسب قرار گیرند nav عنصر

کد جاوا اسکریپت زیر آنها را به عنوان چسبنده تنظیم می کند:

const pageHeader = document.querySelector(".page-header");
const nav = pageHeader.querySelector("nav");

const postFilters = UIkit.sticky(".post-filters", {
  offset: nav.offsetHeight
});

اگر اکنون این عنصر چسبنده را در کنسول چاپ کنیم، همه گزینه های موجود آن را خواهیم دید:

توجه کنید به offset ویژگی. مقدار آن بسته به اندازه صفحه نمایش متفاوت خواهد بود. به یاد داشته باشید که دوم div از nav عنصر فقط در صفحه‌هایی قابل مشاهده است که حداقل 960 پیکسل عرض دارند.

اگر شروع به تغییر اندازه صفحه کنیم، متوجه خواهیم شد که فیلترها در موقعیت مورد انتظار چسبنده نمی مانند. این اتفاق می افتد زیرا ما آن را به روز نمی کنیم offset مقدار، اما در عوض فقط موردی را که در بارگذاری صفحه می آید نگه دارید. بنابراین، برای اینکه این مؤلفه دقیق شود، باید این قطعه کد را اضافه کنیم:

window.addEventListener("resize", function () {
  postFilters.offset = nav.offsetHeight;
});

کشویی

اگر روی آن کلیک کنید فیلترها را تغییر دهید را فشار دهید، متوجه خواهید شد که یک کشویی وجود دارد. در یک سناریوی واقعی، این ممکن است شامل تمام برچسب‌های پست، دسته‌ها یا هر اصطلاح طبقه‌بندی دیگر باشد. عرض آن بسته به اندازه صفحه نمایش تغییر می کند.

گفته می شود، در صفحه نمایش های تا 959 پیکسل، به این صورت خواهد بود:

با این حال، در صفحه نمایش های بزرگتر به صورت زیر خواهد بود:

توجه داشته باشید که در مورد دوم، فهرست کشویی تمام عرض والد را پوشش نمی‌دهد، بلکه درست قبل از اعمال فیلترها دکمه.

برای انجام این نیاز، ابتدا یک مؤلفه کشویی جدید را با استفاده از ویژگی های سفارشی مانند این مقداردهی اولیه می کنیم:

<div class="post-filters-dropdown" uk-dropdown="mode: click; boundary: .post-filters-form; pos: bottom-justify">
  ALL FILTERS HERE
</div>

با خیال راحت کامپوننت را بخوانید مستندات برای درک گزینه هایی که از آنها عبور می کنیم.

در مرحله بعد، به این کامپوننت ارجاع خواهیم داد:

const dropdown = UIkit.dropdown(".post-filters-dropdown");

دوباره برای دیدن همه گزینه های کشویی، آن را در کنسول چاپ می کنیم:

توجه کنید boundary مقدار پارامتر به طور پیش فرض، ما این مقدار را روی the قرار می دهیم form عنصری که تضمین می کند که بازشو با عرض آن مطابقت دارد. این برای صفحه نمایش های کوچک خوب است، اما در صفحه هایی که حداقل 960 پیکسل عرض دارند، عرض آن باید با عرض صفحه نمایش مطابقت داشته باشد. .post-filters-form-inner عنصر بنابراین، برای انجام این کار، این شرط را اضافه می کنیم:

...

if (mqMedium.matches) {
  dropdown.boundary = postFiltersFormInner;
}

در نهایت، برای اطمینان از اینکه این شرط در تغییر اندازه پنجره برآورده می شود، این کد را اضافه می کنیم:

...

window.addEventListener("resize", function () {
  if (mqMedium.matches) {
    dropdown.boundary = postFiltersFormInner;
  } else {
    dropdown.boundary = postFiltersForm;
  }
});

می توانید با جابجایی زبانه جاوا اسکریپت نسخه آزمایشی، تمام کدهای مورد نیاز را بررسی کنید.

نتیجه

این برای امروز است، مردمی! این تمرین نحوه به‌روزرسانی گزینه‌های دو مؤلفه UIkit را نشان می‌دهد و به شما دانش کافی برای به‌روزرسانی سایر مؤلفه‌های UIkit می‌دهد.

در اینجا صفحه نمایشی ما برای یادآوری است:

آخرین اما نه کم اهمیت ترین، در مستندات، اطلاعاتی در مورد نحوه به روز رسانی یک مؤلفه با استفاده از update رویداد. در صورت نیاز این را در نظر داشته باشید.

مثل همیشه، خیلی ممنون که خواندید!

آموزش UIkit در Tuts+

UIkit، به قول خود توسعه دهندگان، یک “فریم ورک جلویی سبک و ماژولار برای توسعه رابط های وب سریع و قدرتمند” است. این یک روش واقعاً محبوب برای ساخت رابط های جلویی است، بنابراین با این آموزش ها همراه شوید!