HowTo 구성요소
'방법: 구성요소'는 일반적인 UI 패턴을 구현하는 웹 구성요소의 모음입니다. 이러한 구현의 목적은 교육 리소스가 되는 것입니다. 다양한 구성요소의 댓글이 빽빽하게 구현된 구현을 살펴보고 이를 통해 배울 수 있습니다. 이러한 라이브러리는 명시적으로 UI 라이브러리가 아니며 프로덕션에서 사용해서는 안 됩니다.
구성요소
<howto-checkbox>: 양식의 불리언 옵션을 나타냅니다. 가장 일반적인 체크박스 유형은 사용자가 두 가지 옵션(선택 및 선택 해제) 간에 전환할 수 있는 이중 유형입니다.<howto-tabs>: 표시되는 콘텐츠를 여러 패널로 분리하여 제한합니다.<howto-tooltip>: 요소가 키보드 포커스를 받거나 마우스가 키보드 위에 있을 때 요소와 관련된 정보를 표시하는 팝업입니다.
목표
Google의 목표는 액세스 가능하고, 성능이 우수하고, 유지관리가 용이하고, 스타일 지정이 쉬운 강력한 구성요소를 작성하기 위한 권장사항을 시연하는 것입니다. 각 구성요소는 완전히 독립적이므로 참조 구현 역할을 할 수 있습니다.
접근성
구성요소는 액세스 가능한 리치 인터넷 애플리케이션 표준인 ARIA를 설명하고 보여주기 위한 가이드인 WAI ARIA 작성 관행을 거의 준수합니다. ARIA에 익숙하지 않다면 WebFundamentals 소개를 확인하세요. 각 구성요소는 작성 관행의 관련 섹션으로 연결됩니다. 반드시 필요한 것은 아니지만 코드를 자세히 살펴보기 전에 작성 사례 섹션을 읽어보는 것이 좋습니다.
성능
웹 개발에서 '성능'이라는 용어는 여러 가지에 적용될 수 있습니다. <howto>의 맥락에서 성능은 대부분 휴대기기에서도 60fps로 일관되게 실행되는 애니메이션을 나타냅니다.
시각적 유연성
레이아웃 또는 선택 상태나 활성 상태를 나타내는 경우를 제외하고는 구성요소에 최대한 스타일이 지정되지 않습니다. 이렇게 하면 구현을 시각적으로 유연하고 집중할 수 있습니다. 장식에 시간을 들이지 않음으로써 구성요소의 기능을 만드는 데 반드시 필요한 수준으로만 코드를 제한합니다. 구성요소가 작동하는 데 스타일이 필요한 경우 그 이유를 설명하는 주석과 함께 스타일이 표시됩니다.
유지관리 가능한 코드
방법: 구성요소는 참조 구현이므로 읽기 쉽고 이해하기 쉽고 주석 처리된 코드를 작성하는 데 추가 시간을 들였습니다.
비목표
라이브러리 / 프레임워크 / 툴킷이어야 합니다.
<howto> 구성요소는 프로덕션 용도가 아니므로 npm, bower 또는 다른 플랫폼에 게시되지 않습니다. 간결하고 읽기 쉬운 코드를 위해 최신 JavaScript API를 사용하고 있으며 웹 구성요소 표준을 구현하는 최신 브라우저를 지원하고 있습니다. 이러한 구현을 읽은 후 자신의 필요에 맞게 코드를 조정할 수 있습니다.
이전 버전과의 호환성
이 코드를 직접 사용해서는 안 됩니다. 더 나은 구현이 발견되면 모든 요소의 구현과 API를 Google이 크게 변경할 수 있으며 그렇게 할 가능성이 매우 높습니다. 이 강의는 웹 UI 빌드를 위한 권장사항을 공유하고 살펴보고 논의할 수 있는 실시간 리소스입니다.
완전성
Google은 현재 WAI ARIA 작성 방식에서 확인할 수 있는 *모든 *구성요소를 구현하지 않으며 구현하지 않을 수도 있습니다. 그러나 다른 <howto> 구성요소에 사용된 원칙을 재사용하면 리더에서 누락된 구성요소를 구현할 수 있습니다.