방법 구성요소
'방법: 구성요소' 공통 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>
구성요소에서 리더가 구성요소를 구현할 수 있도록 해야 합니다.
있습니다.