- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Selector
Amp-selector is an amp component which displays menu of options and the user can select between the options. The options displayed can be text, images or any other amp-component. In this chapter, let us discuss this in detail.
To work with amp-selector, we need to include following javascript files −
<script async custom-element = "amp-selector" src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js"> </script>
Format of amp-selector
The following code shows the sample for format of amp-selector −
<amp-selector layout = "container"> <amp-img src = "images/christmas1.jpg" width = "60" height = "40" option = "1"> <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>
You can use standard html tags or amp components inside amp-selector.The contents are displayed pke menu on the screen and the user can select between them.The menus displayed can be a single select or multiselect.
Let us understand this with the help of an example of single and multi select as given below.
Amp Selector Single Select
The following code is a sample for amp-selector single select −
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Selector</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name="viewport" content="width=device-width,minimum-scale = 1,initial-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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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]) { outpne-color: #b6A848; outpne-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" widt h = 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>
Output
The output of the above given code is as shown below −
![Amp Sector](/google_amp/images/amp_sector.jpg)
Note that in the above example we have used amp-selector and used images inside to show the options. It is a single select selector so you can select any one image as shown in the output.
Amp Selector Multiple Select
In this example, let us display amp-selector with images using multiple attributes, we can select multiple options from the selector.
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8 "> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Selector</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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]) { outpne-color: blue; outpne-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>
Output
The output of the code shown above is given below −
![Multiple Select](/google_amp/images/multiple_select.jpg)
We can also use amp-selector to show radio buttons as shown in the code given below −
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Selector</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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 { pst-style: none; } .radio-menu [option][selected] { outpne: none; } .radio-menu [option] { display: flex; apgn-items: center; } .radio-menu [option]:before { transition: background 0.25s ease-in-out; content: ""; display: inpne-block; width: 24px; height: 24px; margin: 8px; border-radius: 100%; border: sopd 1px black; } .radio-menu [option = red][selected]:before { text-apgn: center; content: "✓"; color: white; background: red; } .radio-menu [option = green][selected]:before { text-apgn: center; content: "✓"; color: white; background: green; } .radio-menu [option = blue][selected]:before { text-apgn: 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"> <span option = "red">Red</span> <span option = "green">Green</span> <span option = "blue">Blue</span> </amp-selector> </body> </html>
Output
![Radio Buttons](/google_amp/images/radio_buttons.jpg)