ขอแนะนำ Shoelace ไลบรารี UX ที่ใช้คอมโพเนนต์เฟรมเวิร์กอิสระ

นี่คือโพสต์เกี่ยวกับ เชือกผูกรองเท้า, ไลบรารีส่วนประกอบโดย คอรี่ ลาวิสก้าแต่ด้วยความบิดเบี้ยว มันกำหนดส่วนประกอบ UX มาตรฐานทั้งหมดของคุณ: แท็บ โมดัล หีบเพลง การเติมข้อความอัตโนมัติ และ มากยิ่งขึ้น. พวกมันดูสวยงามเมื่อแกะกล่อง เข้าถึงได้ และปรับแต่งได้อย่างเต็มที่ แต่แทนที่จะสร้างส่วนประกอบเหล่านี้ใน React หรือ Solid หรือ Svelte ฯลฯ มันสร้างส่วนประกอบเหล่านี้ด้วย ส่วนประกอบของเว็บ; ซึ่งหมายความว่าคุณสามารถใช้กับ ใด กรอบ.

บางอย่างเบื้องต้น

Web Components นั้นยอดเยี่ยม แต่ขณะนี้มีปัญหาเล็กๆ น้อยๆ ที่ควรทราบ

เกิดปฏิกิริยา

ฉันบอกว่ามันทำงานในกรอบงาน JavaScript ใดก็ได้ แต่อย่างที่ฉันเขียนไว้ก่อนหน้านี้ การรองรับ Web Components ของ React นั้น ปัจจุบันยากจน. เพื่อแก้ปัญหานี้ เชือกผูกรองเท้าจริงๆ ห่อที่สร้างขึ้น สำหรับ React เท่านั้น

อีกทางเลือกหนึ่งที่ฉันชอบโดยส่วนตัวคือการสร้างส่วนประกอบ React แบบบางที่ยอมรับชื่อแท็กของ Web Component รวมถึงคุณลักษณะและคุณสมบัติทั้งหมด จากนั้นจึงจัดการข้อบกพร่องของ React ที่สกปรก ฉันพูดถึงตัวเลือกนี้แล้ว ในโพสต์ก่อนหน้านี้. ฉันชอบโซลูชันนี้เพราะมันออกแบบมาเพื่อให้ลบ ปัญหาการทำงานร่วมกันของ Web Component ได้รับการแก้ไขแล้วในสาขาทดลองของ React ดังนั้นเมื่อจัดส่งแล้ว ส่วนประกอบที่ทำงานร่วมกันของ Web Component แบบบางใดๆ ที่คุณใช้อยู่จะถูกค้นหาและลบออก ทำให้คุณใช้งาน Web Component โดยตรง โดยไม่ต้องมี React wrappers

การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR)

การสนับสนุน SSR ก็ไม่ดีเช่นกันในขณะที่เขียนบทความนี้ ตามทฤษฎี มีสิ่งที่เรียกว่า ประกาศ Shadow DOM (DSD) ซึ่งจะเปิดใช้งาน SSR แต่การรองรับเบราว์เซอร์นั้นน้อยมาก และไม่ว่าในกรณีใด DSD ก็ต้องการจริงๆ รองรับเซิร์ฟเวอร์ ทำงานถูกต้อง ซึ่งหมายความว่า ถัดไป, โภชนาการหรืออะไรก็ตามที่คุณใช้บนเซิร์ฟเวอร์จะต้องมีความสามารถในการจัดการพิเศษบางอย่าง

ที่กล่าวว่ามีวิธีอื่นในการรับ Web Components ไปที่ เพียงแค่ทำงาน ด้วยเว็บแอปที่มี SSR กับสิ่งที่ต้องการถัดไป เวอร์ชันสั้นคือสคริปต์ที่ลงทะเบียน Web Components ของคุณต้องทำงานในสคริปต์การบล็อกก่อนที่จะแยกวิเคราะห์มาร์กอัปของคุณ แต่นั่นเป็นหัวข้อสำหรับโพสต์อื่น

แน่นอน หากคุณกำลังสร้าง SPA ที่ส่งโดยลูกค้า นี่ไม่ใช่ปัญหา นี่คือสิ่งที่เราจะทำงานในโพสต์นี้

เริ่มกันเลย

