Amp-selector는 옵션 메뉴를 표시하는 amp 구성 요소이며 사용자가 옵션 중에서 선택할 수 있습니다. 표시되는 옵션은 텍스트, 이미지 또는 기타 amp 구성 요소 일 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다.
amp-selector를 사용하려면 다음 자바스크립트 파일을 포함해야 합니다.
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Amp-selector의 형식
다음 코드는 amp-selector 형식의 샘플을 보여줍니다.
<amp-selector layout="container">
<amp-img src="images/christmas1.jpg"
width="60"
height="40"
option="1">
</amp-img>
<amp-img src="images/christmas2.jpg"
width="60"
height="40"
option="2">
</amp-img>
<amp-img src="images/christmas3.jpg"
width="60"
height="40"
option="3">
</amp-img>
<amp-img src="images/christmas4.jpg"
width="60"
height="40"
option="4">
</amp-img>
</amp-selector>
amp-selector 내부에서 표준 html 태그 또는 amp 구성 요소를 사용할 수 있으며, 내용은 화면에 메뉴처럼 표시되며 사용자가 선택할 수 있으며 표시되는 메뉴는 단일 선택 또는 다중 선택이 가능합니다.
아래에 주어진 단일 및 다중 선택의 예를 통해 이것을 이해합시다.
amp-selector 단일 선택
코드는 amp-selector 단일 선택의 샘플입니다.
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-selector.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
amp-selector:not([disabled]) amp-img[option][selected]:not([disabled]) {
outline-color: #b6A848;
outline-width: 2px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout="container">
<amp-img src="images/christmas1.jpg"
width="60"
height="40"
option="1">
</amp-img>
<amp-img src="images/christmas2.jpg"
width="60"
height="40"
option="2">
</amp-img>
<amp-img src="images/christmas3.jpg"
width="60"
height="40"
option="3">
</amp-img>
<amp-img src="images/christmas4.jpg"
width="60"
height="40"
option="4">
</amp-img>
</amp-selector>
</body>
</html>
결과
위의 주어진 코드의 출력은 다음과 같습니다.
위의 예에서는 amp-selector를 사용하고 내부 이미지를 사용하여 옵션을 표시했습니다. 단일 선택 selector이므로 출력에 표시된대로 하나의 이미지를 선택할 수 있습니다.
amp-selector 다중 선택
이 예제에서는 여러 속성을 사용하여 이미지와 함께 amp-selector를 표시하고 selector에서 여러 옵션을 선택할 수 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-selector.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
amp-selector:not([disabled]) amp-img[option][selected]:not([disabled]) {
outline-color: blue;
outline-width: 2px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout="container" multiple>
<amp-img src="images/christmas1.jpg"
width="60"
height="40"
option="1">
</amp-img>
<amp-img src="images/christmas2.jpg"
width="60"
height="40"
option="2">
</amp-img>
<amp-img src="images/christmas3.jpg"
width="60"
height="40"
option="3">
</amp-img>
<amp-img src="images/christmas4.jpg"
width="60"
height="40"
option="4">
</amp-img>
</amp-selector>
</body>
</html>
결과
위에 표시된 코드의 출력은 다음과 같습니다.
아래 코드와 같이 amp-selector를 사용하여 라디오 버튼을 표시할 수도 있습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-selector.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
.radio-menu {
list-style: none;
}
.radio-menu [option][selected] {
outline: none;
}
.radio-menu [option] {
display: flex;
align-items: center;
}
.radio-menu [option]:before {
transition: background 0.25s ease-in-out;
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin: 8px;
border-radius: 100%;
border: solid 1px black;
}
.radio-menu [option=red][selected]:before {
text-align: center;
content: "✓";
color: white;
background: red;
}
.radio-menu [option=green][selected]:before {
text-align: center;
content: "✓";
color: white;
background: green;
}
.radio-menu [option=blue][selected]:before {
text-align: center;
content: "✓";
color: white;
background: blue;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector class="radio-menu" layout="container" name="my-selector">
<div option="red">Red</div>
<div option="green">Green</div>
<div option="blue">Blue</div>
</amp-selector>
</body>
</html>