프레임 워크 독립적 인 구성 요소 기반 UX 라이브러리 인 Shoelace 소개

이 기사에서는 Cory Laviska가 만든 구성 요소 라이브러리 인 Shoelace를 소개하지만 독특합니다. 태그, 모달 박스, 아코디언, 자동 완성 등 모든 표준 UX 구성 요소를 정의합니다. 이 구성 요소는 상자에서 벗어나 아름답고 사용하기 쉽고 완전히 사용자 정의 할 수 있습니다. 그러나 React, Solid 또는 Svelte와 같은 프레임 워크를 사용하여 이러한 구성 요소를 생성하지는 않지만 웹 구성 요소를 사용할 수 있습니다.

준비 웹 구성 요소는 훌륭하지만 현재는 여전히주의를 기울일 사소한 문제가 있습니다. 반응 나는 이전에 JavaScript 프레임 워크에 사용할 수 있다고 말했지만 웹 구성 요소에 대한 React의 지원이 현재 열악하기 전에 작성했습니다. 이 문제를 해결하기 위해 Shoelace는 React를 위해 특별히 포장지를 만들었습니다.

개인적으로 선호하는 또 다른 옵션은 웹 구성 요소의 태그 이름과 모든 속성을 받아들이는 가벼운 반응 구성 요소를 생성 한 다음 React의 단점을 처리하는 것입니다. 이전 게시물 에서이 옵션에 대해 논의했습니다. 이 체계는 제거되도록 설계 되었기 때문에이 체계가 마음에 듭니다. React의 실험 분기는 웹 구성 요소 상호 운용성의 문제를 해결 했으므로 일단 게시되면 사용 된 가벼운 웹 구성 요소 상호 운용성 구성 요소를 검색하고 제거 할 수있어 React 포장지없이 직접 웹 구성 요소 사용을 남길 수 있습니다.

서버 측 렌더링 (SSR) 이 글을 쓰는 시점에서 SSR에 대한 지원도 가난합니다. 이론적으로 SSR을 구현할 수있는 선언 섀도우 Dom (DSD)이라는 기술이 있습니다. 그러나 브라우저 지원이 제한되어 있으며 DSD는 실제로

서버 지원이 올바르게 작동하기 위해 필요합니다. 즉, 다음, 리믹스 또는 서버에서 사용하는 다른 도구에는 특별한 처리 능력이 필요합니다.

즉, 웹 구성 요소를 SSR과 같은 도구를 사용하는 웹 응용 프로그램과 함께 "올바르게 작동"하는 다른 방법이 있습니다. 요컨대, 웹 구성 요소를 등록하는 스크립트는 태그를 구문 분석하기 전에 차단 스크립트로 실행해야합니다. 그러나 이것은 다른 게시물의 주제가 될 것입니다.

물론, 어떤 유형의 클라이언트 렌더링 스파를 구축하고 있다면, 이것은 문제가되지 않습니다. 이것이 우리 가이 게시물에서 사용할 것입니다.

시작 이 게시물이 Shoelace 및 웹 구성 요소 기능에 중점을두기를 원하기 때문에 모든 것을 위해 Svelte를 사용할 것입니다. 또한이 stackblitz 프로젝트를 사용하여 데모를 할 것입니다. 우리는이 데모를 단계별로 함께 만들 것이지만 언제든지 최종 결과를 볼 수 있습니다.

나는 당신에게 떼를 사용하는 방법과 더 중요한 것은 그것을 사용자 정의하는 방법을 보여줄 것입니다. 우리는 Shadow Dom과 그들이 차단하는 외부 스타일 (그리고 어떤 스타일이 차단되지 않음)에 대해 논의 할 것입니다. 우리는 또한 당신에게 새로운 것이 될 수있는 CSS 선택기에 대해서도 논의 할 것입니다 - 우리는 Shoelace가 다양한 애니메이션을 덮어 쓰고 사용자 정의 할 수있는 방법조차 알 수 있습니다.

이 기사를 읽은 후 신발을 즐기고 React 프로젝트에서 시도하고 싶다면 내 소개에 언급 된 래퍼를 사용하는 것이 좋습니다. 이렇게하면 Shoelace의 구성 요소를 사용할 수 있으며 React가 이미 가지고있는 웹 구성 요소 수정을 방출하면 완전히 제거 할 수 있습니다 (버전 19).

Shoelace 소개 Shoelace에는 자세한 설치 지침이 있습니다. 가장 쉬운 방법은 HTML 문서에

및 태그를 추가하는 것입니다. 그러나 모든 생산 애플리케이션의 경우 원하는 것을 선택적으로 가져올 수 있으며 그에 따라 지침도 있습니다.

Shoelace를 설치 한 후 일부 컨텐츠를 렌더링하여 완전히 사용자 정의하는 단계를 살펴 보겠습니다. 더 복잡한 콘텐츠를 선택하기 위해 태그와 대화 상자 (종종 모달 박스라고 함) 구성 요소를 사용했습니다. 다음은 주로 문서에서 나오는 몇 가지 태그입니다.