เนื่องจากฉันต้องการให้โพสต์นี้เน้นที่เชือกผูกรองเท้าและลักษณะของส่วนประกอบเว็บ ฉันจะใช้ ฉลาด สำหรับทุกอย่าง. ฉันจะใช้สิ่งนี้ด้วย โครงการ Stackblitz เพื่อการสาธิต เราจะสร้างการสาธิตนี้ร่วมกันทีละขั้นตอน แต่อย่าลังเลที่จะเปิด REPL นั้นได้ทุกเมื่อเพื่อดูผลลัพธ์สุดท้าย

ฉันจะแสดงวิธีใช้เชือกผูกรองเท้าให้คุณดู และที่สำคัญกว่านั้นคือวิธีปรับแต่งเชือกรองเท้า เราจะพูดถึง Shadow DOM และสไตล์ที่พวกเขาบล็อกจากโลกภายนอก (รวมถึงสไตล์ที่พวกเขาไม่ทำ) นอกจากนี้เรายังจะพูดคุยเกี่ยวกับ ::part ตัวเลือก CSS ซึ่งอาจเป็นเรื่องใหม่สำหรับคุณ และเราจะได้เห็นวิธีที่ Shoelace อนุญาตให้เราแทนที่และปรับแต่งแอนิเมชั่นต่างๆ

หากคุณพบว่าคุณชอบ Shoelace หลังจากอ่านโพสต์นี้และต้องการลองใช้ในโครงการ React คำแนะนำของฉันคือใช้ กระดาษห่อ อย่างที่ผมกล่าวไว้ในบทนำ สิ่งนี้จะช่วยให้คุณใช้ส่วนประกอบใดๆ ของ Shoelace ได้ และสามารถลบออกได้ทั้งหมดเมื่อ React ส่งการแก้ไข Web Component ที่มีอยู่แล้ว (มองหาสิ่งนั้นในเวอร์ชัน 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

ทำให้มีแท็บที่มีสไตล์และสวยงาม ขีดเส้นใต้บนแท็บที่ใช้งานอยู่จะเคลื่อนไหวอย่างสวยงาม และเลื่อนจากแท็บที่ใช้งานอยู่หนึ่งไปยังแท็บถัดไป

ฉันจะไม่เสียเวลาของคุณในการรัน API ทุกตารางนิ้วที่มีเอกสารประกอบไว้อย่างดีบนเว็บไซต์ Shoelace ให้มาดูวิธีที่ดีที่สุดในการโต้ตอบและปรับแต่ง Web Components เหล่านี้อย่างเต็มที่

การโต้ตอบกับ API: เมธอดและเหตุการณ์

วิธีการเรียกและการสมัครเข้าร่วมกิจกรรมบน Web Component อาจแตกต่างไปจากสิ่งที่คุณเคยชินกับกรอบงานปกติที่คุณเลือกเล็กน้อย แต่ก็ไม่ซับซ้อนเกินไป มาดูกันว่าเป็นอย่างไร

แท็บ

ส่วนประกอบแท็บ () มี 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 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 ของไลบรารีส่วนประกอบนั้นตรงไปตรงมาไม่มากก็น้อย ถ้าตั้งกระทู้ได้แค่นี้ก็น่าเบื่อมาก

แต่เชือกผูกรองเท้าที่ถูกสร้างขึ้นด้วย Web Components หมายความว่าบางสิ่ง โดยเฉพาะอย่างยิ่ง สไตล์ จะทำงานแตกต่างไปจากที่เราคุ้นเคยเล็กน้อย

ปรับแต่งสไตล์ทั้งหมด!

ในการเขียนนี้ Shoelace ยังอยู่ในช่วงเบต้าและผู้สร้างกำลังพิจารณาที่จะเปลี่ยนรูปแบบเริ่มต้นบางรูปแบบ และอาจลบค่าเริ่มต้นบางส่วนออกไปทั้งหมด เพื่อไม่ให้แทนที่รูปแบบแอปพลิเคชันโฮสต์ของคุณอีกต่อไป แนวคิดที่เราจะกล่าวถึงนั้นมีความเกี่ยวข้องกันไม่ว่าจะด้วยวิธีใด แต่อย่าแปลกใจหากข้อมูลเฉพาะของเชือกผูกรองเท้าที่ฉันพูดถึงนั้นแตกต่างออกไปเมื่อคุณใช้งาน

สไตล์เริ่มต้นของ Shoelace ดีพอๆ กับที่เราออกแบบเองในเว็บแอปของเรา และเราต้องการให้องค์ประกอบ UX ของเราตรงกัน มาดูกันว่าเราจะทำอย่างไรในโลกของ Web Components

เราจะไม่พยายามจริงๆ ปรับปรุง อะไรก็ตาม. ผู้สร้าง Shoelace เป็นนักออกแบบที่ดีกว่าที่ฉันเคยเป็น เราจะมาดูวิธีการ เปลี่ยนแปลง ต่างๆ เพื่อให้คุณสามารถปรับให้เข้ากับเว็บแอปของคุณเองได้

ทัวร์ชม Shadow DOM อย่างรวดเร็ว

ลองดูที่ส่วนหัวของแท็บเหล่านั้นใน DevTools ของคุณ ควรมีลักษณะดังนี้:

องค์ประกอบแท็บของเราได้สร้าง a div ภาชนะที่มี .tab และ .tab--active ชั้นเรียน และ a tabindexในขณะที่แสดงข้อความที่เราป้อนสำหรับแท็บนั้นด้วย แต่สังเกตว่ามันนั่งอยู่ข้างในของ รากเงา. ซึ่งช่วยให้ผู้เขียน Web Component สามารถเพิ่มมาร์กอัปของตนเองลงใน Web Component ในขณะเดียวกันก็ให้ที่สำหรับเนื้อหา we จัดเตรียม. สังเกต ธาตุ? โดยพื้นฐานแล้วหมายความว่า "ใส่เนื้อหาใดก็ตามที่ผู้ใช้แสดงผล ระหว่าง แท็กคอมโพเนนต์ของเว็บ โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม".

ดังนั้น คอมโพเนนต์จะสร้างเงาราก เพิ่มเนื้อหาบางส่วนเพื่อแสดงส่วนหัวของแท็บที่มีสไตล์อย่างสวยงามพร้อมกับตัวยึดตำแหน่ง () ที่ทำให้เนื้อหาของเราอยู่ภายใน

รูปแบบห่อหุ้ม

หนึ่งในปัญหาที่คลาสสิกและน่าผิดหวังมากขึ้นในการพัฒนาเว็บคือรูปแบบเสมอ ซ้อน ไปยังสถานที่ที่เราไม่ต้องการ คุณอาจกังวลว่ากฎของสไตล์ในแอปพลิเคชันของเราซึ่งระบุบางสิ่งเช่น div.tab จะรบกวนแท็บเหล่านี้ ปรากฎว่านี่ไม่ใช่ปัญหา รากเงาห่อหุ้มรูปแบบต่างๆ สไตล์จากนอกรูทของเงาจะไม่มีผลกับสิ่งที่อยู่ภายในรูทของเงา (เราจะพูดถึงข้อยกเว้นบางประการ) และในทางกลับกัน

ข้อยกเว้นคือรูปแบบที่สืบทอดได้ แน่นอนว่าคุณไม่จำเป็นต้องสมัคร a font-family สไตล์สำหรับทุกองค์ประกอบในเว็บแอปของคุณ คุณสามารถระบุ .ของคุณแทน font-family ครั้งหนึ่งเมื่อ :root or html และสืบทอดไปทุกหนทุกแห่งที่อยู่เบื้องล่าง อันที่จริงมรดกนี้จะเจาะรากเงาเช่นกัน

คุณสมบัติที่กำหนดเอง CSS (มักเรียกว่า “ตัวแปร css”) เป็นข้อยกเว้นที่เกี่ยวข้อง รูทของเงาสามารถอ่านคุณสมบัติ CSS ที่กำหนดไว้ภายนอกรูทของเงาได้อย่างแน่นอน สิ่งนี้จะมีความเกี่ยวข้องในอีกสักครู่

พื้นที่ ::part ผู้เลือก

แล้วสไตล์นั้นล่ะ ทำไม่ได้ สืบทอด จะเป็นอย่างไรถ้าเราต้องการปรับแต่งบางอย่างเช่น cursorซึ่งไม่ได้สืบทอดมาจากบางสิ่งภายในรูทของเงา เราโชคไม่ดีหรือไม่? ปรากฎว่าเราไม่ใช่ ดูรูปภาพองค์ประกอบแท็บด้านบนและรูทของเงาอีกครั้ง สังเกต part คุณลักษณะบน div? ที่ช่วยให้คุณกำหนดเป้าหมายและจัดรูปแบบองค์ประกอบนั้นจากภายนอกรูทเงาโดยใช้ ::part ผู้เลือก. เราจะพูดถึงตัวอย่างเล็กน้อย

เอาชนะสไตล์เชือกผูกรองเท้า

มาดูแนวทางปฏิบัติแต่ละข้อกัน ณ ขณะนี้, มาก ของสไตล์เชือกผูกรองเท้า รวมถึงแบบอักษร จะได้รับค่าเริ่มต้นจากคุณสมบัติที่กำหนดเองของ CSS หากต้องการจัดแบบอักษรเหล่านั้นให้เข้ากับสไตล์แอปพลิเคชันของคุณ ให้แทนที่อุปกรณ์ประกอบฉากที่กำหนดเองที่เป็นปัญหา ดู เอกสาร สำหรับข้อมูลที่เชือกผูกรองเท้าใช้ตัวแปร CSS หรือคุณสามารถตรวจสอบสไตล์ในองค์ประกอบที่กำหนดใน DevTools

สืบทอดสไตล์ผ่านรูตเงา

เปิด app.css แฟ้มใน src ไดเรกทอรีของ โครงการ StackBlitz. ใน :root ที่ด้านล่าง คุณจะเห็น a letter-spacing: normal; ประกาศ ตั้งแต่ letter-spacing คุณสมบัติเป็นมรดกได้ลองตั้งค่าใหม่เช่น 2px. เมื่อบันทึก เนื้อหาทั้งหมด รวมถึงส่วนหัวของแท็บที่กำหนดไว้ใน shadow root จะปรับตามนั้น

การเขียนทับตัวแปร CSS ของเชือกผูกรองเท้า

พื้นที่ ส่วนประกอบอ่าน an --indicator-color คุณสมบัติที่กำหนดเอง CSS สำหรับการขีดเส้นใต้ของแท็บที่ใช้งานอยู่ เราสามารถแทนที่สิ่งนี้ด้วย CSS พื้นฐาน:

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

และตอนนี้เรามีตัวบ่งชี้สีเขียวแล้ว!

สอบถามอะไหล่

ในเวอร์ชันของ Shoelace ที่ฉันใช้อยู่ตอนนี้ (2.0.0-beta.83) แท็บที่ไม่ปิดใช้งานจะมี pointer เคอร์เซอร์. มาเปลี่ยนเป็นเคอร์เซอร์เริ่มต้นสำหรับแท็บที่ใช้งานอยู่ (ที่เลือก) เราได้เห็นแล้วว่า องค์ประกอบเพิ่ม a part="base" แอตทริบิวต์บนคอนเทนเนอร์สำหรับส่วนหัวของแท็บ นอกจากนี้ แท็บที่เลือกในปัจจุบันจะได้รับ an active คุณลักษณะ. ลองใช้ข้อเท็จจริงเหล่านี้เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่ และเปลี่ยนเคอร์เซอร์:

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

และนั่นแหละ!

การปรับแต่งแอนิเมชั่น

สำหรับไอซิ่งบนเค้กเปรียบเทียบ มาดูกันว่า Shoelace ช่วยให้เราปรับแต่งแอนิเมชั่นได้อย่างไร เชือกผูกรองเท้าใช้ เว็บแอนิเมชั่น 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 เนื่องจาก Web Components ไม่ขึ้นกับเฟรมเวิร์ก จึงสามารถใช้ในโปรเจ็กต์ใดก็ได้ กับเฟรมเวิร์กใดก็ได้ ด้วยเฟรมเวิร์กใหม่ๆ ที่เริ่มออกมาพร้อมทั้งคุณลักษณะด้านประสิทธิภาพที่น่าทึ่งและการใช้งานง่าย ความสามารถในการใช้วิดเจ็ตประสบการณ์ผู้ใช้ที่มีคุณภาพซึ่งไม่ได้ผูกติดอยู่กับเฟรมเวิร์กใด ๆ ที่ไม่เคยมีมาก่อน