معرفی بند کفش، کتابخانه UX مبتنی بر مؤلفه مستقل از چارچوب

این یک پست در مورد است بند کفشیک کتابخانه مؤلفه توسط کوری لاویسکا، اما با پیچ و تاب. تمام اجزای UX استاندارد شما را تعریف می کند: زبانه ها، مدال ها، آکاردئون ها، تکمیل خودکار و خیلی خیلی بیشتر. آنها در خارج از جعبه زیبا به نظر می رسند، در دسترس هستند و کاملاً قابل تنظیم هستند. اما به جای ایجاد این کامپوننت ها در React، یا Solid، یا Svelte و غیره، آنها را با اجزای وب; این بدان معنی است که شما می توانید از آنها استفاده کنید هر چارچوب

چند چیز مقدماتی

اجزای وب عالی هستند، اما در حال حاضر چند مشکل کوچک وجود دارد که باید از آنها آگاه بود.

واکنش نشان می دهند

من گفتم آنها در هر چارچوب جاوا اسکریپت کار می کنند، اما همانطور که قبلاً نوشتم، پشتیبانی React از Web Components است. در حال حاضر فقیر. برای رسیدگی به این، بند کفش در واقع لفاف ها ایجاد کرد فقط برای React

گزینه دیگری که من شخصاً آن را دوست دارم، ایجاد یک کامپوننت React نازک است که نام تگ یک کامپوننت وب و تمام ویژگی‌ها و ویژگی‌های آن را بپذیرد، سپس کار کثیف رسیدگی به کاستی‌های React را انجام دهد. من در مورد این گزینه صحبت کردم در یک پست قبلی. من این راه حل را دوست دارم زیرا برای حذف طراحی شده است. مشکل قابلیت همکاری Web Component در حال حاضر در شعبه آزمایشی React برطرف شده است، بنابراین پس از ارسال، هر مؤلفه نازکی که با Web Component-Interoperable استفاده می‌کنید می‌تواند جستجو و حذف شود، و بدون هیچ گونه پوشش React، استفاده مستقیم از Web Component را در اختیار شما قرار دهد.

رندر سمت سرور (SSR)

پشتیبانی از SSR نیز در زمان نگارش این مقاله ضعیف است. در تئوری، چیزی به نام وجود دارد Shadow DOM اعلامی (DSD) که SSR را فعال می کند. اما پشتیبانی مرورگر حداقل است و در هر صورت DSD واقعاً نیاز دارد پشتیبانی سرور درست کار کردن، یعنی بعدی, ریمیکس، یا هر چیزی که اتفاقاً روی سرور استفاده می کنید، باید قابلیت مدیریت خاصی را داشته باشد.

با این حال، راه‌های دیگری نیز برای دریافت Web Components وجود دارد فقط کار با یک برنامه وب که SSR با چیزی شبیه به Next است. نسخه کوتاه این است که اسکریپت‌هایی که اجزای وب شما را ثبت می‌کنند باید قبل از تجزیه نشانه‌گذاری در یک اسکریپت مسدودکننده اجرا شوند. اما این موضوع برای پست دیگری است.

البته، اگر شما در حال ساخت هر نوع SPA ارائه شده توسط مشتری هستید، این یک مشکل نیست. این چیزی است که در این پست با آن کار خواهیم کرد.

بیا شروع کنیم

از آنجایی که می خواهم این پست بر روی بند کفش و ماهیت کامپوننت وب آن تمرکز کند، از آن استفاده خواهم کرد صاف برای همه چیز. من هم از این استفاده خواهم کرد پروژه Stackblitz برای تظاهرات ما این نسخه ی نمایشی را با هم، گام به گام می سازیم، اما با خیال راحت هر زمان خواستید آن REPL را باز کنید تا نتیجه نهایی را ببینید.

من به شما نشان خواهم داد که چگونه از بند کفش استفاده کنید، و مهمتر از آن، چگونه آن را سفارشی کنید. در مورد صحبت خواهیم کرد سایه های DOM و اینکه کدام سبک ها را از دنیای بیرون مسدود می کنند (و همچنین کدام سبک ها را نمی کنند). ما همچنین در مورد صحبت خواهیم کرد ::part انتخابگر CSS - که ممکن است برای شما کاملاً جدید باشد - و ما حتی خواهیم دید که چگونه Shoelace به ما اجازه می دهد انیمیشن های مختلف آن را نادیده بگیریم و سفارشی کنیم.

اگر بعد از خواندن این پست متوجه شدید که بند کفش را دوست دارید و می خواهید آن را در پروژه React امتحان کنید، توصیه من این است که از آن استفاده کنید. یک لفاف همانطور که در مقدمه اشاره کردم. این به شما امکان می‌دهد از هر یک از مؤلفه‌های Shoelace استفاده کنید، و زمانی که React اصلاحات Web Component را ارسال کرد، می‌توان آن را به طور کلی حذف کرد (در نسخه 19 به دنبال آن باشید).

معرفی بند کفش

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