이것은 아름답고 스타일의 라벨을 나타냅니다. 활동 태그의 밑줄도 잘 애니메이션하고 하나의 활동 태그에서 다음 태그로 미끄러집니다.

Shoelace 웹 사이트에 자세히 문서화 된 각 API에 대해 자세히 설명하는 시간을 낭비하지 않을 것입니다. 대신, 이러한 웹 구성 요소를 상호 작용하고 완전히 사용자 정의하는 가장 좋은 방법을 살펴 보겠습니다. <script></script> API와 상호 작용 : 메소드 및 이벤트 <link> 웹 구성 요소에서의 통화 방법 및 구독 이벤트는 사용했던 일반 프레임 워크와 약간 다를 수 있지만 너무 복잡하지는 않습니다. 그것을하는 방법을 봅시다.

태그 태그 구성 요소 ()에는 특정 태그를 수동으로 표시하는 메소드가 있습니다. 이를 호출하려면 태그의 기본 DOM 요소에 액세스해야합니다. Svelte에서 이것은

를 사용하는 것을 의미합니다. React에서는 심판이 될 것입니다. 등. Svelte를 사용하고 있으므로 태그 인스턴스 변수를 선언하겠습니다.

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

이제 우리는 버튼을 추가하여 호출 할 수 있습니다 :

이벤트에서도 마찬가지입니다. 새 태그가 표시되면 A

이벤트가 트리거됩니다. 변수에

를 사용할 수 있거나 Svelte 's 바로 가기를 사용할 수 있습니다.

이것은 다른 태그가 표시되면 이벤트 객체를 작동하고 이벤트 객체를 기록합니다.

일반적으로 우리는 태그를 렌더링하고 사용자가 그들 사이를 클릭하도록합니다. 그래서이 작업은 일반적으로 필요하지 않지만 필요하면 거기에 있습니다. 이제 대화 상자 구성 요소를 대화식으로 만들어 봅시다.

대화 대화 상자가 열려 있는지 여부를 제어하는 ​​ 대화 상자 구성 요소 ()는

속성을 ​​허용합니다. 우리의 벨트 구성 요소에서 선언 해 봅시다 : <sl-tab-group></sl-tab-group>

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

도 대화 상자를 숨기기위한

이벤트도 있습니다. 속성을 ​​통과하고 숨겨진 이벤트에 바인딩하여 사용자가 클릭하여 대화 상자 콘텐츠 외부에서 닫을 때 재설정 할 수 있습니다. 클릭 핸들러를 해당 닫기 버튼에 추가하여 sl-hide 속성을 ​​False로 설정하고 대화 상자를 닫습니다. open open 마지막으로, 열린 대화 버튼 :

를 연결합시다

let tabs;

<.> 그게 다야. 구성 요소 라이브러리의 API와의 상호 작용은 다소 직접적입니다. 이 기사만이 작업 만 수행하면 상당히 지루할 것입니다.

그러나 웹 구성 요소로 제작 된 Shoelace는 무언가, 특히 스타일이 우리가 익숙한 것과 약간 다르게 작동한다는 것을 의미합니다.

모든 스타일을 사용자 정의하십시오!

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

글을 쓰는 시점에서 Shoelace는 여전히 베타에 있으며 제작자는 기본 스타일을 변경하는 것을 고려하고 있으며 기본 스타일을 완전히 제거하여 더 이상 호스트 응용 프로그램의 스타일을 덮어 쓰지 않을 수도 있습니다. 우리가 소개 할 개념은 어쨌든 관련이 있지만, 내가 언급 한 떼 세부 사항 중 일부가 사용할 때 다르더라도 놀라지 않습니다.

Shoelace의 기본 스타일은 좋지만 웹 애플리케이션에는 고유 한 디자인이있을 수 있으며 UX 구성 요소가 일치하기를 바랍니다. 웹 구성 요소 세계 에서이 작업을 수행하는 방법을 살펴 보겠습니다.

우리는 실제로

를 개선하려고하지 않습니다. Shoelace의 제작자는 나보다 디자인이 더 좋습니다. 대신, 우리는 자신의 웹 응용 프로그램에 적응할 수 있도록

를 변경하는 방법을 살펴 봅니다.

Quick View Shadow dom DevTools에서 태그 제목 중 하나를 봅니다 우리의 태그 요소는

및

클래스와 A

가있는 div 컨테이너를 생성하고 해당 태그에 입력 한 텍스트도 표시합니다. 그러나

섀도우 루트

내에 있습니다. 이를 통해 웹 구성 요소 저자는 웹 구성 요소에 자체 태그를 추가 할 수 있으며, 우리가 제공하는 것을 배치 할 수있는 장소를 제공 할 수 있습니다. 요소에주의를 기울이십니까? 이는 기본적으로 " "의 웹 구성 요소 태그 사이에 사용자가 렌더링하는 것을 의미합니다. 따라서 구성 요소는 그림자 루트를 생성하여 멋진 스타일 레이블 제목과 자리 표시 자 ()를 렌더링하여 콘텐츠를 렌더링합니다. 포장 스타일 웹 개발에서 고전적이고 더 실망스러운 문제는 항상 우리가 나타나기를 원하지 않는 스타일 캐스케이드였습니다. 응용 프로그램의 모든 스타일 규칙이

