جوتے کا تعارف، ایک فریم ورک سے آزاد جزو پر مبنی UX لائبریری

اس بارے میں ایک پوسٹ ہے۔ جوتے کا فیتا، کی طرف سے ایک جزو لائبریری کوری لا ویسکا، لیکن ایک موڑ کے ساتھ۔ یہ آپ کے تمام معیاری UX اجزاء کی وضاحت کرتا ہے: ٹیبز، ماڈلز، ایکارڈینز، خودکار تکمیل، اور بہت زیادہ، بہت زیادہ. وہ باکس سے باہر خوبصورت نظر آتے ہیں، قابل رسائی اور مکمل طور پر حسب ضرورت ہیں۔ لیکن ان اجزاء کو React، یا Solid، یا Svelte، وغیرہ میں بنانے کے بجائے، یہ ان کے ساتھ تخلیق کرتا ہے۔ ویب اجزاء; اس کا مطلب ہے کہ آپ ان کے ساتھ استعمال کر سکتے ہیں۔ کوئی بھی فریم ورک.

کچھ ابتدائی باتیں

ویب اجزاء بہت اچھے ہیں، لیکن فی الحال کچھ چھوٹی رکاوٹیں ہیں جن سے آگاہ رہنا ہے۔

جواب دیں

میں نے کہا کہ وہ جاوا اسکرپٹ کے کسی بھی فریم ورک میں کام کرتے ہیں، لیکن جیسا کہ میں پہلے لکھ چکا ہوں، ویب اجزاء کے لیے React کی حمایت ہے فی الحال غریب. اس سے نمٹنے کے لیے، اصل میں جوتا ریپرز بنائے صرف ردعمل کے لیے۔

ایک اور آپشن، جو میں ذاتی طور پر پسند کرتا ہوں، یہ ہے کہ ایک پتلا ری ایکٹ کمپوننٹ بنایا جائے جو ویب کمپوننٹ کے ٹیگ نام اور اس کی تمام خصوصیات اور خصوصیات کو قبول کرے، پھر React کی کوتاہیوں کو سنبھالنے کا گندا کام کرتا ہے۔ میں نے اس اختیار کے بارے میں بات کی۔ پچھلے اشاعت میں. مجھے یہ حل پسند ہے کیونکہ اسے حذف کرنے کے لیے ڈیزائن کیا گیا ہے۔ ویب کمپوننٹ انٹرآپریبلٹی کا مسئلہ فی الحال React کی تجرباتی برانچ میں حل کر دیا گیا ہے، لہذا ایک بار بھیجنے کے بعد، آپ جو بھی پتلا Web Component-interoperable component استعمال کر رہے ہیں اسے تلاش کیا جا سکتا ہے، اور ہٹایا جا سکتا ہے، جس سے آپ کو بغیر کسی React ریپرز کے براہ راست ویب اجزاء کے استعمال کے ساتھ چھوڑ دیا جائے گا۔

سرور سائیڈ رینڈرنگ (SSR)

اس تحریر کے وقت ایس ایس آر کی حمایت بھی ناقص ہے۔ نظریہ میں، کچھ کہا جاتا ہے اعلانیہ شیڈو DOM (DSD) جو SSR کو فعال کرے گا۔ لیکن براؤزر کی حمایت کم سے کم ہے، اور کسی بھی صورت میں، DSD کو درحقیقت ضرورت ہوتی ہے۔ سرور کی حمایت صحیح کام کرنا، جس کا مطلب ہے۔ اگلے, ریمکس، یا جو کچھ بھی آپ سرور پر استعمال کرتے ہیں اسے کچھ خاص ہینڈلنگ کے قابل بننے کی ضرورت ہوگی۔

اس نے کہا، ویب اجزاء کو حاصل کرنے کے دوسرے طریقے ہیں۔ صرف کام ایک ایسی ویب ایپ کے ساتھ جو SSR'd ہے Next جیسی چیز کے ساتھ۔ مختصر ورژن یہ ہے کہ آپ کے ویب اجزاء کو رجسٹر کرنے والی اسکرپٹس کو آپ کے مارک اپ کو پارس کرنے سے پہلے بلاکنگ اسکرپٹ میں چلانے کی ضرورت ہے۔ لیکن یہ ایک اور پوسٹ کا موضوع ہے۔

بلاشبہ، اگر آپ کلائنٹ کے ذریعہ فراہم کردہ کسی بھی قسم کا SPA بنا رہے ہیں، تو یہ ایک غیر مسئلہ ہے۔ یہ وہی ہے جس کے ساتھ ہم اس پوسٹ میں کام کریں گے۔

شروع کرتے ہیں

چونکہ میں چاہتا ہوں کہ یہ پوسٹ شولیس اور اس کے ویب اجزاء کی نوعیت پر توجہ مرکوز کرے، میں استعمال کروں گا۔ تیز ہر چیز کے لئے. میں بھی اس کا استعمال کروں گا۔ Stackblitz پروجیکٹ مظاہرے کے لیے. ہم اس ڈیمو کو مل کر، مرحلہ وار بنائیں گے، لیکن حتمی نتیجہ دیکھنے کے لیے کسی بھی وقت اس REPL کو بلا جھجھک کھولیں۔

میں آپ کو دکھاؤں گا کہ شولیس کو کیسے استعمال کیا جائے، اور اس سے بھی اہم بات، اسے کس طرح اپنی مرضی کے مطابق بنایا جائے۔ ہم بات کریں گے۔ شیڈو DOMs اور وہ کون سے اسٹائلز کو بیرونی دنیا سے روکتے ہیں (نیز وہ کون سے نہیں)۔ ہم اس کے بارے میں بھی بات کریں گے۔ ::part CSS سلیکٹر — جو آپ کے لیے بالکل نیا ہو سکتا ہے — اور ہم یہ بھی دیکھیں گے کہ کس طرح Shoelace ہمیں اس کی مختلف اینیمیشنز کو اوور رائیڈ اور اپنی مرضی کے مطابق کرنے کی اجازت دیتا ہے۔

اگر آپ اس پوسٹ کو پڑھنے کے بعد آپ کو شولیس پسند کرتے ہیں اور اسے کسی ری ایکٹ پروجیکٹ میں آزمانا چاہتے ہیں تو میرا مشورہ ہے کہ استعمال کریں۔ ایک چادر جیسا کہ میں نے تعارف میں ذکر کیا ہے۔ یہ آپ کو Shoelace کے کسی بھی اجزاء کو استعمال کرنے کی اجازت دے گا، اور ایک بار React کی طرف سے ویب کمپوننٹ کی ان اصلاحات کو مکمل طور پر ہٹایا جا سکتا ہے جو ان کے پاس پہلے سے موجود ہیں (اسے ورژن 19 میں دیکھیں)۔

جوتے کی پٹی کا تعارف

جوتے کے پٹے میں کافی تفصیل ہے۔ انسٹالیشن کی ہدایات. اس کے سب سے آسان پر، آپ پھینک سکتے ہیں اور آپ کے HTML دستاویز میں ٹیگ کریں، اور بس۔ کسی بھی پروڈکشن ایپ کے لیے، اگرچہ، آپ شاید منتخب طور پر صرف وہی درآمد کرنا چاہیں گے جو آپ چاہتے ہیں، اور اس کے لیے ہدایات بھی موجود ہیں۔

Shoelace انسٹال ہونے کے ساتھ، آئیے کچھ مواد کو رینڈر کرنے کے لیے ایک 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

یہ کچھ اچھے، اسٹائل والے ٹیبز پیش کرتا ہے۔ ایکٹو ٹیب پر انڈر لائن بھی اچھی طرح سے متحرک ہوتی ہے، اور ایک فعال ٹیب سے دوسرے پر سلائیڈ ہوتی ہے۔

میں آپ کا وقت ضائع نہیں کروں گا ہر انچ APIs کے ذریعے چلانے میں جو پہلے سے ہی Shoelace ویب سائٹ پر اچھی طرح سے دستاویزی ہیں۔ اس کے بجائے، آئیے دیکھتے ہیں کہ ان ویب اجزاء کے ساتھ کس طرح بہترین تعامل کیا جائے، اور مکمل طور پر اپنی مرضی کے مطابق بنایا جائے۔

API کے ساتھ تعامل: طریقے اور واقعات

ویب اجزاء پر کال کرنے کے طریقے اور ایونٹس کو سبسکرائب کرنا اس سے تھوڑا مختلف ہو سکتا ہے جو آپ اپنی پسند کے عام فریم ورک کے ساتھ استعمال کرتے ہیں، لیکن یہ زیادہ پیچیدہ نہیں ہے۔ آئیے دیکھتے ہیں کہ کیسے۔

