selectmenu html 태그

selectmenu 소개 : 혁신적인 형태 제어

이 기사는 실험적인 selectmenu Form Control에 들어가 전통적인 스타일링 기능을 강조합니다.<select></select> 강요. 우리는 개발의 이유와 웹 양식 설계에 혁명을위한 잠재력을 탐구 할 것입니다.

웹 개발자는 종종 주요 플랫폼 결핍으로 스타일링 형식 제어의 한계를 인용합니다. 2020 년 CSS 설문 조사는 가장 필요한 10 가지 개선 사항 중에서 양식 스타일링을 순위로 매겼습니다.<select></select> 특별히 스타일에 가장 문제가되는 요소로 특별히 식별되었습니다. a의 버튼 부분<select></select> 스타일이 비교적 쉽고 드롭 다운 내에서 옵션을 사용자 정의하는 것은 매우 어려운 일입니다.

결과적으로 많은 설계 시스템 및 구성 요소 라이브러리는 HTML, CSS 및 JavaScript를 사용하여 처음부터 사용자 정의 선택 요소를 만듭니다. 그러나 적절한 접근성, 키보드 내비게이션 및 정확한 팝업 포지셔닝을 달성하는 것은 복잡하고 시간이 많이 걸리므로 종종 액세스 할 수없는 선택 메뉴가 발생합니다.

selectmenu Control은 내장 된 고도의 스타일 대안을 제공하여 이러한 지속적인 문제를 해결하는 것을 목표로합니다.

오픈 UI 이니셔티브

개발자, 디자이너 및 브라우저 구현자를 포함한 공동 작업 인 Open UI 이니셔티브는 selectmenu 의 개발을 주도하고 있습니다. 목표는 개발자가 selectmenu , 드롭 다운, 확인란 및 라디오 버튼을 포함한 내장 UI 컨트롤을 완벽하게 스타일링하고 확장 할 수 있도록하는 것입니다. 여기에는 구현 및 접근성 요구 사항을 해결하기위한 사양을 작성하는 것이 포함됩니다.

아직 초기 단계이지만 프로젝트는 빠르게 진행되고 있으며 결과는 유망합니다. Open UI 커뮤니티에 참여하고 개발에 기여할 수 있습니다.

selectmenu 컨트롤

Chromium (주로 Microsoft Edge Team에서 Google Chrome과 공동으로)에서 구현 된 selectmenu 친숙한 옵션 선택 경험을 제공하는 새로운 내장 컨트롤입니다. 선택한 값을 표시하는 버튼, 버튼을 클릭하여 트리거 된 팝업 및 팝업 내의 옵션 목록이 있습니다.

왜 새 이름인가?

"selectmenu"라는 이름은 자리 표시 자이며, 주로 기존을 크게 변경하기 때문입니다.<select></select> 요소는 광범위한 호환성 문제를 일으 킵니다. 따라서 selectmenu 는 독립적 인 제어로 설계되었습니다.

시작하기

아직 생산 준비가되지는 않았지만 selectmenu 다음과 같이 실험 할 수 있습니다.

1. 크롬 기반 브라우저 (크롬 또는 에지)의 카나리아 버전을 사용하십시오.
2. "실험 웹 플랫폼 기능"플래그를 about:flags 및 재시작에 활성화하십시오.
3. 바꾸다<select></select> selectmenu 가있는 웹 페이지의 요소.

기본 기능은 기본적으로 제공되지만 selectmenu 의 진정한 힘은 스타일링 및 확장 옵션에 있습니다.

피드백이 권장됩니다!

오픈 UI 팀은 피드백을 환영합니다. 조기 테스트는 제어를 개선하는 데 도움이됩니다. Open UI Github 저장소를 통한 버그 또는 제한 사항을보고합니다.

selectmenu 해부학 이해

Styling selectmenu 내부 구조를 이해해야합니다.

• <selectmenu></selectmenu> : 버튼과 ListBox가 포함 된 루트 요소.
• <button></button> : ListBox 가시성을 트리거합니다.
• <label></label> : (선택 사항) 선택한 값을 표시합니다. 반드시 내부는 아닙니다<button></button> .
• <listbox></listbox> : 랩<option></option> 그리고<optgroup></optgroup> 강요.
• <optgroup></optgroup> : 그룹<option></option> 선택적 레이블이있는 요소.
• <option></option> : 선택 가능한 값을 나타냅니다.

기본 동작

selectmenu 동작을 모방합니다<select></select> . 최소한의 마크 업은 충분합니다.

<selectmenu>
  <option value="Option 1">옵션 1</option>
  <option value="Option 2">옵션 2</option>
  <option value="Option 3">옵션 3</option>
</selectmenu>

기본<button></button> ,,,<label></label> , 그리고<listbox></listbox> 요소가 자동으로 생성됩니다.

스타일링 ::part()

::part() pseudo element는 개별 구성 요소를 스타일링 할 수 있습니다.

 .my-select-menu :: part (button) {
  색상 : 흰색;
  배경색 : #F00;
  패딩 : 5px;
  Border-Radius : 5px;
}

.my-select-menu :: part (listbox) {
  패딩 : 10px;
  마진-탑 : 5px;
  테두리 : 1px 솔리드 레드;
  Border-Radius : 5px;
}

이것은 버튼과 ListBox 스타일입니다. ::part() 함께 작동합니다<button></button> ,,,<label></label> , 그리고<listbox></listbox> .

맞춤 마크 업

더 큰 컨트롤을 보려면 명명 된 슬롯을 사용하여 기본 마크 업을 교체하십시오.

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">열려 있는</button>
    <span class="label">옵션을 선택하십시오</span>
  </div>
  <option value="Option 1">옵션 1</option>
  <option value="Option 2">옵션 2</option>
  <option value="Option 3">옵션 3</option>
</selectmenu>

slot="button" 속성은 기본 버튼을 대체합니다. behavior="button" 버튼 동작 및 접근성을 할당합니다. 비슷한 기술이 적용됩니다<listbox></listbox> .

마크 업 확장

기능을 확장하기 위해 새로운 요소 추가 :

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>월경</h3>
      <option value="Rose">장미</option>
      <h3>나무</h3>
      <option value="Willow">솜틀</option>
    </div>
  </div>
</selectmenu>

이것은 사용자 정의 그룹화 및 스타일을 추가합니다.

Shadow Dom (고급) 교체

완전히 제어하려면 attachShadow() 사용하여 섀도우 dom을 교체하십시오. 이를 위해서는 최대 사용자 정의를 제공하지만보다 고급 기술이 필요합니다.

결론

selectmenu 스타일링 및 전통적인 확장을 크게 향상시킵니다<select></select> 강요. 내장 브라우저 구현은 접근성과 적절한 위치를 보장합니다. 여전히 실험적이지만 selectmenu 웹 양식 설계를 향상시킬 수있는 엄청난 잠재력을 가지고 있습니다. 오픈 UI 이니셔티브에 참여하여 미래를 형성하는 데 도움이됩니다.

위 내용은 selectmenu html 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!