와 같은 것을 지정하는 모든 스타일 규칙이 이러한 태그를 방해 할 것이라고 걱정할 수 있습니다. 이것은 문제가되지 않는다는 것이 밝혀졌습니다. 그림자 뿌리 외부의 스타일은 그림자 루트 내부에있는 내용에 영향을 미치지 않습니다 (나중에 논의 할 예외 포함).

이것에 대한 예외는 상속 가능한 스타일입니다. 물론 웹 애플리케이션의 모든 요소에

스타일을 적용 할 필요는 없습니다. 대신, 지난번에 font-family 또는 :root를 지정하고 그 아래에있는 모든 것을 상속받을 수 있습니다. 이 상속은 실제로 그림자 뿌리에 침투합니다. html CSS 사용자 정의 속성 (일반적으로 "CSS 변수")은 관련 예외입니다. Shadow Root는 Shadow Root 외부에 정의 된 CSS 속성을 확실히 읽을 수 있습니다. font-family

선택기 상속되지 않은 스타일은 어떻습니까? 그림자 루트 내부에서 무언가를 사용자 정의하고 싶다면 (예 : 상속하지 않은

)가 운이 좋지 않습니까? 우리가하지 않은 것으로 밝혀졌습니다. 위의 레이블 요소 이미지와 그림자 루트를 다시 확인하십시오. div의 속성에주의를 기울이십니까? 이를 통해

선택기를 사용하여 그림자 루트 외부에서 요소를 찾아서 스타일링 할 수 있습니다. 우리는 예제를 단계별로 소개 할 것입니다.

슈퍼 슈트 스타일을 덮어 쓴 ::part 이 방법의 실제 적용을 보자. 현재 많은 신발 끈 스타일 (글꼴 포함)은 CSS 사용자 정의 속성으로부터 기본값을받습니다. 이러한 글꼴을 응용 프로그램의 스타일에 맞추려면 관련 사용자 정의 속성을 무시하십시오. CSS 변수 Shoelace가 사용하는 문서를 참조하거나 DevTools의 주어진 요소의 스타일을 간단히 확인할 수 있습니다.

섀도우 루트

를 통해 스타일을 상속합니다 <.> StackBlitz 프로젝트의 SRC 디렉토리에서 app.css 파일을 엽니 다. 맨 아래의

섹션에는 문이 표시됩니다. 속성은 상속 가능하므로 와 같은 새 값을 설정하십시오. 저장 후 모든 컨텐츠 (Shadow Root에 정의 된 태그 제목 포함)가 그에 따라 조정됩니다. 슈트 슈트로 작성 CSS 변수 cursor 구성 요소는 활성 태그의 밑줄에 대한 part CSS 사용자 정의 속성을 읽습니다. 우리는 몇 가지 기본 CSS를 사용하여 그것을 무시할 수 있습니다. ::part 그게 다야, 이제 우리는 녹색 표시기가 있습니다!

문의 부품

Shoelace 버전에서 현재 사용중인 (2.0.0-Beta.83), 비 장비 태그에는 포인터 커서가 있습니다. 활성 (선택한) 태그의 기본 커서로 변경해 봅시다. 태그 제목의 컨테이너에 요소가 A

속성을 ​​추가하는 것을 보았습니다. 또한, 현재 선택된 태그는

속성을 ​​수신합니다. 이 사실들을 사용하여 활성 태그를 찾아 커서를 변경합시다 : . 그게 다야!

커스텀 애니메이션

케이크에 착빙을 추가하려면 Shoelace가 애니메이션을 사용자 정의 할 수있는 방법을 살펴 보겠습니다. Shoelace는 웹 애니메이션 API를 사용하고 A

API를 노출하여 다양한 요소가 다양한 상호 작용을 애니메이션하는 방법을 제어합니다. 자세한 내용은 설명서를 참조하십시오. 예를 들어, Shoelace의 기본 대화 상자 애니메이션을 최상위 애니메이션에서 입력하고 숨겨져있을 때 아래로 이동하는 것부터 Shoelace의 기본 대화 상자 애니메이션을 변경하는 방법은 다음과 같습니다.

setDefaultAnimation 이 코드는 app.svelte 파일에 있습니다. 원래 기본 애니메이션을 보려면 댓글을 달아주십시오.

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

요약 Shoelace는 웹 구성 요소를 사용하여 제작 된 매우 야심 찬 구성 요소 라이브러리입니다. 웹 구성 요소에는 프레임 워크가 없으므로 모든 프로젝트의 프레임 워크와 함께 사용할 수 있습니다. 새로운 프레임 워크가 놀라운 성능 기능과 사용 편의성을 보여주기 시작함에 따라 두 프레임 워크에 의해 구속되지 않은 품질의 사용자 경험 구성 요소를 사용할 수 있다는 것은 그 어느 때보 다 매력적입니다.

위 내용은 프레임 워크 독립적 인 구성 요소 기반 UX 라이브러리 인 Shoelace 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!