ٹیبز

ٹیبز کا جزو () ایک show طریقہ، جو دستی طور پر ایک خاص ٹیب دکھاتا ہے۔ اسے کال کرنے کے لیے، ہمیں اپنے ٹیبز کے بنیادی DOM عنصر تک رسائی حاصل کرنے کی ضرورت ہے۔ Svelte میں، اس کا مطلب ہے استعمال کرنا bind:this. رد عمل میں، یہ ایک ہو گا۔ ref. اور اسی طرح. چونکہ ہم Svelte استعمال کر رہے ہیں، آئیے اپنے لیے ایک متغیر کا اعلان کرتے ہیں۔ tabs مثال:

  let tabs;

اور اسے باندھیں:

اب ہم اسے کال کرنے کے لیے ایک بٹن شامل کر سکتے ہیں:

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

واقعات کے لیے بھی یہی خیال ہے۔ وہاں ایک sl-tab-show تقریب جب ایک نیا ٹیب دکھایا جاتا ہے تو فائر ہوتا ہے۔ ہم استعمال کر سکتے ہیں addEventListener ہمارے tabs متغیر، یا ہم Svelte's استعمال کر سکتے ہیں۔ on:event-name شارٹ کٹ

 console.log(e)}>

یہ کام کرتا ہے اور ایونٹ کی اشیاء کو لاگ کرتا ہے جیسا کہ آپ مختلف ٹیبز دکھاتے ہیں۔

عام طور پر ہم ٹیبز کو رینڈر کرتے ہیں اور صارف کو ان کے درمیان کلک کرنے دیتے ہیں، اس لیے یہ کام عام طور پر ضروری بھی نہیں ہوتا، لیکن اگر آپ کو ضرورت ہو تو یہ موجود ہے۔ اب آئیے ڈائیلاگ اجزاء کو انٹرایکٹو بنائیں۔

ڈائیلاگ

ڈائیلاگ کا جزو () لیتا ہے ایک open prop جو کنٹرول کرتا ہے کہ آیا ڈائیلاگ… کھلا ہے۔ آئیے اپنے 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 ابھی بھی بیٹا میں ہے اور تخلیق کار کچھ ڈیفالٹ اسٹائلز کو تبدیل کرنے پر غور کر رہا ہے، ممکنہ طور پر کچھ ڈیفالٹس کو یکسر ہٹانے پر بھی غور کر رہا ہے تاکہ وہ آپ کی میزبان ایپلیکیشن کے اسٹائلز کو مزید اوور رائیڈ نہ کریں۔ ہم جن تصورات کا احاطہ کریں گے وہ کسی بھی طرح سے متعلقہ ہیں، لیکن حیران نہ ہوں اگر میں نے جن شولیس کی خصوصیات کا ذکر کیا ہے ان میں سے کچھ مختلف ہیں جب آپ اسے استعمال کرنے جاتے ہیں۔

Shoelace کے پہلے سے طے شدہ انداز جتنے اچھے ہیں، ہماری ویب ایپ میں ہمارے اپنے ڈیزائن ہوسکتے ہیں، اور ہم چاہیں گے کہ ہمارے UX اجزاء مماثل ہوں۔ آئیے دیکھتے ہیں کہ ہم ویب اجزاء کی دنیا میں اس کے بارے میں کیسے جائیں گے۔

ہم اصل میں کوشش نہیں کریں گے۔ کو بہتر بنانے کے کچھ بھی جوتا بنانے والا میرے مقابلے میں کہیں بہتر ڈیزائنر ہے۔ اس کے بجائے، ہم صرف یہ دیکھیں گے کہ کیسے تبدیل چیزیں، تاکہ آپ اپنی ویب ایپس کو اپنا سکیں۔

شیڈو DOMs کا ایک فوری دورہ

اپنے DevTools میں ان میں سے کسی ایک ٹیب ہیڈر پر جھانکیں۔ اسے کچھ اس طرح نظر آنا چاہئے:

ہمارے ٹیب عنصر نے ایک تخلیق کیا ہے۔ div ایک کے ساتھ کنٹینر .tab اور .tab--active کلاس، اور ایک tabindex، اس ٹیب کے لیے ہم نے جو ٹیکسٹ درج کیا ہے اسے بھی ڈسپلے کرتے ہوئے۔ لیکن نوٹ کریں کہ یہ ایک کے اندر بیٹھا ہے۔ سایہ جڑ. یہ ویب اجزاء کے مصنفین کو ویب اجزاء میں اپنا مارک اپ شامل کرنے کی اجازت دیتا ہے جبکہ مواد کے لیے جگہ بھی فراہم کرتا ہے۔ we فراہم کریں نوٹس عنصر؟ اس کا بنیادی مطلب ہے "جو بھی مواد صارف نے پیش کیا ہے اسے ڈالیں۔ کے درمیان ویب اجزاء کے ٹیگز یہاں".

تو جزو ایک شیڈو روٹ بناتا ہے، اس میں کچھ مواد شامل کرتا ہے تاکہ پلیس ہولڈر کے ساتھ عمدہ انداز والے ٹیب ہیڈر () جو ہمارے مواد کو اندر فراہم کرتا ہے۔

encapsulated سٹائل

ویب ڈویلپمنٹ میں کلاسک، زیادہ مایوس کن مسائل میں سے ایک ہمیشہ سٹائل رہا ہے۔ جھرن کاری ان جگہوں پر جہاں ہم انہیں نہیں چاہتے۔ آپ کو فکر ہو سکتی ہے کہ ہماری ایپلی کیشن میں کوئی بھی طرز کے اصول جو کچھ اس طرح کی وضاحت کرتے ہیں۔ div.tab ان ٹیبز کے ساتھ مداخلت کرے گا۔ یہ پتہ چلتا ہے کہ یہ کوئی مسئلہ نہیں ہے؛ سائے کی جڑیں شیلیوں کو سمیٹتی ہیں۔ شیڈو روٹ کے باہر کی طرزیں شیڈو روٹ کے اندر کی چیزوں کو متاثر نہیں کرتی ہیں (کچھ استثناء کے ساتھ جن کے بارے میں ہم بات کریں گے) اور اس کے برعکس۔

اس میں مستثنیات موروثی طرزیں ہیں۔ آپ کو، یقیناً، درخواست دینے کی ضرورت نہیں ہے۔ font-family آپ کی ویب ایپ میں ہر عنصر کے لیے اسٹائل۔ اس کے بجائے، آپ اپنی وضاحت کر سکتے ہیں۔ font-family ایک بار، پر :root or html اور اسے اس کے نیچے ہر جگہ وراثت میں حاصل کریں۔ یہ وراثت درحقیقت سائے کی جڑ کو بھی چھید دے گی۔

CSS حسب ضرورت خصوصیات (اکثر "css متغیرات" کہا جاتا ہے) ایک متعلقہ استثناء ہے۔ شیڈو روٹ بالکل سی ایس ایس پراپرٹی کو پڑھ سکتا ہے جس کی تعریف شیڈو روٹ سے باہر کی گئی ہے۔ یہ ایک لمحے میں متعلقہ ہو جائے گا.

۔ ::part سلیکٹر

کہ سٹائل کے بارے میں کیا کیا وراثت اگر ہم کسی چیز کو اپنی مرضی کے مطابق بنانا چاہتے ہیں۔ cursor، جو وراثت میں نہیں ملتی ہے، شیڈو جڑ کے اندر کی کسی چیز پر۔ کیا ہم قسمت سے باہر ہیں؟ یہ پتہ چلتا ہے کہ ہم نہیں ہیں. اوپر ٹیب عنصر کی تصویر اور اس کے شیڈو روٹ پر ایک اور نظر ڈالیں۔ نوٹس part پر وصف div? یہ آپ کو شیڈو روٹ کے باہر سے اس عنصر کو ٹارگٹ اور اسٹائل کرنے کی اجازت دیتا ہے۔ ::part سلیکٹر. ہم ایک مثال کے ذریعے چلیں گے تھوڑا سا ہے.

اوور رائیڈنگ جوتے کے سٹائلز

آئیے ان طریقوں میں سے ہر ایک کو عمل میں دیکھیں۔ اب کے طور پر، بہت زیادہ جوتے کے شیلیوں کے، بشمول فونٹس، CSS حسب ضرورت خصوصیات سے پہلے سے طے شدہ اقدار حاصل کرتے ہیں۔ ان فونٹس کو اپنی ایپلیکیشن کے اسٹائل کے ساتھ سیدھ میں کرنے کے لیے، زیر بحث حسب ضرورت پرپس کو اوور رائیڈ کریں۔ دیکھیں دستاویزات اس معلومات کے لیے کہ کون سی ایس ایس ویری ایبلز Shoelace استعمال کر رہا ہے، یا آپ DevTools میں کسی بھی عنصر میں اسٹائل کا معائنہ کر سکتے ہیں۔

