Đây là một bài về Dây giày, một thư viện thành phần của Cory LaViska, nhưng với một sự thay đổi. Nó xác định tất cả các thành phần UX tiêu chuẩn của bạn: tab, phương thức, đàn accordions, tự động hoàn thành và Nhiều hơn nhiều. Chúng trông rất đẹp khi xuất xưởng, có thể truy cập và hoàn toàn có thể tùy chỉnh. Nhưng thay vì tạo các thành phần này trong React, Solid hoặc Svelte, v.v., nó tạo chúng bằng Thành phần Web; điều này có nghĩa là bạn có thể sử dụng chúng với bất kì khuôn khổ.
Vài điều sơ bộ
Các Thành phần Web rất tuyệt vời, nhưng hiện tại có một số vấn đề nhỏ cần lưu ý.
Phản ứng
Tôi đã nói rằng chúng hoạt động trong bất kỳ khung JavaScript nào, nhưng như tôi đã viết trước đây, sự hỗ trợ của React cho các Thành phần Web là hiện đang nghèo. Để giải quyết vấn đề này, Shoelace thực sự trình bao bọc đã tạo chỉ dành cho React.
Một lựa chọn khác, mà cá nhân tôi thích, là tạo một thành phần React mỏng chấp nhận tên thẻ của Thành phần Web và tất cả các thuộc tính và thuộc tính của nó, sau đó thực hiện công việc xử lý các thiếu sót của React. Tôi đã nói về tùy chọn này trong bài đăng trước. Tôi thích giải pháp này vì nó được thiết kế để xóa. Sự cố về khả năng tương tác của Thành phần Web hiện đã được khắc phục trong nhánh thử nghiệm của React, vì vậy khi nó được xuất xưởng, bất kỳ thành phần tương thích mỏng nào của Thành phần Web mà bạn đang sử dụng đều có thể được tìm kiếm và loại bỏ, để lại cho bạn cách sử dụng Thành phần Web trực tiếp mà không cần bất kỳ trình bao bọc React nào.
Hiển thị phía máy chủ (SSR)
Hỗ trợ cho SSR cũng kém tại thời điểm viết bài này. Về lý thuyết, có một thứ gọi là Shadow DOM khai báo (DSD) sẽ kích hoạt SSR. Nhưng hỗ trợ trình duyệt là rất ít và trong mọi trường hợp, DSD thực sự yêu cầu hỗ trợ máy chủ làm việc đúng, có nghĩa là Sau, Remixhoặc bất cứ thứ gì bạn sử dụng trên máy chủ sẽ cần phải có khả năng xử lý đặc biệt.
Điều đó nói rằng, có những cách khác để đưa Thành phần Web đến chỉ làm việc
với một ứng dụng web SSR với một cái gì đó như Tiếp theo. Phiên bản ngắn gọn là các tập lệnh đăng ký Thành phần Web của bạn cần phải chạy trong tập lệnh chặn trước khi đánh dấu của bạn được phân tích cú pháp. Nhưng đó là một chủ đề cho một bài viết khác.
Tất nhiên, nếu bạn đang xây dựng bất kỳ loại SPA nào do khách hàng trả về, thì đây không phải là vấn đề. Đây là những gì chúng tôi sẽ làm việc với trong bài đăng này.
Hãy bắt đầu
Vì tôi muốn bài đăng này tập trung vào Dây giày và bản chất Thành phần web của nó, tôi sẽ sử dụng Mảnh khảnh cho tất cả. Tôi cũng sẽ sử dụng cái này Dự án Stackblitz để trình diễn. Chúng ta sẽ cùng nhau xây dựng bản demo này theo từng bước, nhưng hãy thoải mái mở REPL đó bất cứ lúc nào để xem kết quả cuối cùng.
Tôi sẽ chỉ cho bạn cách sử dụng Dây giày và quan trọng hơn là cách tùy chỉnh nó. Chúng ta sẽ nói về DOMs bóng tối và những phong cách nào họ chặn từ thế giới bên ngoài (cũng như những phong cách nào họ không). Chúng tôi cũng sẽ nói về ::part Bộ chọn CSS - có thể hoàn toàn mới đối với bạn - và chúng tôi thậm chí sẽ xem cách Shoelace cho phép chúng tôi ghi đè và tùy chỉnh các hoạt ảnh khác nhau của nó.
Nếu bạn thấy mình thích Shoelace sau khi đọc bài đăng này và muốn thử nó trong một dự án React, lời khuyên của tôi là hãy sử dụng một cái bao bọc như tôi đã đề cập trong phần giới thiệu. Điều này sẽ cho phép bạn sử dụng bất kỳ thành phần nào của Shoelace và nó có thể bị xóa hoàn toàn sau khi React gửi các bản sửa lỗi Thành phần Web mà họ đã có (tìm kiếm điều đó trong phiên bản 19).
Giới thiệu dây giày
Dây giày khá chi tiết hướng dẫn cài đặt. Đơn giản nhất, bạn có thể kết xuất và vào tài liệu HTML của bạn, và đó là điều đó. Tuy nhiên, đối với bất kỳ ứng dụng sản xuất nào, bạn có thể chỉ muốn nhập có chọn lọc những gì bạn muốn và cũng có hướng dẫn cho điều đó.
Với Shoelace đã được cài đặt, hãy tạo một thành phần Svelte để hiển thị một số nội dung, sau đó thực hiện các bước để tùy chỉnh hoàn toàn nội dung đó. Để chọn một cái gì đó khá không tầm thường, tôi đã sử dụng các tab và các thành phần hộp thoại (thường được gọi là phương thức). Đây là một số đánh dấu lấy phần lớn từ các tài liệu:
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!
Điều này hiển thị một số tab đẹp, có phong cách. Gạch chân trên tab đang hoạt động thậm chí còn hoạt hình độc đáo và trượt từ tab đang hoạt động này sang tab tiếp theo.
Tôi sẽ không lãng phí thời gian của bạn khi lướt qua từng inch API đã được ghi chép đầy đủ trên trang web Shoelace. Thay vào đó, hãy xem xét cách tốt nhất để tương tác và tùy chỉnh đầy đủ các Thành phần Web này.
Tương tác với API: các phương pháp và sự kiện
Phương thức gọi và đăng ký các sự kiện trên Thành phần Web có thể hơi khác so với những gì bạn đã quen với khuôn khổ lựa chọn thông thường của mình, nhưng nó không quá phức tạp. Hãy xem làm thế nào.
Các Nhãn (Tabs)
Thành phần tab () có một show phương pháp, hiển thị thủ công một tab cụ thể. Để gọi điều này, chúng tôi cần có quyền truy cập vào phần tử DOM cơ bản của các tab của chúng tôi. Trong Svelte, điều đó có nghĩa là sử dụng bind:this. Trong React, nó sẽ là một ref. Và như thế. Vì chúng ta đang sử dụng Svelte, hãy khai báo một biến cho tabs ví dụ:
let tabs;
… Và ràng buộc nó:
Bây giờ chúng ta có thể thêm một nút để gọi nó:
Đó là ý tưởng tương tự cho các sự kiện. Có một sl-tab-show sự kiện sẽ kích hoạt khi một tab mới được hiển thị. Chúng tôi có thể sử dụng addEventListener trên của chúng tôi tabs hoặc chúng ta có thể sử dụng Svelte's on:event-name đường tắt.
console.log(e)}>Điều đó hoạt động và ghi nhật ký các đối tượng sự kiện khi bạn hiển thị các tab khác nhau.
Thông thường, chúng tôi hiển thị các tab và cho phép người dùng nhấp vào giữa chúng, vì vậy công việc này thậm chí không cần thiết, nhưng nó sẽ ở đó nếu bạn cần. Bây giờ chúng ta hãy tương tác với thành phần hộp thoại.
Hộp thoại
Thành phần hộp thoại () mất một open prop điều khiển xem hộp thoại có… mở hay không. Hãy khai báo nó trong thành phần Svelte của chúng ta:
let tabs;
let open = false;
Nó cũng có một sl-hide sự kiện khi hộp thoại bị ẩn. Hãy vượt qua của chúng tôi open chống đỡ và liên kết với hide sự kiện để chúng tôi có thể đặt lại nó khi người dùng nhấp vào bên ngoài nội dung hộp thoại để đóng nó. Và hãy thêm một trình xử lý nhấp chuột vào nút đóng đó để thiết lập open chống đỡ false, điều này cũng sẽ đóng hộp thoại.
open = false}>
Hello World!
Cuối cùng, hãy kết nối nút hộp thoại đang mở của chúng ta:
Và đó là điều đó. Tương tác với API của thư viện thành phần ít nhiều đơn giản. Nếu đó là tất cả những gì bài viết này đã làm, nó sẽ khá nhàm chán.
Nhưng Shoelace - được xây dựng bằng Web Components - có nghĩa là một số thứ, đặc biệt là phong cách, sẽ hoạt động hơi khác một chút so với những gì chúng ta có thể quen làm.
Tùy chỉnh tất cả các phong cách!
Theo văn bản này, Shoelace vẫn đang trong giai đoạn thử nghiệm và người sáng tạo đang xem xét thay đổi một số kiểu mặc định, thậm chí có thể xóa hoàn toàn một số kiểu mặc định để chúng không còn ghi đè kiểu ứng dụng lưu trữ của bạn nữa. Các khái niệm mà chúng tôi sẽ đề cập đều có liên quan theo cả hai cách, nhưng đừng ngạc nhiên nếu một số chi tiết cụ thể về Dây giày mà tôi đề cập sẽ khác khi bạn sử dụng nó.
Cũng đẹp như kiểu mặc định của Shoelace, chúng tôi có thể có thiết kế của riêng mình trong ứng dụng web của mình và chúng tôi sẽ muốn các thành phần UX của chúng tôi phù hợp. Hãy xem chúng ta sẽ thực hiện điều đó như thế nào trong thế giới Thành phần Web.
Chúng tôi sẽ không cố gắng thực sự nâng cao bất cứ điều gì. Người tạo ra Dây giày là một nhà thiết kế giỏi hơn tôi bao giờ hết. Thay vào đó, chúng ta sẽ chỉ xem xét cách thay đổi để bạn có thể thích ứng với các ứng dụng web của riêng mình.
Tham quan nhanh các Shadow DOM
Xem qua một trong các tiêu đề tab đó trong DevTools của bạn; nó sẽ trông giống như thế này:
Phần tử tab của chúng tôi đã tạo ra một div thùng chứa với một .tab và .tab--active lớp học, và một tabindex, đồng thời hiển thị văn bản chúng tôi đã nhập cho tab đó. Nhưng hãy lưu ý rằng nó đang nằm bên trong một gốc bóng tối. Điều này cho phép các tác giả Thành phần Web thêm đánh dấu của riêng họ vào Thành phần Web đồng thời cung cấp một vị trí cho nội dung we cung cấp. Chú ý yếu tố? Về cơ bản, điều đó có nghĩa là “đặt bất kỳ nội dung nào mà người dùng hiển thị giữa các thẻ Thành phần Web tại đây".
Nên thành phần tạo gốc bóng tối, thêm một số nội dung vào nó để hiển thị tiêu đề tab được tạo kiểu độc đáo cùng với trình giữ chỗ () hiển thị nội dung của chúng tôi bên trong.
Các kiểu đóng gói
Một trong những vấn đề cổ điển, khó chịu hơn trong phát triển web luôn là kiểu cascading đến những nơi mà chúng tôi không muốn chúng. Bạn có thể lo lắng rằng bất kỳ quy tắc kiểu nào trong ứng dụng của chúng tôi chỉ định một cái gì đó như div.tab sẽ can thiệp vào các tab này. Hóa ra đây không phải là vấn đề; gốc bóng bao bọc các kiểu. Các kiểu từ bên ngoài gốc bóng tối không ảnh hưởng đến những gì bên trong gốc bóng tối (với một số ngoại lệ mà chúng ta sẽ nói đến) và ngược lại.
Các ngoại lệ cho điều này là các kiểu kế thừa. Tất nhiên, bạn không cần phải áp dụng font-family phong cách cho mọi phần tử trong ứng dụng web của bạn. Thay vào đó, bạn có thể chỉ định font-family một lần, vào :root or html và để nó kế thừa ở khắp mọi nơi bên dưới nó. Sự kế thừa này, trên thực tế, cũng sẽ xuyên qua gốc rễ bóng tối.
Thuộc tính tùy chỉnh CSS (thường được gọi là “biến css”) là một ngoại lệ có liên quan. Một gốc bóng tối hoàn toàn có thể đọc một thuộc tính CSS được xác định bên ngoài gốc bóng tối; điều này sẽ trở nên có liên quan trong giây lát.
Sản phẩm ::part bộ chọn
Còn về phong cách thì sao không thừa kế. Điều gì sẽ xảy ra nếu chúng tôi muốn tùy chỉnh một cái gì đó như cursor, không kế thừa, trên một cái gì đó bên trong gốc bóng tối. Có phải chúng ta đã hết may mắn? Hóa ra chúng tôi không phải. Hãy nhìn lại hình ảnh phần tử tab ở trên và gốc bóng của nó. Chú ý part thuộc tính trên div? Điều đó cho phép bạn nhắm mục tiêu và tạo kiểu cho phần tử đó từ bên ngoài gốc bóng tối bằng cách sử dụng ::part bộ chọn. Chúng tôi sẽ đi qua một ví dụ là một chút.
Ghi đè kiểu dây giày
Hãy xem từng cách tiếp cận này hoạt động. Như bây giờ, rất nhiều kiểu Dây giày, bao gồm cả phông chữ, nhận các giá trị mặc định từ các thuộc tính tùy chỉnh CSS. Để căn chỉnh các phông chữ đó với kiểu ứng dụng của bạn, hãy ghi đè các đạo cụ tùy chỉnh được đề cập. Nhìn thấy tài liệu để biết thông tin về biến CSS nào mà Shoelace đang sử dụng hoặc bạn có thể chỉ cần kiểm tra các kiểu trong bất kỳ phần tử nhất định nào trong DevTools.
Kế thừa các kiểu thông qua gốc bóng
Mở app.css tập tin trong src thư mục của Dự án StackBlitz. Trong :root ở dưới cùng, bạn sẽ thấy letter-spacing: normal; tờ khai. Kể từ khi letter-spacing thuộc tính có thể kế thừa, hãy thử đặt một giá trị mới, như 2px. Khi lưu, tất cả nội dung, bao gồm cả các tiêu đề tab được xác định trong gốc bóng tối, sẽ điều chỉnh cho phù hợp.
Ghi đè các biến CSS Dây giày
Sản phẩm thành phần đọc một --indicator-color Thuộc tính tùy chỉnh CSS cho gạch dưới của tab đang hoạt động. Chúng tôi có thể ghi đè điều này bằng một số CSS cơ bản:
sl-tab-group {
--indicator-color: green;
}Và cứ như vậy, bây giờ chúng ta có một chỉ báo màu xanh lá cây!
Truy vấn các bộ phận
Trong phiên bản Dây giày tôi đang sử dụng (2.0.0-beta.83), bất kỳ tab nào không bị tắt đều có pointer con trỏ. Hãy thay đổi con trỏ đó thành một con trỏ mặc định cho tab đang hoạt động (đã chọn). Chúng tôi đã thấy rằng phần tử thêm một part="base" trên vùng chứa cho tiêu đề tab. Ngoài ra, tab hiện được chọn sẽ nhận được một active thuộc tính. Hãy sử dụng các dữ kiện này để nhắm mục tiêu tab đang hoạt động và thay đổi con trỏ:
sl-tab[active]::part(base) {
cursor: default;
}Và đó là điều đó!
Tùy chỉnh hoạt ảnh
Đối với một số đóng băng trên chiếc bánh ẩn dụ, hãy xem cách Shoelace cho phép chúng tôi tùy chỉnh hoạt ảnh. Dây giày sử dụng API hoạt ảnh trên webvà cho thấy một setDefaultAnimation API để kiểm soát cách các phần tử khác nhau tạo hoạt ảnh cho các tương tác khác nhau của chúng. Xem tài liệu để biết thông tin chi tiết cụ thể, nhưng làm ví dụ, đây là cách bạn có thể thay đổi hoạt ảnh hộp thoại mặc định của Shoelace từ mở rộng ra bên ngoài và thu nhỏ vào trong, thay vào đó là hoạt ảnh từ trên xuống và thả xuống trong khi ẩn.
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)" },
});Mã đó nằm trong App.svelte tập tin. Bình luận nó ra để xem hoạt ảnh gốc, mặc định.
Kết thúc
Shoelace là một thư viện thành phần cực kỳ tham vọng được xây dựng bằng các Thành phần Web. Vì Thành phần Web không phụ thuộc vào khung, nên chúng có thể được sử dụng trong bất kỳ dự án nào, với bất kỳ khung nào. Với các khung công tác mới bắt đầu ra mắt với cả đặc điểm hiệu suất đáng kinh ngạc và cũng như dễ sử dụng, khả năng sử dụng các tiện ích trải nghiệm người dùng chất lượng không bị ràng buộc vào bất kỳ khung công tác nào chưa bao giờ hấp dẫn hơn thế.
