에 대한 포스팅입니다 신발 끈, 구성 요소 라이브러리 코리 라비스카, 하지만 반전이 있습니다. 탭, 모달, 아코디언, 자동 완성 및 훨씬, 훨씬 더. 상자에서 꺼내자마자 아름답게 보이고 액세스가 가능하며 완전히 사용자 정의할 수 있습니다. 그러나 이러한 구성 요소를 React, Solid 또는 Svelte 등에서 생성하는 대신 다음을 사용하여 생성합니다. 웹 컴포넌트; 이것은 당신이 그들을 사용할 수 있음을 의미합니다 어떤 뼈대.
몇 가지 예비 사항
웹 구성 요소는 훌륭하지만 현재 알아야 할 몇 가지 작은 문제가 있습니다.
반응
모든 JavaScript 프레임워크에서 작동한다고 말했지만 이전에 작성한 것처럼 웹 구성 요소에 대한 React의 지원은 현재 가난한. 이를 해결하기 위해 신발끈은 실제로 생성된 래퍼 단지 React를 위한 것입니다.
개인적으로 좋아하는 또 다른 옵션은 웹 구성 요소의 태그 이름과 모든 속성 및 속성을 허용하는 얇은 React 구성 요소를 만든 다음 React의 단점을 처리하는 더러운 작업을 수행하는 것입니다. 이 옵션에 대해 이야기했습니다. 이전 게시물. 삭제하도록 설계되었기 때문에 이 솔루션이 마음에 듭니다. 웹 구성 요소 상호 운용성 문제는 현재 React의 실험 분기에서 수정되었으므로 일단 출시되면 사용 중인 웹 구성 요소와 상호 운용 가능한 모든 얇은 구성 요소를 검색하고 제거할 수 있으므로 React 래퍼 없이도 웹 구성 요소를 직접 사용할 수 있습니다.
서버 측 렌더링 (SSR)
이 글을 쓰는 시점에서 SSR에 대한 지원도 좋지 않습니다. 이론상으로는 선언적 Shadow DOM (DSD) SSR을 활성화합니다. 그러나 브라우저 지원은 최소한이며 어떤 경우에도 DSD는 실제로 서버 지원 제대로 작동하다, 즉 다음 보기, 리믹스, 또는 서버에서 사용하는 모든 것은 특별한 처리가 가능해야 합니다.
즉, 웹 구성 요소를 그냥 일이야
다음과 같은 것으로 SSR된 웹 앱으로. 짧은 버전은 웹 구성 요소를 등록하는 스크립트가 마크업이 구문 분석되기 전에 차단 스크립트에서 실행되어야 한다는 것입니다. 그러나 그것은 다른 게시물의 주제입니다.
물론 클라이언트 렌더링 SPA를 구축하는 경우에는 문제가 되지 않습니다. 이것이 이 포스트에서 다룰 내용입니다.
시작하자
이 게시물이 신발끈과 웹 구성 요소 특성에 초점을 맞추기를 원하므로 다음을 사용할 것입니다. 날씬한 모두를위한. 나도 이거 써볼게 스택블리츠 프로젝트 시연을 위해. 이 데모를 단계별로 함께 구축할 것이지만 언제든지 REPL을 열어 최종 결과를 확인하십시오.
신발끈을 사용하는 방법과 더 중요한 것은 사용자 정의하는 방법을 보여 드리겠습니다. 우리는에 대해 이야기 할 것입니다 섀도우 DOM 외부 세계에서 차단하는 스타일(및 차단하지 않는 스타일). 우리는 또한 ::part 완전히 새로운 CSS 선택기이며 Shoelace를 사용하여 다양한 애니메이션을 재정의하고 사용자 지정할 수 있는 방법도 살펴보겠습니다.
이 게시물을 읽은 후 Shoelace가 마음에 들고 React 프로젝트에서 시도하고 싶다면 제 조언은 다음을 사용하는 것입니다. 포장지 소개에서 언급했듯이. 이렇게 하면 Shoelac의 구성 요소 중 하나를 사용할 수 있으며 React가 이미 있는 웹 구성 요소 수정 사항을 제공하면 완전히 제거할 수 있습니다(버전 19에서 찾으십시오).
신발끈 소개
신발끈은 상당히 디테일합니다 설치 지침. 가장 간단하게 덤프할 수 있습니다. 과 HTML 문서에 태그를 추가하면 됩니다. 그러나 모든 프로덕션 앱의 경우 원하는 항목만 선택적으로 가져오기를 원할 것이며 이에 대한 지침도 있습니다.
Shoerace가 설치된 상태에서 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!
이것은 멋지고 스타일이 지정된 탭을 렌더링합니다. 활성 탭의 밑줄도 멋지게 움직이며 활성 탭에서 다음 탭으로 이동합니다.
Shoelace 웹 사이트에 이미 잘 문서화되어 있는 API의 모든 부분을 실행하는 데 시간을 낭비하지 않을 것입니다. 대신 이러한 웹 구성 요소와 상호 작용하고 완전히 사용자 지정하는 방법을 살펴보겠습니다.
API와 상호 작용: 메서드 및 이벤트
웹 구성 요소에서 메서드를 호출하고 이벤트를 구독하는 것은 일반적인 프레임워크 선택과 약간 다를 수 있지만 그렇게 복잡하지는 않습니다. 방법을 봅시다.
탭
탭 구성 요소()에는 show 방법, 특정 탭을 수동으로 표시합니다. 이것을 호출하려면 탭의 기본 DOM 요소에 액세스해야 합니다. Svelte에서는 다음을 의미합니다. bind:this. React에서는 ref. 등등. Svelte를 사용하고 있으므로 변수를 선언해 보겠습니다. tabs 예:
let tabs;
... 그리고 바인딩:
이제 버튼을 추가하여 호출할 수 있습니다.
이벤트도 마찬가지입니다. 거기에 sl-tab-show event 새 탭이 표시될 때 발생합니다. 우리는 사용할 수 있습니다 addEventListener 우리에 tabs 변수 또는 Svelte의 on:event-name 지름길.
console.log(e)}>다른 탭을 표시할 때 작동하고 이벤트 개체를 기록합니다.
일반적으로 우리는 탭을 렌더링하고 사용자가 탭 사이를 클릭할 수 있도록 하므로 이 작업은 일반적으로 필요하지 않지만 필요한 경우 있습니다. 이제 대화형 구성 요소를 가져오겠습니다.
대화
대화 구성 요소() 걸립니다 open 대화 상자가 열려 있는지 여부를 제어하는 prop. Svelte 구성 요소에서 선언해 보겠습니다.
let tabs;
let open = false;
또한 sl-hide 대화 상자가 숨겨져 있을 때의 이벤트입니다. 패스하자 우리 open 소품 및 바인딩 hide 사용자가 대화 상자 콘텐츠 외부를 클릭하여 닫을 때 이벤트를 재설정할 수 있도록 합니다. 닫기 버튼에 클릭 핸들러를 추가하여 open 소품 false, 대화 상자도 닫힙니다.
open = false}>
Hello World!
마지막으로 대화 상자 열기 버튼을 연결해 보겠습니다.
그게 다야. 구성 요소 라이브러리의 API와 상호 작용하는 것은 다소 간단합니다. 이 포스팅이 전부였다면 상당히 지루할 것입니다.
그러나 웹 구성 요소로 구축된 신발끈은 일부 항목, 특히 스타일이 우리가 익숙했던 것과 약간 다르게 작동한다는 것을 의미합니다.
모든 스타일을 사용자 정의하십시오!
이 글을 쓰는 시점에서 Shoelace는 아직 베타 버전이며 제작자는 일부 기본 스타일을 변경하는 것을 고려하고 있으며 일부 기본값을 완전히 제거하여 더 이상 호스트 응용 프로그램의 스타일을 무시하지 않을 수도 있습니다. 우리가 다룰 개념은 어느 쪽이든 관련이 있지만 내가 언급한 신발끈 세부 사항 중 일부가 사용하려고 할 때 다르다고 해도 놀라지 마십시오.
Shoelace의 기본 스타일이 훌륭하지만 웹 앱에 자체 디자인이 있을 수 있으며 UX 구성 요소가 일치하기를 원할 것입니다. 웹 컴포넌트 세계에서 어떻게 되는지 봅시다.
우리는 실제로 시도하지 않을 것입니다 개선 아무것. 신발끈 제작자는 저보다 훨씬 더 나은 디자이너입니다. 대신 이전 단계로 돌아가기 자신의 웹 앱에 적응할 수 있습니다.
Shadow DOM의 빠른 둘러보기
DevTools에서 해당 탭 헤더 중 하나를 살펴보십시오. 다음과 같이 보여야 합니다.
우리의 탭 요소는 div 용기 .tab 과 .tab--active 수업, 그리고 tabindex, 해당 탭에 대해 입력한 텍스트도 표시합니다. 하지만 그림자 루트. 이를 통해 웹 구성 요소 작성자는 웹 구성 요소에 자신의 마크업을 추가하는 동시에 콘텐츠에 대한 위치를 제공할 수 있습니다. we 제공하다. 주의 요소? 이는 기본적으로 "사용자가 렌더링한 콘텐츠를 사이에 웹 구성 요소 태그 여기에서 지금 확인해 보세요.. "
그래서 구성 요소는 섀도우 루트를 만들고 여기에 일부 콘텐츠를 추가하여 자리 표시자와 함께 멋진 스타일의 탭 헤더를 렌더링합니다() 내부 콘텐츠를 렌더링합니다.
캡슐화된 스타일
웹 개발에서 고전적이고 더 실망스러운 문제 중 하나는 항상 스타일이었습니다. 계단식 원하지 않는 곳으로. 다음과 같이 지정하는 애플리케이션의 스타일 규칙이 걱정될 수 있습니다. div.tab 이러한 탭을 방해합니다. 이것은 문제가 되지 않는다는 것이 밝혀졌습니다. 그림자 뿌리는 스타일을 캡슐화합니다. 섀도우 루트 외부의 스타일은 섀도우 루트 내부에 있는 내용에 영향을 주지 않으며(일부 예외는 제외) 그 반대의 경우도 마찬가지입니다.
이에 대한 예외는 상속 가능한 스타일입니다. 물론 신청할 필요는 없다. font-family 웹 앱의 모든 요소에 대한 스타일입니다. 대신 다음을 지정할 수 있습니다. font-family 한 번, 에 :root or html 그리고 그 아래의 모든 곳에서 상속받게 합니다. 이 상속은 실제로 그림자 루트도 관통합니다.
CSS 사용자 정의 속성 (종종 "css 변수"라고 함)은 관련 예외입니다. 섀도우 루트는 섀도우 루트 외부에 정의된 CSS 속성을 절대적으로 읽을 수 있습니다. 이것은 곧 관련이 될 것입니다.
::part 선택자
스타일은 어떻습니까 하지 상속. 우리가 다음과 같은 것을 사용자 정의하고 싶다면 어떻게 될까요? cursor, 섀도우 루트 내부의 무언가에 상속되지 않습니다. 우리가 운이 없습니까? 우리는 그렇지 않다는 것이 밝혀졌습니다. 위의 탭 요소 이미지와 해당 섀도우 루트를 다시 한 번 살펴보세요. 주의 part 속성의 div? 이를 통해 섀도우 루트 외부에서 해당 요소를 대상으로 지정하고 스타일을 지정할 수 있습니다. ::part 선택자. 우리는 약간의 예를 통해 걸을 것입니다.
신발끈 스타일 재정의
이러한 접근 방식을 각각 살펴보겠습니다. 지금과 같은, 많이 글꼴을 포함한 신발끈 스타일은 CSS 사용자 정의 속성에서 기본값을 받습니다. 이러한 글꼴을 응용 프로그램의 스타일에 맞추려면 해당 사용자 지정 소품을 재정의하십시오. 보다 문서 Shoelace가 사용하는 CSS 변수에 대한 정보를 확인하거나 DevTools에서 주어진 요소의 스타일을 간단히 검사할 수 있습니다.
섀도우 루트를 통해 스타일 상속
열기 app.css 에 파일을 src 디렉토리 스택블리츠 프로젝트. 에서 :root 섹션에서 letter-spacing: normal; 선언. 이후 letter-spacing 속성은 상속 가능합니다. 다음과 같이 새 값을 설정해 보세요. 2px. 저장 시 섀도우 루트에 정의된 탭 헤더를 포함한 모든 콘텐츠가 그에 따라 조정됩니다.
신발끈 CSS 변수 덮어쓰기
구성 요소 읽기 --indicator-color 활성 탭의 밑줄에 대한 CSS 사용자 정의 속성입니다. 우리는 이것을 몇 가지 기본적인 CSS로 재정의할 수 있습니다:
sl-tab-group {
--indicator-color: green;
}그리고 그와 마찬가지로 이제 녹색 표시기가 생겼습니다!
부품 쿼리
내가 지금 사용하고 있는 신발끈 버전(2.0.0-beta.83)에서 비활성화되지 않은 탭에는 pointer 커서. 활성(선택된) 탭의 기본 커서로 변경해 보겠습니다. 우리는 이미 보았다 요소는 part="base" 탭 헤더에 대한 컨테이너의 속성입니다. 또한 현재 선택된 탭은 active 기인하다. 다음 사실을 사용하여 활성 탭을 대상으로 지정하고 커서를 변경해 보겠습니다.
sl-tab[active]::part(base) {
cursor: default;
}그리고 그게 다야!
애니메이션 사용자 정의
비유적인 케이크를 장식하기 위해 Shoelace를 사용하여 애니메이션을 사용자 정의할 수 있는 방법을 살펴보겠습니다. 신발끈은 웹 애니메이션 API, 그리고 노출 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는 Ceb Components로 구축된 매우 야심찬 구성 요소 라이브러리입니다. 웹 구성 요소는 프레임워크에 독립적이므로 모든 프레임워크와 함께 모든 프로젝트에서 사용할 수 있습니다. 놀라운 성능 특성과 사용 편의성을 모두 갖춘 새로운 프레임워크가 나오기 시작하면서 어느 한 프레임워크에 얽매이지 않는 고품질 사용자 경험 위젯을 사용하는 능력이 그 어느 때보다 매력적입니다.
