HowTo 구성요소 - 개요

방법 구성요소

'방법: 구성요소' 공통 UI를 구현하는 웹 구성요소의 모음입니다. 학습합니다. 이러한 구현의 목적은 교육 리소스를 제공하는 것입니다. 다양한 디코더 아키텍처를 기반으로 그로부터 배우기를 바랍니다. 명시적으로 NOT 프로덕션 환경에서 사용해서는 안 됩니다.

  • <howto-checkbox>: 형식의 불리언 옵션을 나타냅니다. 가장 일반적인 유형의 체크박스는 사용자가 두 가지 선택 항목(선택됨 및 선택 해제) 간에 전환할 수 있는 이중 유형입니다.
  • <howto-tabs>: 표시되는 콘텐츠를 여러 패널로 구분하여 제한합니다.
  • <howto-tooltip>: 요소가 추가되었을 때 요소와 관련된 정보를 표시하는 팝업 키보드 포커스를 받거나 그 위로 마우스를 가져갑니다.

목표

이 글의 목표는 실행 가능한 견고한 구성요소를 작성하기 위한 권장사항을 접근 가능하고, 성능이 우수하며, 유지관리 및 스타일링이 용이합니다. 각 구성요소는 참조 구현으로 사용할 수 있도록 완전히 독립적입니다.

접근성

이러한 구성요소는 WAI ARIA 작성 권장사항으로는 ARIA, 즉 Accessible Rich Internet Application 설명 및 보여주기 표준 버전을 사용합니다. ARIA에 익숙하지 않은 경우 자세한 내용은 WebFundamentals 각 구성요소는 작성 관행의 관련 섹션으로 연결됩니다. 동안 꼭 필요하지는 않지만 코드를 본격적으로 사용하기 위한 연습입니다.

성능

웹 개발에서 '성능'이란 용어 다양한 유형의 있습니다. <howto>의 컨텍스트에서 성능은 대부분 애니메이션을 나타냅니다. 모바일 장치에서도 60fps로 일관되게 실행됩니다.

시각적 유연성

가능한 한 구성요소의 스타일은 지정되지 않습니다. 단, 레이아웃이나 활성화해야 합니다. 이는 구현의 시각적 유연성을 유지하기 위한 것입니다. 집중할 수 있게 됩니다 장식에 시간을 소비하지 않음으로써 코드를 구성 요소 기능을 만드는 데 꼭 필요합니다. 스타일이 필요한 경우 구성요소가 작동하면 스타일이 주석과 함께 표시됩니다. 그 이유를 설명해 드리겠습니다.

유지관리 가능한 코드

방법: 구성요소는 참조입니다. 보다 쉽게 읽을 수 있고 쉽게 작성하는 데 조밀하게 주석 처리된 이해하기 쉬운 코드를 사용합니다.

목표 외

라이브러리 / 프레임워크 / 툴킷이 되어 주세요.

<howto> 구성요소가 npm, bower 또는 기타 플랫폼에 게시되지 않음 프로덕션에서 사용하기 위한 것이 아니기 때문입니다. 간결하게 설명하겠습니다. 최신 자바스크립트 API를 사용하고 있고 웹 구성요소 표준을 구현하는 브라우저를 사용합니다. 나 이 자료를 읽은 후 필요에 맞게 코드를 조정할 수 있습니다 있습니다.

이전 버전과의 호환성

코드에 직접 의존해서는 안 됩니다. 앞으로는 앞으로도 모든 요소의 구현 및 API를 크게 변경하는 것이 알아낼 수 있습니다 이것은 우리가 공유할 수 있는 살아있는 리소스입니다. 웹 UI 빌드를 위한 권장사항을 살펴보고 논의합니다.

완성도 높이기

현재 API를 구현할 수 있는 *모든 *구성요소를 구현하지는 않으며 그렇지 않을 수도 있습니다. 에 나와 있습니다. 그러나 이전에 사용한 원칙을 다른 <howto> 구성요소에서 리더가 구성요소를 구현할 수 있도록 해야 합니다. 있습니다.