با نصب بند کفش، بیایید یک کامپوننت Svelte ایجاد کنیم تا برخی از محتواها را ارائه کنیم و سپس مراحل سفارشی سازی کامل آن را طی کنیم. برای انتخاب چیزی نسبتاً غیر پیش پا افتاده، من با برگه ها و اجزای محاوره ای (که معمولاً به آن معین می گویند) رفتم. در اینجا مقداری نشانه گذاری وجود دارد تا حد زیادی از اسناد گرفته شده است:

  General
  Custom
  Advanced
  Disabled

  This is the general tab panel.
  This is the custom tab panel.
  This is the advanced tab panel.
  This is a disabled tab panel.



  Hello World!
  Close




Open Dialog

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

من وقت شما را با اجرای هر اینچ از APIهایی که قبلاً در وب سایت Shoelace به خوبی مستند شده اند، تلف نمی کنم. درعوض، بیایید نحوه تعامل و سفارشی سازی کامل این اجزای وب را بررسی کنیم.

تعامل با API: روش ها و رویدادها

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

زبانهها

جزء برگه ها () دارد show روش، که به صورت دستی یک برگه خاص را نشان می دهد. برای فراخوانی این، باید به عنصر DOM زیرین برگه‌های خود دسترسی داشته باشیم. در Svelte، این به معنای استفاده است bind:this. در React، این یک خواهد بود ref. و غیره. از آنجایی که ما از Svelte استفاده می کنیم، بیایید یک متغیر برای خود اعلام کنیم tabs نمونه، مثال:

  let tabs;

… و آن را ببندید:

اکنون می توانیم یک دکمه برای فراخوانی آن اضافه کنیم:

 tabs.show("custom")}>Show custom

این ایده برای رویدادها یکسان است. یک وجود دارد sl-tab-show واقعه که با نمایش یک برگه جدید فعال می شود. می توانستیم استفاده کنیم addEventListener بر روی ... ما tabs متغیر، یا می توانیم از Svelte's استفاده کنیم on:event-name میانبر.

 console.log(e)}>

این کار می کند و اشیاء رویداد را هنگام نشان دادن تب های مختلف ثبت می کند.

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

گفتگو

جزء محاوره ای () یک را می گیرد open پایه ای که کنترل می کند آیا دیالوگ باز است یا خیر. بیایید آن را در مؤلفه Svelte خود اعلام کنیم:

  let tabs;
  let open = false;

همچنین دارای یک sl-hide رویداد برای زمانی که گفتگو پنهان است. از خودمون بگذریم open نگه دارید و به hide رویداد، بنابراین زمانی که کاربر خارج از محتوای گفتگو کلیک می کند تا آن را ببندیم، می توانیم آن را بازنشانی کنیم. و اجازه دهید یک کنترل کننده کلیک به آن دکمه بستن اضافه کنیم تا ما را تنظیم کنیم open به false، که دیالوگ را نیز می بندد.

 open = false}>
  Hello World!
   open = false}>Close

در نهایت، بیایید دکمه گفتگوی باز خود را سیم کشی کنیم:

 (open = true)}>Open Dialog

همینه که هست. تعامل با API یک کتابخانه جزء کم و بیش ساده است. اگر این همه این پست باشد، بسیار خسته کننده خواهد بود.

اما بند کفش – که با کامپوننت‌های وب ساخته می‌شود – به این معنی است که برخی چیزها، به‌ویژه سبک‌ها، کمی متفاوت از آنچه ممکن است به آن عادت کرده‌ایم کار کنند.

تمام سبک ها را سفارشی کنید!

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

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

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

یک تور سریع از Shadow DOMs

نگاهی به یکی از آن سربرگ‌ها در DevTools خود بیاندازید. باید چیزی شبیه به این باشد:

عنصر برگه ما a ایجاد کرده است div ظرف با یک .tab و .tab--active کلاس و الف tabindex، ضمن اینکه متنی را که برای آن برگه وارد کرده ایم نیز نمایش می دهد. اما توجه کنید که در داخل a نشسته است ریشه سایه. این به نویسندگان مؤلفه وب اجازه می دهد تا نشانه گذاری خود را به مؤلفه وب اضافه کنند و در عین حال مکانی برای محتوا نیز فراهم کنند. we فراهم کند. توجه کنید عنصر؟ این اساساً به این معنی است که «هر محتوایی را که کاربر ارائه کرده است قرار دهید میان تگ های کامپوننت وب اینجا کلیک نمایید"

بنابراین کامپوننت یک ریشه سایه ایجاد می کند، مقداری محتوا به آن اضافه می کند تا سربرگ برگه با استایل زیبا همراه با یک مکان نگهدار ارائه شود () که محتوای ما را در داخل رندر می کند.

سبک های کپسوله شده

یکی از مشکلات کلاسیک و خسته کننده تر در توسعه وب همیشه سبک ها بوده است آبشاری به جاهایی که ما آنها را نمی خواهیم ممکن است نگران باشید که هر سبکی در برنامه ما که چیزی شبیه به آن را مشخص می کند، قانون کند div.tab با این زبانه ها تداخل خواهد داشت. به نظر می رسد که این یک مشکل نیست. ریشه های سایه سبک ها را در بر می گیرند. سبک‌های خارج از ریشه سایه بر آنچه در ریشه سایه است تأثیر نمی‌گذارند (به استثنای برخی موارد که در مورد آنها صحبت خواهیم کرد) و بالعکس.

