amp-selector

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

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

Required Scripts

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Supported Layouts

fill fixed fixed-height nodisplay responsive container

예제

Product Browse Page Product Page amp-selector Multi Page Flow Restrict Duplicate Selection Image Galleries with amp-carousel Tab Panels with amp-selector SeatMap SeatMap Multiple Selection

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

필수 스크립트	`<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-selector에 name 속성이 포함되어 있고 amp-selector가 form 태그 안에 있는 경우 양식에서 제출 이벤트가 발생하면 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-mode

keyboard-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 규칙을 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기

amp-selector 1.0 0.1