شیڈو روٹ کے ذریعے شیلیوں کو وراثت میں ملانا

کھولو app.css میں دائر src کی ڈائریکٹری StackBlitz پروجیکٹ. میں :root نچلے حصے میں، آپ کو ایک دیکھنا چاہئے letter-spacing: normal; اعلان جب سے letter-spacing پراپرٹی وراثت میں ملتی ہے، ایک نئی قدر ترتیب دینے کی کوشش کریں، جیسے 2px. محفوظ کرنے پر، تمام مواد، بشمول شیڈو روٹ میں بیان کردہ ٹیب ہیڈر، اس کے مطابق ایڈجسٹ ہو جائیں گے۔

Shoelace CSS متغیرات کو اوور رائٹنگ کرنا

۔ جزو ایک پڑھتا ہے۔ --indicator-color فعال ٹیب کی انڈر لائن کے لیے CSS کسٹم پراپرٹی۔ ہم اسے کچھ بنیادی CSS کے ساتھ اوور رائیڈ کر سکتے ہیں:

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

اور بالکل اسی طرح، اب ہمارے پاس سبز اشارے ہے!

حصوں کے بارے میں پوچھ گچھ

Shoelace کے ورژن میں جو میں ابھی استعمال کر رہا ہوں (2.0.0-beta.83)، کسی بھی غیر معذور ٹیب میں pointer کرسر آئیے اسے فعال (منتخب) ٹیب کے لیے ڈیفالٹ کرسر میں تبدیل کریں۔ ہم نے پہلے ہی دیکھا ہے کہ عنصر شامل کرتا ہے a part="base" ٹیب ہیڈر کے لیے کنٹینر پر انتساب۔ نیز، فی الحال منتخب کردہ ٹیب کو ایک موصول ہوتا ہے۔ active وصف. آئیے ان حقائق کو فعال ٹیب کو نشانہ بنانے کے لیے استعمال کریں، اور کرسر کو تبدیل کریں:

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

اور وہ ہے!

متحرک تصاویر کو حسب ضرورت بنانا

استعاراتی کیک پر کچھ آئسنگ کے لیے، آئیے دیکھتے ہیں کہ کس طرح شولیس ہمیں متحرک تصاویر کو اپنی مرضی کے مطابق بنانے کی اجازت دیتا ہے۔ جوتے کا لیس استعمال کرتا ہے۔ ویب اینیمیشن API، اور بے نقاب کرتا ہے a setDefaultAnimation API کو کنٹرول کرنے کے لیے کہ مختلف عناصر اپنے مختلف تعاملات کو کس طرح متحرک کرتے ہیں۔ تفصیلات کے لیے دستاویزات دیکھیں، لیکن مثال کے طور پر، یہاں یہ ہے کہ آپ شولیس کے پہلے سے طے شدہ ڈائیلاگ اینیمیشن کو باہر کی طرف پھیلنے، اور اندر کی طرف سکڑنے کے بجائے اوپر سے اینیمیٹ کرنے، اور چھپتے ہوئے نیچے گرنے کے لیے کیسے تبدیل کر سکتے ہیں۔

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 فائل اصل، ڈیفالٹ اینیمیشن دیکھنے کے لیے اس پر تبصرہ کریں۔

اپ ریپنگ

Shoelace ایک ناقابل یقین حد تک مہتواکانکشی جزو لائبریری ہے جو Web Components کے ساتھ بنائی گئی ہے۔ چونکہ ویب اجزاء فریم ورک سے آزاد ہیں، اس لیے وہ کسی بھی منصوبے میں، کسی بھی فریم ورک کے ساتھ استعمال کیے جا سکتے ہیں۔ شاندار کارکردگی کی خصوصیات اور استعمال میں آسانی دونوں کے ساتھ نئے فریم ورک سامنے آنا شروع ہونے کے ساتھ، معیاری صارف کے تجربے والے ویجٹس کو استعمال کرنے کی صلاحیت جو کسی ایک فریم ورک سے منسلک نہیں ہیں، اس سے زیادہ مجبور کبھی نہیں رہا۔