استثناهای این مورد، سبک های ارثی هستند. شما، البته، نیازی به درخواست a font-family سبک برای هر عنصر در برنامه وب شما. در عوض، شما می توانید خود را مشخص کنید font-family یک بار، در :root or html و آن را در همه جای زیر آن به ارث ببرید. این ارث در واقع ریشه سایه را نیز سوراخ می کند.

ویژگی های سفارشی CSS (که اغلب "متغیرهای css" نامیده می شود) یک استثنا هستند. یک ریشه سایه کاملاً می تواند یک ویژگی CSS را که خارج از ریشه سایه تعریف شده است بخواند. این در یک لحظه مرتبط خواهد شد.

La ::part انتخابگر

در مورد سبک هایی که کار را انجام ندهید به ارث می برند. چه می شود اگر بخواهیم چیزی شبیه به آن را سفارشی کنیم cursor، که ارث نمی برد، روی چیزی در داخل ریشه سایه. آیا ما بد شانس هستیم؟ معلوم شد ما نیستیم نگاهی دیگر به تصویر عنصر تب بالا و ریشه سایه آن بیندازید. توجه کنید part ویژگی بر روی div? این به شما امکان می دهد تا با استفاده از عبارت، آن عنصر را از خارج از ریشه سایه هدف قرار داده و استایل دهید ::part انتخابگر. ما از طریق یک مثال کمی راه رفتن است.

غلبه بر سبک های بند کفش

بیایید هر یک از این رویکردها را در عمل ببینیم. از هم اکنون، زیاد سبک‌های بند کفش، از جمله فونت‌ها، مقادیر پیش‌فرض را از ویژگی‌های سفارشی CSS دریافت می‌کنند. برای تراز کردن آن فونت‌ها با سبک‌های برنامه‌تان، موارد سفارشی مورد نظر را لغو کنید. دیدن اسناد برای اطلاعاتی که Shoelace از کدام متغیرهای CSS استفاده می کند، یا می توانید به سادگی استایل ها را در هر عنصر معینی در DevTools بررسی کنید.

به ارث بردن سبک ها از طریق ریشه سایه

باز کردن app.css فایل در src دایرکتوری از پروژه StackBlitzاست. در :root بخش در پایین، باید a را ببینید letter-spacing: normal; اعلام. از آنجا که letter-spacing ویژگی قابل وراثت است، سعی کنید یک مقدار جدید مانند 2px. در ذخیره، تمام محتوا، از جمله سربرگ های تب که در ریشه سایه تعریف شده اند، مطابق با آن تنظیم می شوند.

رونویسی متغیرهای CSS بند کفش

La جزء یک را می خواند --indicator-color ویژگی سفارشی CSS برای زیر خط برگه فعال. ما می‌توانیم این را با چند CSS اصلی لغو کنیم:

sl-tab-group {
  --indicator-color: green;
}

و دقیقاً مانند آن، ما اکنون یک نشانگر سبز داریم!

استعلام قطعات

در نسخه بند کفشی که من در حال حاضر استفاده می کنم (2.0.0-beta.83)، هر برگه غیرفعال دارای یک pointer مکان نما بیایید آن را به یک مکان نما پیش فرض برای برگه فعال (انتخاب شده) تغییر دهیم. قبلاً دیدیم که عنصر a را اضافه می کند part="base" ویژگی روی کانتینر برای سربرگ برگه. همچنین، تب انتخاب شده در حال حاضر یک را دریافت می کند active صفت. بیایید از این حقایق برای هدف قرار دادن برگه فعال استفاده کنیم و مکان نما را تغییر دهیم:

sl-tab[active]::part(base) {
  cursor: default;
}

همینه که هست!

سفارشی کردن انیمیشن ها

برای کمی روی کیک استعاری، بیایید ببینیم چگونه بند کفش به ما اجازه می‌دهد انیمیشن‌ها را سفارشی کنیم. بند کفش استفاده می کند Web Animations API، و الف را افشا می کند setDefaultAnimation API برای کنترل چگونگی متحرک سازی عناصر مختلف بر تعاملات مختلف آنها. برای جزئیات بیشتر به اسناد مراجعه کنید، اما به عنوان مثال، در اینجا نحوه تغییر انیمیشن گفتگوی پیش‌فرض Shoelace از گسترش به بیرون، و کوچک شدن به داخل، به متحرک شدن از بالا به داخل و در حالی که پنهان می‌شوید، در اینجا آمده است.

import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";

setDefaultAnimation("dialog.show", {
  keyframes: [
    { opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
  ],
  options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
  keyframes: [
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
    { opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
  ],
  options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});

آن کد در App.svelte فایل. برای دیدن انیمیشن اصلی و پیش فرض آن را کامنت کنید.

پسگفتار

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