AMP

amp-selector

사용자가 선택할 수 있는 옵션 메뉴를 표시하는 컨트롤을 나타냅니다.

필수 스크립트<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
지원되는 레이아웃전체
AMP By Example의 amp-selector 예를 참조하세요.

동작

AMP 선택기는 사용자가 하나 이상 선택할 수 있는 옵션 목록을 표시하는 컨트롤입니다. 옵션의 콘텐츠는 텍스트에 국한되지 않습니다.

  • amp-selector에 임의의 HTML 요소 또는 AMP 구성요소(예: amp-carousel, amp-img 등)가 포함될 수 있습니다.
  • amp-selector에는 중첩된 amp-selector 컨트롤을 포함할 수 없습니다.
  • 선택 가능한 옵션은 요소에 option 속성을 추가하고 속성에 값을 할당하여 설정할 수 있습니다(예: <li option='value'></li>).
  • 사용하지 않는 옵션은 요소에 disabled 속성을 추가하여 설정할 수 있습니다(예: <li option='d' disabled></li>).
  • 사전 선택된 옵션은 요소에 selected 속성을 추가하여 설정할 수 있습니다(예: <li option='b' selected></li>).
  • 여러 항목을 선택할 수 있도록 multiple 속성을 amp-selector 요소에 추가합니다. 기본적으로 amp-selector를 사용하면 한 번에 하나만 선택할 수 있습니다.
  • 전체 amp-selector를 사용하지 않으려면 disabled 속성을 amp-selector 요소에 추가합니다.
  • amp-selectorname 속성이 포함되어 있고 amp-selectorform 태그 안에 있는 경우 양식에서 제출 이벤트가 발생하면 amp-selector가 라디오 버튼/체크박스 그룹과 같이 동작하고 amp-selector 이름과 비교하여 선택한 값(옵션에 할당된 값)을 제출합니다.

예:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">해당 사항 없음</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>

<p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

선택 항목 지우기

요소를 탭하거나 클릭할 때 선택 항목을 모두 지우려면 요소에서 on 작업 속성을 설정하고 clear 작업 방법으로 AMP 선택기 id를 지정합니다.

예:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

AMP By Example에서 라이브 데모를 참조하세요.

속성

<amp-selector>의 속성

disabled, form, multiple, name위의 속성은 표준 HTML에서와 동일하게 동작합니다. select [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modekeyboard-select-mode 속성을 통해서는 amp-selector 내부에 있는 옵션의 키보드 탐색 동작을 지시합니다.
  • none(기본값): 이 탭 키는 amp-selector 의 항목 간에 기준을 변경합니다. 선택 사항을 변경하려면 Enter나 Space 키를 눌러야 합니다. 화살표 키는 사용되지 않습니다.
  • focus: 탭 키를 누르면 amp-selector 에 기준이 맞춰집니다. 화살표 키를 사용하여 항목 간에 이동합니다. 선택 사항을 변경하려면 Space나 Enter를 눌러야 합니다.
  • select: 탭 키를 누르면 amp-selector 에 기준이 맞춰집니다. 사용자가 화살표 키로 옵션을 이동함에 따라 선택사항이 변경됩니다.

<amp-selector> 옵션의 속성

option옵션이 선택 가능함을 나타냅니다. 값이 지정된 경우 양식과 함께 값의 콘텐츠가 제출됩니다.
disabled, selected위의 속성은 표준 HTML에서와 동일하게 동작합니다. [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

이벤트

이벤트에서 on 속성을 사용하여 다른 AMP 구성요소에서 작업을 트리거할 수 있습니다. 예: on="select: my-tab.show"

AMP 작업 및 이벤트에 관해 자세히 읽어보세요.

select사용자가 옵션을 선택하면 amp-selector 에서 select 이벤트를 트리거합니다. 옵션을 선택하거나 선택 해제하면 다중 선택기 및 단일 선택기에서 이 이벤트를 실행합니다. 사용하지 않는 옵션을 탭하면 select 이벤트가 트리거되지 않습니다.
  • event.targetOption 에는 선택한 요소의 option속성 값이 포함되어 있습니다.
  • event.selectedOptions 에는 선택한 모든 요소의 option 속성 값 배열이 포함되어 있습니다.

유효성 검사

AMP 유효성 검사기 사양에서 amp-selector 규칙을 참조하세요.

도움이 더 필요한가요?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub