최신 드롭다운 구성요소 HTML

TL;DR

저는 HTML 양식에서 작동하고 모든 플랫폼과 브라우저에서 동일하게 보이는 사용자 정의 드롭다운 구성 요소를 만드는 데 도전하고 싶었습니다. 드디어 하나 만들었는데, 방법은 이렇습니다...

암호

코드는 이 코드펜에서 확인할 수 있습니다.

어떻게 이루어졌는가

• HTML 요소를 확장하는 기본 웹 구성 요소를 만듭니다.
• 여러 테마를 가질 수 있는 기능을 제공합니다(CSS에서 사전 정의된 색상 사용).
• setAttribute를 사용하거나 항목이 포함된 이벤트를 실행하여 항목을 설정할 수 있습니다.
• 항목이 선택되면 알려주는 맞춤 이벤트를 듣습니다.
• 모든 HTML 형식의 일부가 될 수 있는 기능을 부여하세요. 이 기사를 작성하는 시점에 Safari와 같은 일부 브라우저에서 작동하려면 element-internals-polyfill이 필요합니다.

드롭다운 구성요소의 UI

세 가지 요소로 구성되어 있습니다.

1. 현재 선택된 항목을 표시하는 읽기 전용 입력 요소입니다.
2. 드롭다운 메뉴의 항목이 포함된 (처음에는 숨겨진) div
3. 드롭다운 상태(열림 또는 닫힘)를 나타내는 아이콘입니다. 사용된 svg는 Bootstrap 아이콘에서 채택되었습니다.

비즈니스 로직

1. 연결되면 선택한 테마로 구성요소를 표시합니다. 아무것도 선택하지 않은 경우 기본 항목을 선택하세요.
2. 컴포넌트를 선언적으로 생성할 때 전달된 드롭다운 및 항목 선택 이벤트를 등록합니다.
3. 드롭다운 이벤트가 실행되면 항목을 캡처하여 목록에 추가하세요.
4. 선택한 항목을 프로그래밍 방식으로 설정하는 기능을 부여합니다. 이는 현재 선택한 항목이 서비스 제공자에게 미리 알려진 경우 특히 유용합니다. 예를 들어 예약 사이트의 위치 목록에는 사용자가 거주하는 현재 도시가 이상적으로 표시되어야 합니다.

어떻게 보이는지

결론

우리는 브라우저에서 사용할 수 있는 도구를 사용하여 현대적인 사용자 정의 가능한 드롭다운 구성 요소를 만들었으며 이는 어디에서나 동일하게 보입니다. 추가 사항이나 질문이 있으면 언제든지 알려주시기 바랍니다.

즐거운 개발되세요!

위 내용은 최신 드롭다운 구성요소 HTML의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!